Jeongmin Seo / favorite_restaurant

Go to a project
Toggle navigation Toggle navigation pinning
Jumi Yang
46edde80 1 parent 67f92772

Update chatting feature

Expand all
Inline Side-by-side
Showing 6 changed files with 65 additions and 35 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
......
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)=>{
18 - const li = document.createElement("li"); 27 + console.log(data)
19 - li.innerText = `${data.name}님이 - ${data.msg}`; 28 + const {name, msg, time} = data;
20 - chatlist.appendChild(li) 29 + const item = new LiModel(name, msg, time);
30 + item.makeLi()
31 + displayContainer.scrollTo(0, displayContainer.scrollHeight)
21 }) 32 })
22 -console.log(socket);
...\ No newline at end of file ...\ No newline at end of file
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 = ()=>{
42 + const li = document.createElement("li");
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;
52 + chatlist.appendChild(li)
53 + }
54 +}
...\ No newline at end of file ...\ No newline at end of file
......