Estoy trabajando en una aplicación de front-end de React y estoy tratando de configurar una conexión WebSocket a mi servidor de back-end de Golang.
Hasta ahora tengo una clase simple que se supone que debe iniciar una conexión websocket usando el objeto websocket nativo. Está fallando con el error 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(); } } He intentado instalar el paquete ws usando npm install ws e import WebSocket from 'ws'; basado en la solución de aquí https://stackoverflow.com/a/52037864/3083825 pero parece que el paquete ws ya no funciona en el navegador. Falla con error Error: ws does not work in the browser. Browser clients must use the native WebSocket object
Mi pregunta es, ¿por qué no funciona el objeto WebSocket nativo? Cuando creo un archivo javascript simple, el objeto WebSocket nativo funciona bien, pero no funciona en esta aplicación de reacción. ¿Cómo puedo hacer que funcione?
En lugar de definir Websocket en el constructor, intente usar componentDidMount como tal:
componentDidMount() { let ws = new WebSocket('ws://localhost:50000'); } DOM debe estar completamente cargado para que el navegador acceda a Websocket . Creo que esta es la razón por la que está recibiendo ese error.
nuevamente, le aconsejo que se deshaga de los componentes basados en clases y reescriba su código con componentes funcionales usando el gancho useEffect .