使用JWT建立Socket.io连接失败求助：localhost:4000无法连接

问题根源 #

• 前后端JWT传递方式不匹配：后端在Socket.io连接握手阶段就通过socket.handshake.query.token校验token，但前端是等连接成功后才发送authenticate事件传递token，导致后端中间件直接抛出认证错误，连接被拒绝。
• 前端未指定后端Socket.io服务地址：默认io()会连接当前页面域名，若前端和后端端口不同（比如后端是4000），必须明确指定地址。
• 前端connect事件回调参数命名冲突：全局变量socket和回调里的socket重名，逻辑混乱。

修复步骤 #

1. 修改前端 chat.js #

将token放在Socket.io初始化的query参数中，同时指定后端服务地址：

// 明确指定后端Socket.io服务地址，带上token参数
const socket = io('http://localhost:4000', {
  query: {
    token: sessionStorage.getItem('token')
  }
});

// 连接成功后的逻辑
socket.on('connect', function () {
  console.log('Socket连接成功');
  // 这里可以直接处理后续消息逻辑
});

socket.on('message', function(message) {
  console.log('收到消息:', message);
});

2. 后端 app.js 优化（可选但推荐） #

确保后端server实例正确创建（比如基于Express），同时优化错误提示：

// 先确保创建了HTTP server，比如Express场景
const express = require('express');
const app = express();
const server = require('http').createServer(app);

var io = require("socket.io")(server, {
  cors: {
    origin: "*", // 生产环境建议指定具体域名
    methods: ["GET", "POST"]
  }
});
const jwt = require("jsonwebtoken");

io.use(function(socket, next){
  const token = socket.handshake.query.token;
  if (!token) {
    return next(new Error('缺少认证token'));
  }
  jwt.verify(token, 'SECRET_KEY', function(err, decoded) {
    if (err) {
      console.error('JWT验证失败:', err.message);
      return next(new Error('JWT无效或已过期'));
    }
    socket.decoded = decoded;
    next();
  });
})
.on('connection', function(socket) {
  console.log('用户已连接，解码信息:', socket.decoded);
  
  socket.on('message', function(message) {
      io.emit('message', message);
  });
  
  socket.on('disconnect', function() {
    console.log('用户已断开连接');
  });
});

// 启动服务监听4000端口
server.listen(4000, () => {
  console.log('Socket.io服务运行在localhost:4000');
});

调试建议 #

• 打开浏览器控制台（F12），查看Network面板中Socket.io的连接请求，确认query参数里是否包含正确的token。
• 查看后端控制台日志，确认JWT验证过程中的错误信息，排查token是否过期、签名密钥是否一致。
• 先单独测试JWT生成和验证逻辑，确保jwt.sign生成的token能用jwt.verify正常解码。

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