React客户端连接本地Node.js WebSocket服务失败问题求助

数据老陈

2026-9-28

问题原因

WebSocket 协议不能使用 http/https 前缀，必须使用专属的 ws（非加密）/wss（加密） 前缀
你注释掉的连接地址没有带上后端配置的 WebSocket 路径 /ws，导致匹配不到后端的 WebSocket 服务

解决方案

方案1：使用浏览器原生 WebSocket API（无需安装第三方依赖，更推荐）

React 运行在浏览器环境下，直接调用原生 WebSocket 接口即可，不需要额外安装 ws 或者 websocket 包，修正后的代码如下：

import React from "react";

function App() {
  React.useEffect(() => {
    // 地址协议改为ws，带上后端配置的/ws路径
    const client = new WebSocket('ws://localhost:3001/ws');

    client.onopen = () => {
      console.log('WebSocket Client Connected');
    };
    client.onmessage = (message) => {
      // 后端发送的是JSON字符串，需要解析
      const data = JSON.parse(message.data);
      console.log('收到服务端消息：', data);
    };
    client.onerror = (error) => {
      console.log('WebSocket连接错误：', error);
    };
    client.onclose = () => {
      console.log('WebSocket连接关闭');
    };

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

  return null
}

export default App;

方案2：继续使用`websocket`包

只需要修正连接地址即可：

import React from "react";
import { w3cwebsocket as W3CWebSocket } from "websocket";

function App() {
  React.useEffect(() => {
    // 修正协议为ws，同时带上/ws路径
    const client = new W3CWebSocket('ws://localhost:3001/ws');

    client.onopen = () => {
      console.log('WebSocket Client Connected');
    };
    client.onmessage = (message) => {
      console.log(message);
    };
    client.onerror = (error) => {
      console.log('连接错误：', error);
    };

    return () => {
      client.close();
    };
  }, [])

  return null
}