Node.js使用socket.io报require is not defined错误求解

所有报错的核心原因是 你将仅能运行在Node.js环境的Socket.IO服务端代码直接放到浏览器端执行，和模块引入写法、CDN资源选择没有关系：

• 浏览器原生不支持CommonJS规范的require全局方法，也不存在Node.js内置的http模块，任何第三方浏览器端HTTP相关包都无法替代Node原生API，服务端版本的socket.io包本身强依赖Node环境能力，不可能在浏览器中运行。
• 你引入的CDN版本Socket.IO资源是 浏览器专用客户端包，仅能用来主动连接已有的WebSocket服务，无法实现启动服务、监听端口的功能。
• 浏览器端代码没有直接监听TCP端口（如你代码中写的3000端口）的系统权限，启动WebSocket服务的逻辑必须运行在独立的Node.js服务进程中，不能写在前端页面引入的脚本文件里。
• 你之前尝试的ES import写法、替换HTTP CDN、引入RequireJS等方案全部无效，本质都是没有解决 服务端、客户端代码运行环境混淆 的核心逻辑错误。

1. 拆分前后端代码，独立部署服务端 #

将当前serverGame.js中的服务端逻辑剥离，单独作为Node.js运行的入口文件，绝对不要在HTML页面中引入这个文件。

服务端代码（命名为server.js，放在项目根目录） #

const { Server } = require('socket.io');
const http = require('http');

const httpServer = http.createServer();
const io = new Server(httpServer, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

io.on('connection', client => {
  client.emit('init', {data: 'hello world'})
})

httpServer.listen(3000, () => {
  console.log('Socket.IO服务启动成功，监听3000端口');
});

在项目根目录打开终端执行node server.js，控制台输出启动成功提示即代表服务端正常运行。

2. 调整前端页面与客户端逻辑 #

修改index.php的脚本引入 #

删除冗余的RequireJS、服务端脚本引入，仅保留Socket.IO客户端资源和你自己的前端游戏逻辑脚本：

<script src="socket.io客户端CDN资源路径" integrity="sha512-9mpsATI0KClwt+xVZfbcf2lJ8IFBAwsubJ6mI3rtULwyM3fBmQFzj0It4tGqxLOGQwGfJdk/G+fANnxfq9/cew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/clientGame.js"></script>

编写浏览器端客户端逻辑（js/clientGame.js） #

引入Socket.IO客户端CDN后，浏览器会全局挂载io对象，直接调用即可连接服务端，不需要使用require或import引入模块：

// 连接本地启动的Socket.IO服务
const socket = io('ws://localhost:3000');

// 监听服务端推送的init消息
socket.on('init', (payload) => {
  console.log('收到服务端消息:', payload);
  // 后续在这里写游戏渲染、操作上传等前端逻辑
});

3. 清理冗余依赖 #

当前package.json中配置的requirejs、ws-browser等依赖均为多余项，Socket.IO官方客户端包已经封装好了浏览器端所有通信逻辑，不需要额外引入适配包。

你参考的多人在线游戏教程采用标准前后端分离架构：Node.js端运行服务代码，负责维护全局游戏状态、同步多玩家数据、校验操作合法性；浏览器端运行客户端代码，负责渲染游戏画面、采集用户操作上传到服务端，二者通过WebSocket通道通信，绝对不能把两端的代码混放到同一个运行环境中。

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