React项目使用Socket.IO CDN报‘io is not defined’错误求助

核心原因 #

React的打包机制会将代码封装在模块作用域中，直接调用全局的io会被编译器视为未定义变量；同时如果CDN脚本加载时机晚于组件初始化，也会导致io无法访问。

解决方案 #

1. 直接通过window对象访问io

CDN加载的Socket.IO会将io挂载到全局window对象上，替换直接调用io为window.io即可：

const socket = window.io("http://localhost:3000/");

2. 确保在脚本加载完成后初始化Socket

React组件可能在CDN脚本加载前就执行了初始化代码，建议在组件挂载完成后再创建socket实例：

• 类组件：在componentDidMount中初始化

class YourComponent extends React.Component {
  componentDidMount() {
    this.socket = window.io("http://localhost:3000/");
    // 在这里添加socket事件监听
    this.socket.on('connect', () => {
      console.log('连接成功');
    });
  }

  componentWillUnmount() {
    this.socket?.disconnect(); // 组件卸载时断开连接
  }
}

• 函数组件：使用useEffect钩子

import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    const socket = window.io("http://localhost:3000/");
    
    socket.on('connect', () => {
      console.log('连接成功');
    });

    return () => {
      socket.disconnect(); // 组件卸载时清理连接
    };
  }, []);

  return <div>你的组件内容</div>;
}

3. 声明全局变量（消除ESLint报错）

如果项目使用ESLint，直接使用window.io可能仍有提示，可以在组件文件顶部添加全局变量声明：

/* global io */

之后即可直接使用io，但仍建议结合组件挂载时机初始化。

4. 调整CDN脚本加载顺序

确保Socket.IO脚本在React根容器之前加载，去掉defer属性避免延迟加载：

<!-- public/index.html -->
<script src="https://cdn.socket.io/3.1.3/socket.io.min.js"  integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" crossorigin="anonymous"></script>
<div id="root"></div>

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