时间：2023-07-22 07:30:02 | 来源：网站运营
时间：2023-07-22 07:30:02 来源：网站运营
WebSocket 入门：简易聊天室：大家好，我是前端西瓜哥，今天我们用 WebSocket 来实现一个简单的聊天室。
在线咨询
yarn add ws类似 nodejs 原生的 http 等模块，ws 库支持 WebSocket 的服务端或客户端， 提供偏底层的 API。import { WebSocketServer } from "ws";// 创建一个 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}`); }); });});每当一个客户端进行了 websocket 连接，都会触发 wsServer 的 connection 事件，然后拿到一个 ws 对象。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 = '';}import { Server } from "socket.io";// socket.io v3.x 开始默认不允许跨域，需要在配置显式设置为允许跨域const io = new Server(6060, { cors: { origin: "*" } });io.on("connection", (socket) => { // 新客户端连接时，广播 io.emit("chat", `有人进入聊天室，当前聊天室人数：${io.engine.clientsCount}`); // 广播任何客户端发送的消息 socket.on("chat", (data) => { io.emit("chat", data); }); // 当有客户端退出时，广播 socket.on("disconnect", () => { io.emit("chat", `有人退出了聊天室，当前聊天室人数：${io.engine.clientsCount}`); });});需要特别注意的是，http://Socket.IO 的 v3.x 版本开始，默认不允许跨域，需要在配置显式设置为允许跨域。const socket = io('ws://localhost:6060');socket.on('chat', (data) => { const div = document.createElement('div'); div.innerText = data; document.body.append(div);})// 点击发送按钮，将输入框中的内容发送给服务器const input = document.querySelector('input');const btn = document.querySelector('button');btn.onclick = () => { console.log('发送'); socket.emit('chat', input.value); input.value = '';}http://Socket.IO 优点是实现了生产环境需要的底层非业务能力，让我们能更心无旁骛地去编写业务代码。关键词：简易,入门
