ReferenceError: WebSocket is not defined in client side typescript react application

Question

I am working on a React frontend application and I am trying to set up a WebSocket connection to my Golang backend server.

So far I have a simple class that is supposed to initiate a websocket connection using the native websocket object. It is failing with 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();
  }
}

I have tried installing the ws package using npm install ws and import WebSocket from 'ws'; based on the solution from here https://stackoverflow.com/a/52037864/3083825 but it looks like the ws package does not work on the browser anymore. It fails with error Error: ws does not work in the browser. Browser clients must use the native WebSocket object

My question is, why isn't the native WebSocket object working? When I create a simple javascript file, the native WebSocket object works fine but it doesn't work in this react app. How can I make it work?

Are you using next.js or anyother React frameworks?

Hypothesis
– Hypothesis

2022-01-03 21:48:49 +00:00
Commented Jan 3, 2022 at 21:48 — Hypothesis
– Hypothesis, Commented Jan 3, 2022 at 21:48
Yes. I'm using next.js.

SomeGuyFortune
– SomeGuyFortune

2022-01-03 21:54:28 +00:00
Commented Jan 3, 2022 at 21:54 — SomeGuyFortune
– SomeGuyFortune, Commented Jan 3, 2022 at 21:54

Hypothesis · Accepted Answer · 2022-01-03 21:53:30Z

0

Instead of defining Websocket in constructor try to use componentDidMount as such :

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

DOM must be completely loaded in order for the browser to access Websocket. I think this is the reason you are getting that error.

again I advise you to ditch classbased components and rewrite your code with functional components using the hook useEffect.

answered Jan 3, 2022 at 21:53

Hypothesis

1,4094 gold badges25 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Goutham J.M · Accepted Answer · 2023-05-17 12:31:52Z

0

In next js , you need to call WebSocket function inside useEffect , cause WebSocket is a browser function and will only be available after component has mounted in next , so what you can do is implement like below

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

answered May 17, 2023 at 12:31

Goutham J.M

2,23421 silver badges27 bronze badges

Collectives™ on Stack Overflow

ReferenceError: WebSocket is not defined in client side typescript react application

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related