Question

ReferenceError：客户端 TypeScript React 应用程序中未定义 WebSocket

2022-01-03

5635

javascript node.js reactjs websocket ws

我正在开发一个 React 前端应用程序，并尝试与我的 Golang 后端服务器建立 WebSocket 连接。

到目前为止，我有一个简单的类，它应该使用本机 websocket 对象启动 websocket 连接。它失败并出现错误 ReferenceError: WebSocket is not defined

export class MyService implements RealtimeService {
  socket: WebSocket;
  constructor() {
    console.log('initializing websocket connection');
    this.socket = new WebSocket('ws://localhost:50000');


    this.socket.on("open", (event) => {
      console.log('connection established');
    });

    this.socket.on("error", (event) => {
      console.log('connection failed', event)
    });

    this.socket.on('message', (event) => {
      console.log('received message from server ', event.data);
    })

    this.socket.on('close', (event) => {
      console.log('connection closed ', event);
    })
  }

  serviceName(): string {
    //TODO: implement
    return "";
  }

  subscribe(channelName: string): any {
    //TODO: implement
    return new Channel();
  }
}

我已尝试使用 npm install ws 和 import WebSocket from 'ws'; 安装 ws 包，基于此处的解决方案 https://stackoverflow.com/a/52037864/3083825 ，但看起来 ws 包在浏览器上不再起作用。失败并显示错误 Error: ws 在浏览器中不起作用。浏览器客户端必须使用本机 WebSocket 对象

我的问题是，为什么本机 WebSocket 对象不起作用？当我创建一个简单的 javascript 文件时，本机 WebSocket 对象工作正常，但在此 React 应用程序中不起作用。我该如何让它工作？

Answer 1

不要在构造函数中定义 Websocket ，而是尝试使用 componentDidMount ，如下所示：

   componentDidMount() {
         let ws = new WebSocket('ws://localhost:50000');
    }

DOM 必须完全加载，浏览器才能访问 Websocket 。我认为这就是您收到该错误的原因。

我再次建议您放弃基于类的组件，并使用钩子 useEffect 使用功能组件重写代码。

Answer 2

在 next js 中，你需要在 useEffect 中调用 WebSocket 函数，因为 WebSocket 是一个浏览器函数，只有在 next 中安装组件后才可用，因此你可以像下面这样实现

function MyService(){
    useEffect(()=>{
        let ws = new WebSocket('ws://localhost:50000');
    },[])
  return <>{/* Your JSX */}</>
}