From 63cc990d65bb6df5cef636c8c2605c8643a4a004 Mon Sep 17 00:00:00 2001 From: JonahQian <157095689+JonahQian@users.noreply.github.com> Date: Fri, 7 Mar 2025 04:31:01 +0000 Subject: [PATCH] Live Chat Box Exercise --- week5/jonah_qian/index.html | 47 +++++++++++++++++++++++++++++++++++ week5/jonah_qian/index.js | 30 ++++++++++++++++++++++ week5/jonah_qian/package.json | 6 +++++ week5/jonah_qian/style.css | 10 ++++++++ 4 files changed, 93 insertions(+) create mode 100644 week5/jonah_qian/index.html create mode 100644 week5/jonah_qian/index.js create mode 100644 week5/jonah_qian/package.json create mode 100644 week5/jonah_qian/style.css diff --git a/week5/jonah_qian/index.html b/week5/jonah_qian/index.html new file mode 100644 index 00000000..a0b5815a --- /dev/null +++ b/week5/jonah_qian/index.html @@ -0,0 +1,47 @@ + + + + Socket.IO chat + + + + +
+ +
+ + + + diff --git a/week5/jonah_qian/index.js b/week5/jonah_qian/index.js new file mode 100644 index 00000000..10f93371 --- /dev/null +++ b/week5/jonah_qian/index.js @@ -0,0 +1,30 @@ +const express = require('express'); +const app = express(); +const http = require('http'); +const server = http.createServer(app); +const { Server } = require("socket.io"); +const io = new Server(server); + +app.get('/', (req, res) => { + res.sendFile(__dirname + '/index.html'); +}); + +io.on('connection', (socket) => { + console.log('a user connected'); +}); + +io.on('connection', (socket) => { + socket.on('chat message', (msg) => { + console.log('message: ' + msg); + }); +}); + +io.on('connection', (socket) => { + socket.on('chat message', (msg) => { + io.emit('chat message', msg); + }); +}); + +server.listen(3000, () => { + console.log('listening on *:3000'); +}); diff --git a/week5/jonah_qian/package.json b/week5/jonah_qian/package.json new file mode 100644 index 00000000..3b17082d --- /dev/null +++ b/week5/jonah_qian/package.json @@ -0,0 +1,6 @@ +{ + "name": "socket-chat-example", + "version": "0.0.1", + "description": "my first socket.io app", + "dependencies": {} +} diff --git a/week5/jonah_qian/style.css b/week5/jonah_qian/style.css new file mode 100644 index 00000000..4a95fe7a --- /dev/null +++ b/week5/jonah_qian/style.css @@ -0,0 +1,10 @@ +#grad { + background-image: linear-gradient(rgb(247, 202, 201), rgb(255, 193, 150)); +} +body { + text-align: center; + font-family: 'Times New Roman'; + font-weight: bold; + background-image: linear-gradient(rgb(247, 202, 201), rgb(146, 168, 209)); + color: brown; +}