express框架使用WebSocket通信

一、使用express-ws插件

pnpm i express-ws

二、app.js引入并使用

// app.js
// 启用 WebSocket 支持
expressWs(app);
// 注册 WebSocket 路由 - 注意别被正常路由中间件影响到
app.ws("/socketTest", (ws, req) => {
  console.log("WebSocket client connected to /public/socketTest");

  // 发送欢迎消息
  ws.send(
    JSON.stringify({
      type: "welcome",
      message: "Connected to WebSocket test endpoint",
    })
  );

  // 回显收到的消息
  ws.on("message", function (message) {
    console.log("Received message:", message);
    // 直接回显消息
    ws.send(
      JSON.stringify({
        type: "echo",
        originalMessage: message.toString(),
      })
    );
  });

  // 处理连接关闭
  ws.on("close", function () {
    console.log("WebSocket connection closed for /public/socketTest");
  });

  // 处理错误
  ws.on("error", function (err) {
    console.error("WebSocket error:", err);
  });
});

三、www中附加WebSocket服务

// bin/www文件
...
import expressWs from 'express-ws';
...
/**
 * 将WebSocket服务器附加到HTTP服务器
 */
expressWs(app,server)
...

四、前端调用

let socket = new WebSocket("ws://localhost:3000");
// 连接建立时触发
socket.onopen = function(event) {
  console.log("连接已建立");
};

// 接收到消息时触发
socket.onmessage = function(event) {
  console.log("收到消息:", event.data);
};

// 发生错误时触发
socket.onerror = function(error) {
  console.error("发生错误:", error);
};

// 连接关闭时触发
socket.onclose = function(event) {
  if(event.wasClean) {
    console.log(`连接正常关闭，代码=${event.code} 原因=${event.reason}`);
  } else {
    console.log("连接异常断开");
  }
};

// 发送文本
socket.send("Hello Server!");

// 发送 JSON 数据
const data = { type: 'message', content: 'Hello Server!' };
socket.send(JSON.stringify(data));

// 发送二进制数据（ArrayBuffer）
let buffer = new ArrayBuffer(16);
socket.send(buffer);