“websocket was interrupted while page is loading”

Question

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>

Answer 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:

• Should WebSocket.onclose be triggered by user navigation or refresh?
• Firefox - Race condition allows ghost WebSocket connections to live after tab closed

Answer 2

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

Answer 3

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.

Answer 4

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

This code would remove this error:

$(window).on('beforeunload', function(){
    socket.close();
});