如何在ECMAScript Modules(ESM)规范下使用Socket.io库？

错误原因 #

Socket.io 3.0及后续版本移除了对ES模块默认导出的支持，因此使用import socketIO from "socket.io"的默认导入语法会触发报错。

正确导入方式 #

方式1：使用命名导入（推荐）

直接导入Socket.io暴露的Server命名导出即可：

import { Server } from "socket.io";

搭配HTTP服务的完整使用示例：

import { createServer } from "http";
import { Server } from "socket.io";

const httpServer = createServer();
// 初始化Socket.io实例
const io = new Server(httpServer, {
  cors: {
    origin: "*" // 可根据业务调整跨域规则
  }
});

// 监听客户端连接
io.on("connection", (socket) => {
  console.log("客户端接入成功，ID为", socket.id);
});

httpServer.listen(3000, () => {
  console.log("服务启动在3000端口");
});

方式2：全量导入兼容旧写法

如果要兼容原有代码的调用风格，可以用全量导入语法：

import * as socketIO from "socket.io";
// 初始化时调用Server属性
const io = new socketIO.Server(httpServer);

客户端导入注意事项 #

如果是前端使用socket.io-client包，同样遵循命名导入规则：

import { io } from "socket.io-client";
// 连接服务端
const socket = io("http://localhost:3000");

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