46

I'm using JavaScript and the Union platform How would I go about diagnosing this problem? Many thanks.

abatishchev
  • 98,240
  • 88
  • 296
  • 433
user1144112
  • 471
  • 1
  • 4
  • 5

5 Answers5

25

If you go to http://jsbin.com/ekusep/6/edit and view the JavaScript console you'll see the 'WebSocket is closed before the connection is established' logged. I've tested this in Chrome.

In this code what it means is that ws.close() was called (by user code) before the connection was even given a chance to be established.

So, the cause of this error is if code attempts to close the WebSocket connection before it's had a chance to actually connect.

leggetter
  • 15,248
  • 1
  • 55
  • 61
  • 8
    I have done a search through my entire project directory and found no instance of `ws.close()`. Am I missing something? – Kendall Weihe Jul 28 '16 at 16:09
  • Take a look at the [WebSocket API MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) and you'll see a `close` method listed. If you don't see that used in your project it may simply mean that WebSocket connections are not closed. – leggetter Jul 29 '16 at 12:54
  • 2
    Turns out ActionCable defaults to port 3000 and I wasn't on port 3000 lol. Keep that in mind for the future :) – Kendall Weihe Jul 29 '16 at 15:52
  • 1
    @KendallWeihe how do you check what port are you on? I am having the same problem, but I was not able to fix. – Felipe Maion Feb 23 '17 at 20:30
  • @Felipe Maion I do have the same problem ws://10.30.10.52:8080/spring-ng-chat/chat/237/rl5h8_6h/websocket – iDroid Mar 16 '17 at 03:13
  • @leggetter > What do you mean the code attempts to close the WebSocket connection?? You mean server side code or client side code?? – ZAJ Jul 23 '22 at 06:29
  • 1
    @ZAJ in this answer I'm referring to testing in Google Chrome and provide a link to run in the browser. So, this is for a web browser client. – leggetter Jul 23 '22 at 15:19
9

In React you need to add this to your useEffect in return

useEffect(() => {
        socket = new WebSocket(address);


        return () => {
            if (socket.readyState === 1) { // <-- This is important
                socket.close();
            }
        }
});

However it not only the best solution! You need use hooks instead of using socket connection directly in view/component it can prevents multiple creation of socket connection.

Also socket connection should closed by backend if its not in use, whenever frontend is communicating or not.

Bambier
  • 586
  • 10
  • 16
  • Is there a way to know that the socket is actually being destroyed? – Martin Watson Nov 07 '22 at 16:13
  • I don't know actually but every State of WS has unique number you can find out what happened when it's destroyed or any other things happened with this number – Bambier Nov 08 '22 at 17:38
0

For anybody else coming in to find an answer, apart from what @leggetter has mentioned above, in my case, it turned out that I was missing the port number while establishing a connection. I was using socket.io if that helps.

http://websocket.service:8000
danishprakash
  • 11
  • 1
  • 3
-1

In React, if you subscribe to websockets in useEffect, this error is fine when running in Strict Mode. React would create the subscription twice in Strict Mode, and the first 1 is thrown away immediately, be sure to close the first one!

The other react answer (by Bambier) is wrong...

...because it causes a memory leak. You end up with 2 subscriptions in React Strict mode (and local development). Why? It doesn't clean up the first subscription caused when the component renders twice. If the first component hasn't connected yet, you won't close it (socket.readyState === 1 is false). Eventually, the first WebSocket will eventually connect too.

This can also happen in production, when the component is re-rendered faster than the connection is formed. Your client and websocket server take longer to connect (larger distances/latencies), so this can definitely happen.

It hides the browser warning message, but adds a bug instead.

Ben Butterworth
  • 22,056
  • 10
  • 114
  • 167
-4

Just open the port in server ufw enable

BK NATANI
  • 13
  • 1
  • 4