63
Error: The connection to <websocket> was interrupted while the page was loading.
Source File: localhost/socket.io/node_modules/socket.io-client/dist/socket.io.js
Line: 2371

I am new to socket.io and I have tried to search for this, but I didn't get an answer.

Websocket is interrupted when I refresh page on Firefox. That's why server side is waiting to authorise client.

Here is code: server.js

var app = require('http').createServer(handler),
  io = require('socket.io').listen(app),
  fs = require('fs')

app.listen(8080);

function handler(req, res) {
  fs.readFile(__dirname + '/index.html',
    function (err, data) {
      if (err) {
        res.writeHead(500);
        return res.end('Error loading index.html');
      }
      res.writeHead(200);
      res.end(data);
    });
}

io.sockets.on('connection', function (socket) {
  socket.emit('news', {
    hello: 'world'
  });
  socket.on('my other event', function (data) {
    //alert(JSON.stringify(data));  
    console.log(data);
  });

});

index.html

<script src="node_modules/socket.io-client/dist/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost:8080');

  socket.on('news', function (data) {
    alert(JSON.stringify(data));
    console.log(data);
    socket.emit('my next event', { my: 'data' });
  });

</script>
dipenparmar12
  • 3,042
  • 1
  • 29
  • 39
Amar
  • 681
  • 1
  • 5
  • 7

6 Answers6

50

It happens because, you are not closing your open websocket.

This code would remove this error:

$(window).on('beforeunload', function(){
    socket.close();
});
bfontaine
  • 18,169
  • 13
  • 73
  • 107
Alexander C.
  • 719
  • 6
  • 9
  • I was experiencing this in `Chrome` as well. This seems to have fixed it. – theblang Oct 07 '14 at 03:58
  • 3
    Actually, I don't think this fixed it. I also tried [this](http://stackoverflow.com/a/14699817/1747491), but I don't that fixed it either. – theblang Oct 07 '14 at 04:22
  • 4
    This did not fix the issue for me. The [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=712329) in Firefox < 48 was the issue, and workarounds like this one did not work on my version of Firefox (41). Upgrading did it; but unfortunately, if you're writing a webapp (which I'm guessing is why most of us are interested in socket.io), you don't get to decide what version of Firefox (or other browser) your users use. :( – liminalisht Aug 14 '16 at 15:06
  • 1
    Didn't fix for me, until I discovered the server was not answering to the WebSocket `close` message. Now the server nicely confirms the close and Firefox (60.0) is happy. – Jan Wielemaker Jun 08 '18 at 11:29
  • 2
    I'm still having this issue in 2020, but only on wss:// – Anton Apr 07 '20 at 12:27
  • @JanWielemaker : Thank you! I've had this problem with our custom Undertow-based webserver for years. I checked my socket close handler code (onFullCloseMessage), updated it to call the super method in AbstractReceiveListener and now the websocket shuts down cleanly. – Lawrence Dol Jun 30 '20 at 16:11
17

This seems to be an open bug in Firefox (as of 2015-03-29):

https://bugzilla.mozilla.org/show_bug.cgi?id=712329

The workaround (for now) is to call close() on the websocket on beforeunload, as Alexander pointed out.

Update 2016-04: According to Bugzilla, this will be fixed in Firefox 48

user1338062
  • 11,939
  • 3
  • 73
  • 67
4

I was just running through the Socket.IO tutorials and I ran into this exact problem. I tried the posted solutions but they didn't seem to work at all.

After some fiddling and some screaming and some rubber-ducking, I finally figured out what the issue was. The issue is that it's trying to connect to the socket before the socket variables have been properly initialized. Javascript boo boo #1.

If you will ammend your file to include jQuery and then wrap your functions like so:

    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
 <script>
    $(function(){
      var socket = io.connect('http://localhost:8080');

      socket.on('news', function (data) {
        alert(JSON.stringify(data));
        console.log(data);
        socket.emit('my next event', { my: 'data' });
      }); 
    });
    </script>

You will have much more success.

Joe
  • 308
  • 1
  • 7
1

What impact does this have on your application? My guess is that it's just not great to see an error in the console.

The problem here is that you are seeing Firefox loggin this error and there's nothing you can do about it. It's not possible to capture this error with a try...catch block or via websocket.onerror/websocket.onclose.

See: How do I catch a WebSocket connection interruption?

Related:

Community
  • 1
  • 1
leggetter
  • 15,248
  • 1
  • 55
  • 61
  • leggetter-->on server side client not getting authorized thats why client does'nt emit any data. But in Internet Explorer 9 it gets authorized & also emits data bcoz ie uses xhr-polling. – Amar Jan 04 '13 at 05:24
  • Based on your question it sounds like you are asking why you are getting the interrupted error. If that's not what you are asking please update your question. – leggetter Jan 05 '13 at 09:08
1

I've had this problem with our custom Undertow-based webserver for years -- my problem was that my server was not responding to the socket close message.

Based on a comment by Jan Wielemaker I checked my socket close handler code for AbstractReceiveListener.onFullCloseMessage and realized I had not called the super method. After adding super.close() the socket closes cleanly on the client and no error is emitted.

Lawrence Dol
  • 63,018
  • 25
  • 139
  • 189
-7

One solution is to put a timeout on the disconnect event.

         setTimeout(() => {
            $('#offlineModal').modal('show')
          }, 5000)
abyz
  • 1