Socket.io报错'reference error: io is not defined' 求多页面路径配置方案

核心原因分析 #

你遇到的io is not defined是客户端未正确加载Socket.io客户端库导致的，服务端没打印a user connected是因为客户端根本没发起连接请求。单页测试正常但多页失效，大概率是多页面未统一正确引入客户端脚本，或者跨页面的路径/域名配置不一致。

分步解决方案 #

1. 确保每个页面都正确引入Socket.io客户端 #

多页面应用中，每个需要使用Socket.io的页面都必须加载客户端库，两种可行方式：

• CDN引入（最简单）：在页面的<head>或<body>末尾添加：

  <script src="/socket.io/socket.io.js"></script>
  

  这个路径是Socket.io服务端自动暴露的，只要客户端和服务端同域（域名+端口一致），就能直接加载。
• 本地npm导入：如果项目用npm管理依赖，先安装客户端：

  npm install socket.io-client
  

  然后在每个页面的JS文件顶部导入：

  import { io } from "socket.io-client";
  

2. 多页面的Socket.io连接配置 #

如果客户端和服务端存在跨域，或者服务端自定义了Socket.io路径，连接时必须明确指定：

情况1：同域多页面（服务端和页面端口/域名一致）

直接初始化连接即可，无需额外路径：

const socket = io();

情况2：跨域或自定义服务端路径

• 服务端如果配置了自定义路径（比如/chat-socket）：

  // 服务端代码修改
  const io = new Server(server, { 
    path: "/chat-socket" 
  });
  

• 客户端连接时必须指定对应路径和服务端地址：

  const socket = io('http://你的服务端域名:端口', {
    path: '/chat-socket'
  });
  

3. 服务端代码修正（潜在问题） #

你的服务端代码中有一处变量未定义的问题，会导致后续消息推送失败，需要修正：

// 原代码中dataToSend未定义，应该替换为theObj
socket.emit('/chatmessagechange', theObj);

同时确保服务端正确监听端口，添加：

server.listen(3000, () => {
  console.log('服务端运行在3000端口');
});

4. 排查验证步骤 #

• 打开浏览器控制台，输入io，如果能看到函数对象，说明客户端库加载成功；如果提示未定义，检查script标签路径或npm导入是否正确。
• 查看浏览器网络请求，过滤socket.io，确认有GET /socket.io/?EIO=4&transport=polling&t=xxx的请求，且状态码为200，说明连接正常。

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