使用socket.io连接WebSocket时出现404错误，请求URL异常求助

你遇到的404错误核心原因是：socket.io-client只能连接socket.io服务器，而你的后端是原生WebSocket服务，两者协议不兼容。socket.io-client默认会请求/socket.io/路径做握手，但你的后端没有该路径，因此返回404；而Postman用原生WebSocket协议直接连接/connect/testing/端点，所以能正常工作。

以下是两种可行的解决方案：

方案一：改用原生WebSocket API（推荐） #

直接使用浏览器原生的WebSocket对象连接后端端点，无需依赖socket.io-client：

import { useEffect } from 'react';

// ...

useEffect(() => {
  // 建立原生WebSocket连接
  const ws = new WebSocket('ws://127.0.0.1:8000/connect/testing/');

  // 连接成功回调
  ws.onopen = () => {
    console.log('WebSocket连接已建立');
  };

  // 接收消息回调
  ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('收到消息:', data);
    // 可根据消息类型处理，匹配你预期的逻辑
    if (data.type === 'connection_established') {
      console.log('data is:', data.text);
    }
  };

  // 连接关闭回调
  ws.onclose = () => {
    console.log('WebSocket连接已关闭');
  };

  // 组件卸载时关闭连接，避免内存泄漏
  return () => {
    ws.close();
  };
}, []);

方案二：后端改用socket.io搭建服务 #

如果一定要使用socket.io-client，需要后端也配置socket.io服务，并匹配前端的路径设置：

后端示例（Node.js） #

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

const app = express();
const server = http.createServer(app);

// 配置socket.io，指定对应路径
const io = new Server(server, {
  path: '/connect/testing/'
});

// 监听连接事件
io.on('connection', (socket) => {
  console.log('客户端已连接');
  // 发送对应前端'FromAPI'事件的消息
  socket.emit('FromAPI', { 
    type: 'connection_established', 
    text: 'connection successful' 
  });

  // 监听断开连接事件
  socket.on('disconnect', () => {
    console.log('客户端已断开');
  });
});

server.listen(8000, () => {
  console.log('服务器运行在 http://127.0.0.1:8000');
});

前端修改后的代码 #

import socketIOClient from 'socket.io-client';
import { useEffect } from 'react';

// ...

useEffect(() => {
  // 连接socket.io服务器，指定对应路径
  const socket = socketIOClient('http://127.0.0.1:8000', {
    path: '/connect/testing/'
  });

  socket.on('FromAPI', data => {
    console.log('data is:', data);
  });

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

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