使用Node 16.13搭建本地WebSocket服务器启动失败报错如何解决？

1. Node启动ES模块报错解决方案 #

该报错是因为你使用了ES6的import语法，但Node默认遵循CommonJS模块规范，可任选以下一种方法解决：

• 方法1：在项目根目录执行npm init -y生成package.json文件，在文件中添加配置项"type": "module"即可。
• 方法2：直接将index.js文件的后缀名修改为index.mjs，无需修改其他配置。

2. 浏览器CORS跨域报错解决方案 #

该报错是因为你直接双击打开HTML文件，浏览器通过file://协议加载本地文件，该协议默认不支持跨域请求资源，同时你存在明显的前后端代码混用错误，按以下步骤修正：

• 不要将运行在Node端的服务端代码index.js直接引入HTML文件，ws包是Node环境专属依赖，无法在浏览器中运行，浏览器端有原生的WebSocketAPI可以直接使用。
• 安装本地静态服务启动HTML：执行npm install -g http-server全局安装静态服务工具，在HTML文件所在目录执行http-server命令，访问终端输出的本地服务地址（通常为http://127.0.0.1:8080类地址）加载HTML即可规避跨域问题。
• 浏览器端WebSocket连接逻辑参考示例：

<script>
// 浏览器端原生WebSocket API无需引入依赖
const clientWs = new WebSocket("ws://localhost:8080");
clientWs.addEventListener("open", () => {
  console.log("已成功连接到WebSocket服务端");
  clientWs.send("来自浏览器的问候");
});
clientWs.addEventListener("message", (event) => {
  console.log("收到服务端返回消息：", event.data);
});
</script>

3. 服务端index.js逻辑错误修正 #

你当前的代码混淆了服务端实例和客户端实例的事件绑定逻辑，connection事件需要绑定到WebSocket服务端实例上，修正后的完整代码如下：

import WebSocket from 'ws';
    
// 实例化WebSocket服务端，监听8080端口
const wss = new WebSocket.Server({ port: 8080 });

// 监听新客户端连接事件
wss.on("connection", ws => {
  console.log("新客户端已接入");
  // 监听客户端发送的消息
  ws.on("message", data => {
    console.log(`收到客户端消息：${data}`);
    // 向客户端返回响应
    ws.send("服务端已收到你的消息");
  });
  // 监听客户端断开连接事件
  ws.on("close", () => {
    console.log("客户端已断开连接");
  });
});

console.log("WebSocket服务已启动，监听端口：8080");

完整运行步骤 #

1. 修正完成后先执行node index.js启动WebSocket服务端
2. 启动静态服务打开HTML页面，即可实现前后端WebSocket通信

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