first commit

F-star · Jan 24, 2023 · 6d95ee8 · 6d95ee8
commit 6d95ee8
Show file tree

Hide file tree

Showing 8 changed files with 4,911 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,25 @@
+node_modules/# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+build
+
+# dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
@@ -0,0 +1,24 @@
+
+WebSocket demo
+
+## 安装
+
+```sh
+yarn
+```
+
+## 比较原生的实现
+
+```sh
+node plain/server.js
+```
+
+访问 http://localhost:5050/
+
+## 使用 WebSocket.IO 的实现
+
+```sh
+node socket_io/server.js
+```
+
+访问 http://localhost:5050/
diff --git a/package.json b/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "websocket-chat-demo",
+  "version": "0.0.1",
+  "main": "index.js",
+  "author": "xigua",
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "socket.io": "^4.5.4",
+    "ws": "^8.12.0"
+  }
+}
diff --git a/plain/index.html b/plain/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>原生 websocket 实现</title>
+</head>
+<body>
+  <input type="text">
+  <button>发送</button>
+  <script>
+    const ws = new WebSocket('ws://localhost:6060');
+
+    ws.addEventListener('message', (event) => {
+      const div = document.createElement('div');
+      div.innerText = event.data;
+      document.body.append(div);
+    })
+
+    // 点击发送按钮，将输入框中的内容发送给服务器
+    const input = document.querySelector('input')
+    const btn = document.querySelector('button');
+    btn.onclick = () => {
+      ws.send(input.value);
+      input.value = '';
+    }
+  </script>
+</body>
+</html>
diff --git a/plain/server.js b/plain/server.js
@@ -0,0 +1,40 @@
+import { WebSocketServer } from "ws";
+import http from "http";
+import { readFileSync } from "fs";
+
+// 创建一个 ws 服务
+const wsSever = new WebSocketServer({
+  port: 6060,
+});
+
+// 每当一个客户端进行了 ws 连接，就会创建一个 ws 对象
+wsSever.on("connection", (ws) => {
+  // 新客户端连接时，广播
+  wsSever.clients.forEach((client) => {
+    client.send(`有人进入聊天室，当前聊天室人数：${wsSever.clients.size}`);
+  });
+
+  // 广播任何客户端发送的消息
+  ws.on("message", (data) => {
+    const msg = data.toString();
+    wsSever.clients.forEach((client) => {
+      client.send(msg);
+    });
+  });
+
+  // 当有客户端退出时，广播
+  ws.on("close", () => {
+    wsSever.clients.forEach((client) => {
+      client.send(`有人退出了聊天室，当前聊天室人数：${wsSever.clients.size}`);
+    });
+  });
+});
+
+// 给 html 提供个简单静态服务
+http
+  .createServer((req, res) => {
+    const html = readFileSync("./plain/index.html");
+    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+    res.end(html);
+  })
+  .listen(5050);