搭建Express与WebSocket服务器时出现TypeError: WebSocket.Server is not a constructor错误

问题原因 #

你在ES模块环境中使用了CommonJS风格的ws导入方式，ws模块的ES导出结构和CommonJS不同：默认导入的WebSocket是客户端WebSocket类，并不包含Server属性，因此触发该错误。

解决方案 #

修改ws-server.js中的导入和WebSocket服务器实例化逻辑：

1. 通过命名导入获取WebSocketServer构造函数
2. 将HTTP服务器传入WebSocketServer配置，实现端口共享
3. 简化HTTP服务器的创建代码

修改后的完整ws-server.js代码：

import http from 'http'
import { WebSocketServer } from 'ws';
import { app } from './http-server.js'

const port = 3000;
const ip = '0.0.0.0';

// 直接将Express app传入http.createServer
const server = http.createServer(app);

// 关联HTTP服务器与WebSocket服务器
const wss = new WebSocketServer({ server });

// 可选：添加WebSocket连接处理逻辑
wss.on('connection', (ws) => {
  console.log('客户端已连接');
  ws.on('message', (data) => {
    console.log(`收到消息：${data}`);
    ws.send(`回复：${data}`);
  });
  ws.on('close', () => {
    console.log('客户端断开连接');
  });
});

server.listen(port, ip, () => { console.log(`Serving on ${ip}:${port}`) });

额外说明 #

• 确保安装的是最新版ws依赖：npm install ws
• http-server.js代码无需修改，保持原样即可

内容的提问来源于stack exchange，提问作者Edwin