Jeongmin Seo / favorite_restaurant

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

Update chatting feature

Inline Side-by-side
Showing 6 changed files with 1227 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
......
1 +{
2 + "name": "chat",
3 + "version": "1.0.0",
4 + "lockfileVersion": 2,
5 + "requires": true,
6 + "packages": {
7 + "": {
8 + "name": "chat",
9 + "version": "1.0.0",
10 + "license": "ISC",
11 + "dependencies": {
12 + "dayjs": "^1.11.2",
13 + "express": "^4.18.1",
14 + "moment": "^2.29.3",
15 + "socket.io": "^4.5.1"
16 + }
17 + },
18 + "node_modules/@types/component-emitter": {
19 + "version": "1.2.11",
20 + "license": "MIT"
21 + },
22 + "node_modules/@types/cookie": {
23 + "version": "0.4.1",
24 + "license": "MIT"
25 + },
26 + "node_modules/@types/cors": {
27 + "version": "2.8.12",
28 + "license": "MIT"
29 + },
30 + "node_modules/@types/node": {
31 + "version": "17.0.39",
32 + "license": "MIT"
33 + },
34 + "node_modules/accepts": {
35 + "version": "1.3.8",
36 + "license": "MIT",
37 + "dependencies": {
38 + "mime-types": "~2.1.34",
39 + "negotiator": "0.6.3"
40 + },
41 + "engines": {
42 + "node": ">= 0.6"
43 + }
44 + },
45 + "node_modules/array-flatten": {
46 + "version": "1.1.1",
47 + "license": "MIT"
48 + },
49 + "node_modules/base64id": {
50 + "version": "2.0.0",
51 + "license": "MIT",
52 + "engines": {
53 + "node": "^4.5.0 || >= 5.9"
54 + }
55 + },
56 + "node_modules/body-parser": {
57 + "version": "1.20.0",
58 + "license": "MIT",
59 + "dependencies": {
60 + "bytes": "3.1.2",
61 + "content-type": "~1.0.4",
62 + "debug": "2.6.9",
63 + "depd": "2.0.0",
64 + "destroy": "1.2.0",
65 + "http-errors": "2.0.0",
66 + "iconv-lite": "0.4.24",
67 + "on-finished": "2.4.1",
68 + "qs": "6.10.3",
69 + "raw-body": "2.5.1",
70 + "type-is": "~1.6.18",
71 + "unpipe": "1.0.0"
72 + },
73 + "engines": {
74 + "node": ">= 0.8",
75 + "npm": "1.2.8000 || >= 1.4.16"
76 + }
77 + },
78 + "node_modules/bytes": {
79 + "version": "3.1.2",
80 + "license": "MIT",
81 + "engines": {
82 + "node": ">= 0.8"
83 + }
84 + },
85 + "node_modules/call-bind": {
86 + "version": "1.0.2",
87 + "license": "MIT",
88 + "dependencies": {
89 + "function-bind": "^1.1.1",
90 + "get-intrinsic": "^1.0.2"
91 + },
92 + "funding": {
93 + "url": "https://github.com/sponsors/ljharb"
94 + }
95 + },
96 + "node_modules/component-emitter": {
97 + "version": "1.3.0",
98 + "license": "MIT"
99 + },
100 + "node_modules/content-disposition": {
101 + "version": "0.5.4",
102 + "license": "MIT",
103 + "dependencies": {
104 + "safe-buffer": "5.2.1"
105 + },
106 + "engines": {
107 + "node": ">= 0.6"
108 + }
109 + },
110 + "node_modules/content-type": {
111 + "version": "1.0.4",
112 + "license": "MIT",
113 + "engines": {
114 + "node": ">= 0.6"
115 + }
116 + },
117 + "node_modules/cookie": {
118 + "version": "0.5.0",
119 + "license": "MIT",
120 + "engines": {
121 + "node": ">= 0.6"
122 + }
123 + },
124 + "node_modules/cookie-signature": {
125 + "version": "1.0.6",
126 + "license": "MIT"
127 + },
128 + "node_modules/cors": {
129 + "version": "2.8.5",
130 + "license": "MIT",
131 + "dependencies": {
132 + "object-assign": "^4",
133 + "vary": "^1"
134 + },
135 + "engines": {
136 + "node": ">= 0.10"
137 + }
138 + },
139 + "node_modules/dayjs": {
140 + "version": "1.11.2",
141 + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
142 + "integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
143 + },
144 + "node_modules/debug": {
145 + "version": "2.6.9",
146 + "license": "MIT",
147 + "dependencies": {
148 + "ms": "2.0.0"
149 + }
150 + },
151 + "node_modules/depd": {
152 + "version": "2.0.0",
153 + "license": "MIT",
154 + "engines": {
155 + "node": ">= 0.8"
156 + }
157 + },
158 + "node_modules/destroy": {
159 + "version": "1.2.0",
160 + "license": "MIT",
161 + "engines": {
162 + "node": ">= 0.8",
163 + "npm": "1.2.8000 || >= 1.4.16"
164 + }
165 + },
166 + "node_modules/ee-first": {
167 + "version": "1.1.1",
168 + "license": "MIT"
169 + },
170 + "node_modules/encodeurl": {
171 + "version": "1.0.2",
172 + "license": "MIT",
173 + "engines": {
174 + "node": ">= 0.8"
175 + }
176 + },
177 + "node_modules/engine.io": {
178 + "version": "6.2.0",
179 + "license": "MIT",
180 + "dependencies": {
181 + "@types/cookie": "^0.4.1",
182 + "@types/cors": "^2.8.12",
183 + "@types/node": ">=10.0.0",
184 + "accepts": "~1.3.4",
185 + "base64id": "2.0.0",
186 + "cookie": "~0.4.1",
187 + "cors": "~2.8.5",
188 + "debug": "~4.3.1",
189 + "engine.io-parser": "~5.0.3",
190 + "ws": "~8.2.3"
191 + },
192 + "engines": {
193 + "node": ">=10.0.0"
194 + }
195 + },
196 + "node_modules/engine.io-parser": {
197 + "version": "5.0.4",
198 + "license": "MIT",
199 + "engines": {
200 + "node": ">=10.0.0"
201 + }
202 + },
203 + "node_modules/engine.io/node_modules/cookie": {
204 + "version": "0.4.2",
205 + "license": "MIT",
206 + "engines": {
207 + "node": ">= 0.6"
208 + }
209 + },
210 + "node_modules/engine.io/node_modules/debug": {
211 + "version": "4.3.4",
212 + "license": "MIT",
213 + "dependencies": {
214 + "ms": "2.1.2"
215 + },
216 + "engines": {
217 + "node": ">=6.0"
218 + },
219 + "peerDependenciesMeta": {
220 + "supports-color": {
221 + "optional": true
222 + }
223 + }
224 + },
225 + "node_modules/engine.io/node_modules/ms": {
226 + "version": "2.1.2",
227 + "license": "MIT"
228 + },
229 + "node_modules/escape-html": {
230 + "version": "1.0.3",
231 + "license": "MIT"
232 + },
233 + "node_modules/etag": {
234 + "version": "1.8.1",
235 + "license": "MIT",
236 + "engines": {
237 + "node": ">= 0.6"
238 + }
239 + },
240 + "node_modules/express": {
241 + "version": "4.18.1",
242 + "license": "MIT",
243 + "dependencies": {
244 + "accepts": "~1.3.8",
245 + "array-flatten": "1.1.1",
246 + "body-parser": "1.20.0",
247 + "content-disposition": "0.5.4",
248 + "content-type": "~1.0.4",
249 + "cookie": "0.5.0",
250 + "cookie-signature": "1.0.6",
251 + "debug": "2.6.9",
252 + "depd": "2.0.0",
253 + "encodeurl": "~1.0.2",
254 + "escape-html": "~1.0.3",
255 + "etag": "~1.8.1",
256 + "finalhandler": "1.2.0",
257 + "fresh": "0.5.2",
258 + "http-errors": "2.0.0",
259 + "merge-descriptors": "1.0.1",
260 + "methods": "~1.1.2",
261 + "on-finished": "2.4.1",
262 + "parseurl": "~1.3.3",
263 + "path-to-regexp": "0.1.7",
264 + "proxy-addr": "~2.0.7",
265 + "qs": "6.10.3",
266 + "range-parser": "~1.2.1",
267 + "safe-buffer": "5.2.1",
268 + "send": "0.18.0",
269 + "serve-static": "1.15.0",
270 + "setprototypeof": "1.2.0",
271 + "statuses": "2.0.1",
272 + "type-is": "~1.6.18",
273 + "utils-merge": "1.0.1",
274 + "vary": "~1.1.2"
275 + },
276 + "engines": {
277 + "node": ">= 0.10.0"
278 + }
279 + },
280 + "node_modules/finalhandler": {
281 + "version": "1.2.0",
282 + "license": "MIT",
283 + "dependencies": {
284 + "debug": "2.6.9",
285 + "encodeurl": "~1.0.2",
286 + "escape-html": "~1.0.3",
287 + "on-finished": "2.4.1",
288 + "parseurl": "~1.3.3",
289 + "statuses": "2.0.1",
290 + "unpipe": "~1.0.0"
291 + },
292 + "engines": {
293 + "node": ">= 0.8"
294 + }
295 + },
296 + "node_modules/forwarded": {
297 + "version": "0.2.0",
298 + "license": "MIT",
299 + "engines": {
300 + "node": ">= 0.6"
301 + }
302 + },
303 + "node_modules/fresh": {
304 + "version": "0.5.2",
305 + "license": "MIT",
306 + "engines": {
307 + "node": ">= 0.6"
308 + }
309 + },
310 + "node_modules/function-bind": {
311 + "version": "1.1.1",
312 + "license": "MIT"
313 + },
314 + "node_modules/get-intrinsic": {
315 + "version": "1.1.1",
316 + "license": "MIT",
317 + "dependencies": {
318 + "function-bind": "^1.1.1",
319 + "has": "^1.0.3",
320 + "has-symbols": "^1.0.1"
321 + },
322 + "funding": {
323 + "url": "https://github.com/sponsors/ljharb"
324 + }
325 + },
326 + "node_modules/has": {
327 + "version": "1.0.3",
328 + "license": "MIT",
329 + "dependencies": {
330 + "function-bind": "^1.1.1"
331 + },
332 + "engines": {
333 + "node": ">= 0.4.0"
334 + }
335 + },
336 + "node_modules/has-symbols": {
337 + "version": "1.0.3",
338 + "license": "MIT",
339 + "engines": {
340 + "node": ">= 0.4"
341 + },
342 + "funding": {
343 + "url": "https://github.com/sponsors/ljharb"
344 + }
345 + },
346 + "node_modules/http-errors": {
347 + "version": "2.0.0",
348 + "license": "MIT",
349 + "dependencies": {
350 + "depd": "2.0.0",
351 + "inherits": "2.0.4",
352 + "setprototypeof": "1.2.0",
353 + "statuses": "2.0.1",
354 + "toidentifier": "1.0.1"
355 + },
356 + "engines": {
357 + "node": ">= 0.8"
358 + }
359 + },
360 + "node_modules/iconv-lite": {
361 + "version": "0.4.24",
362 + "license": "MIT",
363 + "dependencies": {
364 + "safer-buffer": ">= 2.1.2 < 3"
365 + },
366 + "engines": {
367 + "node": ">=0.10.0"
368 + }
369 + },
370 + "node_modules/inherits": {
371 + "version": "2.0.4",
372 + "license": "ISC"
373 + },
374 + "node_modules/ipaddr.js": {
375 + "version": "1.9.1",
376 + "license": "MIT",
377 + "engines": {
378 + "node": ">= 0.10"
379 + }
380 + },
381 + "node_modules/media-typer": {
382 + "version": "0.3.0",
383 + "license": "MIT",
384 + "engines": {
385 + "node": ">= 0.6"
386 + }
387 + },
388 + "node_modules/merge-descriptors": {
389 + "version": "1.0.1",
390 + "license": "MIT"
391 + },
392 + "node_modules/methods": {
393 + "version": "1.1.2",
394 + "license": "MIT",
395 + "engines": {
396 + "node": ">= 0.6"
397 + }
398 + },
399 + "node_modules/mime": {
400 + "version": "1.6.0",
401 + "license": "MIT",
402 + "bin": {
403 + "mime": "cli.js"
404 + },
405 + "engines": {
406 + "node": ">=4"
407 + }
408 + },
409 + "node_modules/mime-db": {
410 + "version": "1.52.0",
411 + "license": "MIT",
412 + "engines": {
413 + "node": ">= 0.6"
414 + }
415 + },
416 + "node_modules/mime-types": {
417 + "version": "2.1.35",
418 + "license": "MIT",
419 + "dependencies": {
420 + "mime-db": "1.52.0"
421 + },
422 + "engines": {
423 + "node": ">= 0.6"
424 + }
425 + },
426 + "node_modules/moment": {
427 + "version": "2.29.3",
428 + "license": "MIT",
429 + "engines": {
430 + "node": "*"
431 + }
432 + },
433 + "node_modules/ms": {
434 + "version": "2.0.0",
435 + "license": "MIT"
436 + },
437 + "node_modules/negotiator": {
438 + "version": "0.6.3",
439 + "license": "MIT",
440 + "engines": {
441 + "node": ">= 0.6"
442 + }
443 + },
444 + "node_modules/object-assign": {
445 + "version": "4.1.1",
446 + "license": "MIT",
447 + "engines": {
448 + "node": ">=0.10.0"
449 + }
450 + },
451 + "node_modules/object-inspect": {
452 + "version": "1.12.2",
453 + "license": "MIT",
454 + "funding": {
455 + "url": "https://github.com/sponsors/ljharb"
456 + }
457 + },
458 + "node_modules/on-finished": {
459 + "version": "2.4.1",
460 + "license": "MIT",
461 + "dependencies": {
462 + "ee-first": "1.1.1"
463 + },
464 + "engines": {
465 + "node": ">= 0.8"
466 + }
467 + },
468 + "node_modules/parseurl": {
469 + "version": "1.3.3",
470 + "license": "MIT",
471 + "engines": {
472 + "node": ">= 0.8"
473 + }
474 + },
475 + "node_modules/path-to-regexp": {
476 + "version": "0.1.7",
477 + "license": "MIT"
478 + },
479 + "node_modules/proxy-addr": {
480 + "version": "2.0.7",
481 + "license": "MIT",
482 + "dependencies": {
483 + "forwarded": "0.2.0",
484 + "ipaddr.js": "1.9.1"
485 + },
486 + "engines": {
487 + "node": ">= 0.10"
488 + }
489 + },
490 + "node_modules/qs": {
491 + "version": "6.10.3",
492 + "license": "BSD-3-Clause",
493 + "dependencies": {
494 + "side-channel": "^1.0.4"
495 + },
496 + "engines": {
497 + "node": ">=0.6"
498 + },
499 + "funding": {
500 + "url": "https://github.com/sponsors/ljharb"
501 + }
502 + },
503 + "node_modules/range-parser": {
504 + "version": "1.2.1",
505 + "license": "MIT",
506 + "engines": {
507 + "node": ">= 0.6"
508 + }
509 + },
510 + "node_modules/raw-body": {
511 + "version": "2.5.1",
512 + "license": "MIT",
513 + "dependencies": {
514 + "bytes": "3.1.2",
515 + "http-errors": "2.0.0",
516 + "iconv-lite": "0.4.24",
517 + "unpipe": "1.0.0"
518 + },
519 + "engines": {
520 + "node": ">= 0.8"
521 + }
522 + },
523 + "node_modules/safe-buffer": {
524 + "version": "5.2.1",
525 + "funding": [
526 + {
527 + "type": "github",
528 + "url": "https://github.com/sponsors/feross"
529 + },
530 + {
531 + "type": "patreon",
532 + "url": "https://www.patreon.com/feross"
533 + },
534 + {
535 + "type": "consulting",
536 + "url": "https://feross.org/support"
537 + }
538 + ],
539 + "license": "MIT"
540 + },
541 + "node_modules/safer-buffer": {
542 + "version": "2.1.2",
543 + "license": "MIT"
544 + },
545 + "node_modules/send": {
546 + "version": "0.18.0",
547 + "license": "MIT",
548 + "dependencies": {
549 + "debug": "2.6.9",
550 + "depd": "2.0.0",
551 + "destroy": "1.2.0",
552 + "encodeurl": "~1.0.2",
553 + "escape-html": "~1.0.3",
554 + "etag": "~1.8.1",
555 + "fresh": "0.5.2",
556 + "http-errors": "2.0.0",
557 + "mime": "1.6.0",
558 + "ms": "2.1.3",
559 + "on-finished": "2.4.1",
560 + "range-parser": "~1.2.1",
561 + "statuses": "2.0.1"
562 + },
563 + "engines": {
564 + "node": ">= 0.8.0"
565 + }
566 + },
567 + "node_modules/send/node_modules/ms": {
568 + "version": "2.1.3",
569 + "license": "MIT"
570 + },
571 + "node_modules/serve-static": {
572 + "version": "1.15.0",
573 + "license": "MIT",
574 + "dependencies": {
575 + "encodeurl": "~1.0.2",
576 + "escape-html": "~1.0.3",
577 + "parseurl": "~1.3.3",
578 + "send": "0.18.0"
579 + },
580 + "engines": {
581 + "node": ">= 0.8.0"
582 + }
583 + },
584 + "node_modules/setprototypeof": {
585 + "version": "1.2.0",
586 + "license": "ISC"
587 + },
588 + "node_modules/side-channel": {
589 + "version": "1.0.4",
590 + "license": "MIT",
591 + "dependencies": {
592 + "call-bind": "^1.0.0",
593 + "get-intrinsic": "^1.0.2",
594 + "object-inspect": "^1.9.0"
595 + },
596 + "funding": {
597 + "url": "https://github.com/sponsors/ljharb"
598 + }
599 + },
600 + "node_modules/socket.io": {
601 + "version": "4.5.1",
602 + "license": "MIT",
603 + "dependencies": {
604 + "accepts": "~1.3.4",
605 + "base64id": "~2.0.0",
606 + "debug": "~4.3.2",
607 + "engine.io": "~6.2.0",
608 + "socket.io-adapter": "~2.4.0",
609 + "socket.io-parser": "~4.0.4"
610 + },
611 + "engines": {
612 + "node": ">=10.0.0"
613 + }
614 + },
615 + "node_modules/socket.io-adapter": {
616 + "version": "2.4.0",
617 + "license": "MIT"
618 + },
619 + "node_modules/socket.io-parser": {
620 + "version": "4.0.4",
621 + "license": "MIT",
622 + "dependencies": {
623 + "@types/component-emitter": "^1.2.10",
624 + "component-emitter": "~1.3.0",
625 + "debug": "~4.3.1"
626 + },
627 + "engines": {
628 + "node": ">=10.0.0"
629 + }
630 + },
631 + "node_modules/socket.io-parser/node_modules/debug": {
632 + "version": "4.3.4",
633 + "license": "MIT",
634 + "dependencies": {
635 + "ms": "2.1.2"
636 + },
637 + "engines": {
638 + "node": ">=6.0"
639 + },
640 + "peerDependenciesMeta": {
641 + "supports-color": {
642 + "optional": true
643 + }
644 + }
645 + },
646 + "node_modules/socket.io-parser/node_modules/ms": {
647 + "version": "2.1.2",
648 + "license": "MIT"
649 + },
650 + "node_modules/socket.io/node_modules/debug": {
651 + "version": "4.3.4",
652 + "license": "MIT",
653 + "dependencies": {
654 + "ms": "2.1.2"
655 + },
656 + "engines": {
657 + "node": ">=6.0"
658 + },
659 + "peerDependenciesMeta": {
660 + "supports-color": {
661 + "optional": true
662 + }
663 + }
664 + },
665 + "node_modules/socket.io/node_modules/ms": {
666 + "version": "2.1.2",
667 + "license": "MIT"
668 + },
669 + "node_modules/statuses": {
670 + "version": "2.0.1",
671 + "license": "MIT",
672 + "engines": {
673 + "node": ">= 0.8"
674 + }
675 + },
676 + "node_modules/toidentifier": {
677 + "version": "1.0.1",
678 + "license": "MIT",
679 + "engines": {
680 + "node": ">=0.6"
681 + }
682 + },
683 + "node_modules/type-is": {
684 + "version": "1.6.18",
685 + "license": "MIT",
686 + "dependencies": {
687 + "media-typer": "0.3.0",
688 + "mime-types": "~2.1.24"
689 + },
690 + "engines": {
691 + "node": ">= 0.6"
692 + }
693 + },
694 + "node_modules/unpipe": {
695 + "version": "1.0.0",
696 + "license": "MIT",
697 + "engines": {
698 + "node": ">= 0.8"
699 + }
700 + },
701 + "node_modules/utils-merge": {
702 + "version": "1.0.1",
703 + "license": "MIT",
704 + "engines": {
705 + "node": ">= 0.4.0"
706 + }
707 + },
708 + "node_modules/vary": {
709 + "version": "1.1.2",
710 + "license": "MIT",
711 + "engines": {
712 + "node": ">= 0.8"
713 + }
714 + },
715 + "node_modules/ws": {
716 + "version": "8.2.3",
717 + "license": "MIT",
718 + "engines": {
719 + "node": ">=10.0.0"
720 + },
721 + "peerDependencies": {
722 + "bufferutil": "^4.0.1",
723 + "utf-8-validate": "^5.0.2"
724 + },
725 + "peerDependenciesMeta": {
726 + "bufferutil": {
727 + "optional": true
728 + },
729 + "utf-8-validate": {
730 + "optional": true
731 + }
732 + }
733 + }
734 + },
735 + "dependencies": {
736 + "@types/component-emitter": {
737 + "version": "1.2.11"
738 + },
739 + "@types/cookie": {
740 + "version": "0.4.1"
741 + },
742 + "@types/cors": {
743 + "version": "2.8.12"
744 + },
745 + "@types/node": {
746 + "version": "17.0.39"
747 + },
748 + "accepts": {
749 + "version": "1.3.8",
750 + "requires": {
751 + "mime-types": "~2.1.34",
752 + "negotiator": "0.6.3"
753 + }
754 + },
755 + "array-flatten": {
756 + "version": "1.1.1"
757 + },
758 + "base64id": {
759 + "version": "2.0.0"
760 + },
761 + "body-parser": {
762 + "version": "1.20.0",
763 + "requires": {
764 + "bytes": "3.1.2",
765 + "content-type": "~1.0.4",
766 + "debug": "2.6.9",
767 + "depd": "2.0.0",
768 + "destroy": "1.2.0",
769 + "http-errors": "2.0.0",
770 + "iconv-lite": "0.4.24",
771 + "on-finished": "2.4.1",
772 + "qs": "6.10.3",
773 + "raw-body": "2.5.1",
774 + "type-is": "~1.6.18",
775 + "unpipe": "1.0.0"
776 + }
777 + },
778 + "bytes": {
779 + "version": "3.1.2"
780 + },
781 + "call-bind": {
782 + "version": "1.0.2",
783 + "requires": {
784 + "function-bind": "^1.1.1",
785 + "get-intrinsic": "^1.0.2"
786 + }
787 + },
788 + "component-emitter": {
789 + "version": "1.3.0"
790 + },
791 + "content-disposition": {
792 + "version": "0.5.4",
793 + "requires": {
794 + "safe-buffer": "5.2.1"
795 + }
796 + },
797 + "content-type": {
798 + "version": "1.0.4"
799 + },
800 + "cookie": {
801 + "version": "0.5.0"
802 + },
803 + "cookie-signature": {
804 + "version": "1.0.6"
805 + },
806 + "cors": {
807 + "version": "2.8.5",
808 + "requires": {
809 + "object-assign": "^4",
810 + "vary": "^1"
811 + }
812 + },
813 + "dayjs": {
814 + "version": "1.11.2",
815 + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
816 + "integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
817 + },
818 + "debug": {
819 + "version": "2.6.9",
820 + "requires": {
821 + "ms": "2.0.0"
822 + }
823 + },
824 + "depd": {
825 + "version": "2.0.0"
826 + },
827 + "destroy": {
828 + "version": "1.2.0"
829 + },
830 + "ee-first": {
831 + "version": "1.1.1"
832 + },
833 + "encodeurl": {
834 + "version": "1.0.2"
835 + },
836 + "engine.io": {
837 + "version": "6.2.0",
838 + "requires": {
839 + "@types/cookie": "^0.4.1",
840 + "@types/cors": "^2.8.12",
841 + "@types/node": ">=10.0.0",
842 + "accepts": "~1.3.4",
843 + "base64id": "2.0.0",
844 + "cookie": "~0.4.1",
845 + "cors": "~2.8.5",
846 + "debug": "~4.3.1",
847 + "engine.io-parser": "~5.0.3",
848 + "ws": "~8.2.3"
849 + },
850 + "dependencies": {
851 + "cookie": {
852 + "version": "0.4.2"
853 + },
854 + "debug": {
855 + "version": "4.3.4",
856 + "requires": {
857 + "ms": "2.1.2"
858 + }
859 + },
860 + "ms": {
861 + "version": "2.1.2"
862 + }
863 + }
864 + },
865 + "engine.io-parser": {
866 + "version": "5.0.4"
867 + },
868 + "escape-html": {
869 + "version": "1.0.3"
870 + },
871 + "etag": {
872 + "version": "1.8.1"
873 + },
874 + "express": {
875 + "version": "4.18.1",
876 + "requires": {
877 + "accepts": "~1.3.8",
878 + "array-flatten": "1.1.1",
879 + "body-parser": "1.20.0",
880 + "content-disposition": "0.5.4",
881 + "content-type": "~1.0.4",
882 + "cookie": "0.5.0",
883 + "cookie-signature": "1.0.6",
884 + "debug": "2.6.9",
885 + "depd": "2.0.0",
886 + "encodeurl": "~1.0.2",
887 + "escape-html": "~1.0.3",
888 + "etag": "~1.8.1",
889 + "finalhandler": "1.2.0",
890 + "fresh": "0.5.2",
891 + "http-errors": "2.0.0",
892 + "merge-descriptors": "1.0.1",
893 + "methods": "~1.1.2",
894 + "on-finished": "2.4.1",
895 + "parseurl": "~1.3.3",
896 + "path-to-regexp": "0.1.7",
897 + "proxy-addr": "~2.0.7",
898 + "qs": "6.10.3",
899 + "range-parser": "~1.2.1",
900 + "safe-buffer": "5.2.1",
901 + "send": "0.18.0",
902 + "serve-static": "1.15.0",
903 + "setprototypeof": "1.2.0",
904 + "statuses": "2.0.1",
905 + "type-is": "~1.6.18",
906 + "utils-merge": "1.0.1",
907 + "vary": "~1.1.2"
908 + }
909 + },
910 + "finalhandler": {
911 + "version": "1.2.0",
912 + "requires": {
913 + "debug": "2.6.9",
914 + "encodeurl": "~1.0.2",
915 + "escape-html": "~1.0.3",
916 + "on-finished": "2.4.1",
917 + "parseurl": "~1.3.3",
918 + "statuses": "2.0.1",
919 + "unpipe": "~1.0.0"
920 + }
921 + },
922 + "forwarded": {
923 + "version": "0.2.0"
924 + },
925 + "fresh": {
926 + "version": "0.5.2"
927 + },
928 + "function-bind": {
929 + "version": "1.1.1"
930 + },
931 + "get-intrinsic": {
932 + "version": "1.1.1",
933 + "requires": {
934 + "function-bind": "^1.1.1",
935 + "has": "^1.0.3",
936 + "has-symbols": "^1.0.1"
937 + }
938 + },
939 + "has": {
940 + "version": "1.0.3",
941 + "requires": {
942 + "function-bind": "^1.1.1"
943 + }
944 + },
945 + "has-symbols": {
946 + "version": "1.0.3"
947 + },
948 + "http-errors": {
949 + "version": "2.0.0",
950 + "requires": {
951 + "depd": "2.0.0",
952 + "inherits": "2.0.4",
953 + "setprototypeof": "1.2.0",
954 + "statuses": "2.0.1",
955 + "toidentifier": "1.0.1"
956 + }
957 + },
958 + "iconv-lite": {
959 + "version": "0.4.24",
960 + "requires": {
961 + "safer-buffer": ">= 2.1.2 < 3"
962 + }
963 + },
964 + "inherits": {
965 + "version": "2.0.4"
966 + },
967 + "ipaddr.js": {
968 + "version": "1.9.1"
969 + },
970 + "media-typer": {
971 + "version": "0.3.0"
972 + },
973 + "merge-descriptors": {
974 + "version": "1.0.1"
975 + },
976 + "methods": {
977 + "version": "1.1.2"
978 + },
979 + "mime": {
980 + "version": "1.6.0"
981 + },
982 + "mime-db": {
983 + "version": "1.52.0"
984 + },
985 + "mime-types": {
986 + "version": "2.1.35",
987 + "requires": {
988 + "mime-db": "1.52.0"
989 + }
990 + },
991 + "moment": {
992 + "version": "2.29.3"
993 + },
994 + "ms": {
995 + "version": "2.0.0"
996 + },
997 + "negotiator": {
998 + "version": "0.6.3"
999 + },
1000 + "object-assign": {
1001 + "version": "4.1.1"
1002 + },
1003 + "object-inspect": {
1004 + "version": "1.12.2"
1005 + },
1006 + "on-finished": {
1007 + "version": "2.4.1",
1008 + "requires": {
1009 + "ee-first": "1.1.1"
1010 + }
1011 + },
1012 + "parseurl": {
1013 + "version": "1.3.3"
1014 + },
1015 + "path-to-regexp": {
1016 + "version": "0.1.7"
1017 + },
1018 + "proxy-addr": {
1019 + "version": "2.0.7",
1020 + "requires": {
1021 + "forwarded": "0.2.0",
1022 + "ipaddr.js": "1.9.1"
1023 + }
1024 + },
1025 + "qs": {
1026 + "version": "6.10.3",
1027 + "requires": {
1028 + "side-channel": "^1.0.4"
1029 + }
1030 + },
1031 + "range-parser": {
1032 + "version": "1.2.1"
1033 + },
1034 + "raw-body": {
1035 + "version": "2.5.1",
1036 + "requires": {
1037 + "bytes": "3.1.2",
1038 + "http-errors": "2.0.0",
1039 + "iconv-lite": "0.4.24",
1040 + "unpipe": "1.0.0"
1041 + }
1042 + },
1043 + "safe-buffer": {
1044 + "version": "5.2.1"
1045 + },
1046 + "safer-buffer": {
1047 + "version": "2.1.2"
1048 + },
1049 + "send": {
1050 + "version": "0.18.0",
1051 + "requires": {
1052 + "debug": "2.6.9",
1053 + "depd": "2.0.0",
1054 + "destroy": "1.2.0",
1055 + "encodeurl": "~1.0.2",
1056 + "escape-html": "~1.0.3",
1057 + "etag": "~1.8.1",
1058 + "fresh": "0.5.2",
1059 + "http-errors": "2.0.0",
1060 + "mime": "1.6.0",
1061 + "ms": "2.1.3",
1062 + "on-finished": "2.4.1",
1063 + "range-parser": "~1.2.1",
1064 + "statuses": "2.0.1"
1065 + },
1066 + "dependencies": {
1067 + "ms": {
1068 + "version": "2.1.3"
1069 + }
1070 + }
1071 + },
1072 + "serve-static": {
1073 + "version": "1.15.0",
1074 + "requires": {
1075 + "encodeurl": "~1.0.2",
1076 + "escape-html": "~1.0.3",
1077 + "parseurl": "~1.3.3",
1078 + "send": "0.18.0"
1079 + }
1080 + },
1081 + "setprototypeof": {
1082 + "version": "1.2.0"
1083 + },
1084 + "side-channel": {
1085 + "version": "1.0.4",
1086 + "requires": {
1087 + "call-bind": "^1.0.0",
1088 + "get-intrinsic": "^1.0.2",
1089 + "object-inspect": "^1.9.0"
1090 + }
1091 + },
1092 + "socket.io": {
1093 + "version": "4.5.1",
1094 + "requires": {
1095 + "accepts": "~1.3.4",
1096 + "base64id": "~2.0.0",
1097 + "debug": "~4.3.2",
1098 + "engine.io": "~6.2.0",
1099 + "socket.io-adapter": "~2.4.0",
1100 + "socket.io-parser": "~4.0.4"
1101 + },
1102 + "dependencies": {
1103 + "debug": {
1104 + "version": "4.3.4",
1105 + "requires": {
1106 + "ms": "2.1.2"
1107 + }
1108 + },
1109 + "ms": {
1110 + "version": "2.1.2"
1111 + }
1112 + }
1113 + },
1114 + "socket.io-adapter": {
1115 + "version": "2.4.0"
1116 + },
1117 + "socket.io-parser": {
1118 + "version": "4.0.4",
1119 + "requires": {
1120 + "@types/component-emitter": "^1.2.10",
1121 + "component-emitter": "~1.3.0",
1122 + "debug": "~4.3.1"
1123 + },
1124 + "dependencies": {
1125 + "debug": {
1126 + "version": "4.3.4",
1127 + "requires": {
1128 + "ms": "2.1.2"
1129 + }
1130 + },
1131 + "ms": {
1132 + "version": "2.1.2"
1133 + }
1134 + }
1135 + },
1136 + "statuses": {
1137 + "version": "2.0.1"
1138 + },
1139 + "toidentifier": {
1140 + "version": "1.0.1"
1141 + },
1142 + "type-is": {
1143 + "version": "1.6.18",
1144 + "requires": {
1145 + "media-typer": "0.3.0",
1146 + "mime-types": "~2.1.24"
1147 + }
1148 + },
1149 + "unpipe": {
1150 + "version": "1.0.0"
1151 + },
1152 + "utils-merge": {
1153 + "version": "1.0.1"
1154 + },
1155 + "vary": {
1156 + "version": "1.1.2"
1157 + },
1158 + "ws": {
1159 + "version": "8.2.3",
1160 + "requires": {}
1161 + }
1162 + }
1163 +}
...@@ -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
......