Showing
6 changed files
with
64 additions
and
34 deletions
... | @@ -4,6 +4,8 @@ const app = express(); | ... | @@ -4,6 +4,8 @@ const app = express(); |
4 | const path = require("path") | 4 | const path = require("path") |
5 | const server = http.createServer(app); | 5 | const server = http.createServer(app); |
6 | const socketIO = require("socket.io") | 6 | const socketIO = require("socket.io") |
7 | +const moment = require("moment") | ||
8 | + | ||
7 | 9 | ||
8 | const io = socketIO(server); | 10 | const io = socketIO(server); |
9 | 11 | ||
... | @@ -12,7 +14,12 @@ const PORT = process.env.PORT || 3000; | ... | @@ -12,7 +14,12 @@ const PORT = process.env.PORT || 3000; |
12 | 14 | ||
13 | io.on('connection', (socket) => { | 15 | io.on('connection', (socket) => { |
14 | socket.on("chatting", (data)=>{ | 16 | socket.on("chatting", (data)=>{ |
15 | - io.emit("chatting", data) | 17 | + const { name, msg } = data; |
18 | + io.emit("chatting", { | ||
19 | + name, | ||
20 | + msg, | ||
21 | + time: moment.format("h:ss A") | ||
22 | + }) | ||
16 | }) | 23 | }) |
17 | }); | 24 | }); |
18 | 25 | ... | ... |
chat/app/package-lock.json
0 → 100644
This diff is collapsed. Click to expand it.
... | @@ -4,12 +4,14 @@ | ... | @@ -4,12 +4,14 @@ |
4 | "description": "", | 4 | "description": "", |
5 | "main": "index.js", | 5 | "main": "index.js", |
6 | "scripts": { | 6 | "scripts": { |
7 | + "start": "nodemon ./app.js", | ||
7 | "test": "echo \"Error: no test specified\" && exit 1" | 8 | "test": "echo \"Error: no test specified\" && exit 1" |
8 | }, | 9 | }, |
9 | "keywords": [], | 10 | "keywords": [], |
10 | "author": "", | 11 | "author": "", |
11 | "license": "ISC", | 12 | "license": "ISC", |
12 | "dependencies": { | 13 | "dependencies": { |
14 | + "dayjs": "^1.11.2", | ||
13 | "express": "^4.18.1", | 15 | "express": "^4.18.1", |
14 | "moment": "^2.29.3", | 16 | "moment": "^2.29.3", |
15 | "socket.io": "^4.5.1" | 17 | "socket.io": "^4.5.1" | ... | ... |
... | @@ -16,7 +16,7 @@ html, body { | ... | @@ -16,7 +16,7 @@ html, body { |
16 | } | 16 | } |
17 | 17 | ||
18 | .user-container { | 18 | .user-container { |
19 | - background: #a9bdce; | 19 | + background: rebeccapurple; |
20 | flex: 1; | 20 | flex: 1; |
21 | display: flex; | 21 | display: flex; |
22 | justify-content: flex-start; | 22 | justify-content: flex-start; |
... | @@ -24,19 +24,21 @@ html, body { | ... | @@ -24,19 +24,21 @@ html, body { |
24 | padding: 0.5rem; | 24 | padding: 0.5rem; |
25 | } | 25 | } |
26 | 26 | ||
27 | -.user-container label { | 27 | +.user-container .nickname { |
28 | font-size : 14px; | 28 | font-size : 14px; |
29 | - margin-right : 1rem; | 29 | + margin-right : 1.5rem; |
30 | + margin-left : 1rem; | ||
31 | + color:#fff; | ||
30 | } | 32 | } |
31 | 33 | ||
32 | .user-container input { | 34 | .user-container input { |
33 | border-radius: 3px; | 35 | border-radius: 3px; |
34 | border: none; | 36 | border: none; |
35 | - height: 100%; | 37 | + height: 80%; |
36 | } | 38 | } |
37 | 39 | ||
38 | .display-container { | 40 | .display-container { |
39 | - background: #b2c7d9; | 41 | + background: #D2D2FF; |
40 | flex : 12; | 42 | flex : 12; |
41 | overflow-y:scroll; | 43 | overflow-y:scroll; |
42 | } | 44 | } |
... | @@ -65,14 +67,15 @@ html, body { | ... | @@ -65,14 +67,15 @@ html, body { |
65 | 67 | ||
66 | .send-button { | 68 | .send-button { |
67 | flex:1; | 69 | flex:1; |
68 | - background: #ffeb33; | 70 | + background: rebeccapurple; |
71 | + color:#fff; | ||
69 | border:none; | 72 | border:none; |
70 | height:100%; | 73 | height:100%; |
71 | border-radius:3px; | 74 | border-radius:3px; |
72 | } | 75 | } |
73 | 76 | ||
74 | .chatting-list li { | 77 | .chatting-list li { |
75 | - width:90%; | 78 | + width:50%; |
76 | padding:0.3rem; | 79 | padding:0.3rem; |
77 | display:flex; | 80 | display:flex; |
78 | justify-content: flex-start; | 81 | justify-content: flex-start; |
... | @@ -105,7 +108,7 @@ html, body { | ... | @@ -105,7 +108,7 @@ html, body { |
105 | padding: 0.5rem; | 108 | padding: 0.5rem; |
106 | font-size: 12px; | 109 | font-size: 12px; |
107 | margin: 0 5px; | 110 | margin: 0 5px; |
108 | - flex: 7; | 111 | + flex: 10; |
109 | } | 112 | } |
110 | 113 | ||
111 | .time { | 114 | .time { |
... | @@ -119,7 +122,8 @@ html, body { | ... | @@ -119,7 +122,8 @@ html, body { |
119 | } | 122 | } |
120 | 123 | ||
121 | .sent .message { | 124 | .sent .message { |
122 | - background: #ffeb33; | 125 | + background: #9986EE; |
126 | + color: #fff; | ||
123 | } | 127 | } |
124 | 128 | ||
125 | .received .message { | 129 | .received .message { | ... | ... |
... | @@ -10,27 +10,12 @@ | ... | @@ -10,27 +10,12 @@ |
10 | <body> | 10 | <body> |
11 | <div class="wrapper"> | 11 | <div class="wrapper"> |
12 | <div class="user-container"> | 12 | <div class="user-container"> |
13 | - <lable for="nickname">대화명</lable> | 13 | + <lable class="nickname" for="nickname">닉네임설정</lable> |
14 | <input type="text" id="nickname"> | 14 | <input type="text" id="nickname"> |
15 | </div> | 15 | </div> |
16 | <div class="display-container"> | 16 | <div class="display-container"> |
17 | <ul class="chatting-list"> | 17 | <ul class="chatting-list"> |
18 | - <li class="sent"> | 18 | + |
19 | - <span class="profile"> | ||
20 | - <span class="user">깔깔</span> | ||
21 | - <img class="image" src="https://placeimg.com/50/50/any" alt="any"> | ||
22 | - </span> | ||
23 | - <span class="message">그래 반가워</span> | ||
24 | - <span class="time">오후 2:10</span> | ||
25 | - </li> | ||
26 | - <li class="received"> | ||
27 | - <span class="profile"> | ||
28 | - <span class="user">깔깔</span> | ||
29 | - <img class="image" src="https://placeimg.com/50/50/any" alt="any"> | ||
30 | - </span> | ||
31 | - <span class="message">그래 반가워</span> | ||
32 | - <span class="time">오후 2:10</span> | ||
33 | - </li> | ||
34 | </ul> | 19 | </ul> |
35 | </div> | 20 | </div> |
36 | <div class="input-container"> | 21 | <div class="input-container"> |
... | @@ -41,7 +26,7 @@ | ... | @@ -41,7 +26,7 @@ |
41 | </div> | 26 | </div> |
42 | </div> | 27 | </div> |
43 | 28 | ||
44 | - <!-- <script src="/socket.io/socket.io.js"></script> | 29 | + <script src="/socket.io/socket.io.js"></script> |
45 | - <script src="js/chat.js"></script> --> | 30 | + <script src="js/chat.js"></script> |
46 | </body> | 31 | </body> |
47 | </html> | 32 | </html> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -5,18 +5,50 @@ const nickname = document.querySelector("#nickname") | ... | @@ -5,18 +5,50 @@ const nickname = document.querySelector("#nickname") |
5 | const chatlist = document.querySelector(".chatting-list") | 5 | const chatlist = document.querySelector(".chatting-list") |
6 | const chatInput = document.querySelector(".chatting-input") | 6 | const chatInput = document.querySelector(".chatting-input") |
7 | const sendButton = document.querySelector(".send-button") | 7 | const sendButton = document.querySelector(".send-button") |
8 | +const displayContainer = document.querySelector(".display-container") | ||
8 | 9 | ||
9 | -sendButton.addEventListener("click", ()=>{ | 10 | +chatInput.addEventListener("keypress", (event)=> { |
11 | + if(event.keyCode === 13) { | ||
12 | + send() | ||
13 | + } | ||
14 | +}) | ||
15 | + | ||
16 | +function send() { | ||
10 | const param = { | 17 | const param = { |
11 | name: nickname.value, | 18 | name: nickname.value, |
12 | msg: chatInput.value | 19 | msg: chatInput.value |
13 | } | 20 | } |
14 | socket.emit("chatting", param) | 21 | socket.emit("chatting", param) |
15 | -}); | 22 | +} |
23 | + | ||
24 | +sendButton.addEventListener("click", send) | ||
16 | 25 | ||
17 | socket.on("chatting", (data)=>{ | 26 | socket.on("chatting", (data)=>{ |
27 | + console.log(data) | ||
28 | + const {name, msg, time} = data; | ||
29 | + const item = new LiModel(name, msg, time); | ||
30 | + item.makeLi() | ||
31 | + displayContainer.scrollTo(0, displayContainer.scrollHeight) | ||
32 | +}) | ||
33 | + | ||
34 | +//console.log(socket); | ||
35 | + | ||
36 | +function LiModel(name, msg, time) { | ||
37 | + this.name = name; | ||
38 | + this.msg = msg; | ||
39 | + this.time = time; | ||
40 | + | ||
41 | + this.makeLi = ()=>{ | ||
18 | const li = document.createElement("li"); | 42 | const li = document.createElement("li"); |
19 | - li.innerText = `${data.name}님이 - ${data.msg}`; | 43 | + li.classList.add(nickname.value === this.name ? "sent":"received") |
44 | + const dom = `<span class="profile"> | ||
45 | + <span class="user">${this.name}</span> | ||
46 | + <img class="image" src="https://placeimg.com/50/50/any" alt="any"> | ||
47 | + </span> | ||
48 | + <span class="message">${this.msg}</span> | ||
49 | + <span class="time">${this.time}</span>`; | ||
50 | + | ||
51 | + li.innerHTML = dom; | ||
20 | chatlist.appendChild(li) | 52 | chatlist.appendChild(li) |
21 | -}) | ||
22 | -console.log(socket); | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
53 | + } | ||
54 | +} | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or login to post a comment