什么是 WebSocket

WebSocket 是 HTML5 中的协议，支持持久连续，HTTP 协议不支持持久性连接。HTTP1.0 和 HTTP1.1 都不支持持久性的链接，HTTP1.1 中 的keep-alive，是将多个 HTTP 请求合并为 1 个

websocket 方法

1. open
2. close
3. error
4. message
5. connection 【后端的】

思路

• 前端：
  • const ws = new WebSocket('ws:localhost:8000')
  • 监听 ws 事件：
    • ws.addEventListener('open', handleOpen, false);
    • ws.addEventListener('close', handleClose, false);
    • ws.addEventListener('error', handleClose, false);
    • ws.addEventListener('message', handleMessage, false);
    • handleMessage(e) { const msgData = JSON.prase(e.data) }
  • 发送消息：
    • ws.send(JSON.stringify({}));
• 后端：
  • const Ws = require('ws');
  • const server = new Ws.Server({ port: 8000 })
  • 监听事件：
    • server.on('open', handleOpen);
    • server.on('close', handleClose);
    • server.on('error', handleError);
  • server.on('connection', handleConnection);前端连接上来后：
    • handleConnection(ws) { ws.on('message', handleMessage) }
      • 监听 message 事件，再通过 clients 广播给所有客户端
      • handleMessage(data, isBinary) { server.clients.forEach(c => c.send(data, { binary: isBinary }) ) }

前端

• entry.html 入口页
  • input 输入用户名
  • btn 进入聊天室
• index.html 聊天室
  • list 聊天列表
  • input 聊天框
  • btn 发送 message

1. open
2. close
3. error
4. message

npm install vite

package.json: