网站使用Socket.io报错：socket.io.js加载失败及io未定义

Hey there, let's break down why you're seeing those two errors in Chrome's console:

错误原因分析 #

• 第一个错误 Uncaught SyntaxError: Unexpected token < 是核心问题：当浏览器请求 /socket.io/socket.io.js 时，它没有拿到预期的Socket.io JavaScript文件，反而收到了你的 index.html 文件内容（HTML文件以<开头，JS解析器自然会抛出语法错误）。
• 第二个错误 Uncaught ReferenceError: io is not defined 是连锁反应：因为Socket.io的核心JS文件没加载成功，全局的io对象也就不存在了。

出现这个问题的本质是：你用Nginx作为前端服务器，但Nginx没有把/socket.io/开头的请求转发给你的Node.js服务。默认情况下，Nginx会自行处理所有静态资源请求，当它找不到/socket.io/socket.io.js这个文件时，就返回了默认的index.html文件。

解决方案 #

你需要修改Nginx配置，让它把/socket.io/相关的请求代理到Node.js服务（8080端口），同时要支持WebSocket协议（Socket.io会依赖它实现实时通信）。

1. 更新Nginx配置

找到你的Nginx站点配置文件（通常在/etc/nginx/sites-available/或/usr/local/nginx/conf/目录下），添加或修改location /socket.io/段：

server {
    listen 80;
    server_name localhost; # 替换成你的域名，或者保持localhost

    # 处理前端静态文件（比如你的index.html）
    location / {
        root /path/to/your/static/files; # 替换成存放index.html的实际目录
        index index.html;
    }

    # 代理Socket.io请求到Node.js服务
    location /socket.io/ {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }
}

修改完成后重启Nginx生效：

sudo nginx -s reload

2. 简化前端连接代码

现在请求通过Nginx代理后，已经和前端页面同源了，不需要再指定完整的http://localhost:8080地址，直接用相对路径连接即可：

<script src="/socket.io/socket.io.js"></script>
<script>
    // 自动连接当前域名，无需指定完整URL
    var socket = io();
</script>

3. 验证效果

重启你的Node.js服务，刷新浏览器页面：

• Chrome控制台不再出现报错
• Node服务的控制台会打印出Connected !，说明客户端和服务端已成功建立Socket.io连接

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