socket.io connecting from some clients but not from others, and exhibiting weird behaviour with browser refresh


I’m putting together a socket.io implementation for use with nodejs.

The application works great on most browsers across various devices, but on some devices the client’s browser is unable to connect to the socket server, throwing this console error:

WebSocket connection to 'wss:<mydomain.com>:3000/socket.io/?EIO4&transport=websocket' failed: websocket.js 88
    doOpen    @websocket.js:88
    open      @transport.js:46
    open      @socket.js:197

…and some more lines like that. (I’ve changed my actual domain name to <mydomain.com> for the sake of this post.)

What’s odd is that on a device whose browser fails to connect to the socket server, if I manually type in https://<mydomain.com>:3000/socket.io/EIO=4&transport=polling into the address bar, I get the expected output:

0{"sid":"j53jSJFo3j_0393mc0sjai4209", "upgrades": ["websocket"], "pingInterval":25000, "pingTimeout":200000}

Now here’s where it gets really weird: on a device that fails to connect to the socket server, if I remove the io options when instantiating the io server connection, then refresh the client browser, it throws a CORS error — which is expected — but then if I undo the code change and refresh the client browser again, it starts working.

So the same code starts off not working, but then starts working if I change the code then change the code back to what it was when it wasn’t working.

Here’s the server code:

const { Server }     = require("socket.io");
const express = require('express');
const app = express();
const https = require('https');
const server = https.createServer({
    key: fs.readFileSync('<privkey_location>'),
    cert: fs.readFileSync('<cert_location>'),
    ca: fs.readFileSync('<chain_location>'),
    requestCert: true,
    rejectUnauthorized: false
},app);
global.io = new Server(server);

server.listen(3000, () => {
    console.log('listening on *:3000');
});

io.on('connection', (client) => {
    client.emit('hlo');
});

…and the client page:

<script src="https://www.netwaffles.com:3000/socket.io/socket.io.js"></script>
<script type="text/javascript">

var srv = io('<mydomain.com>:3000' , { transports : ['websocket'], secure: true });

srv.on('hlo', function() { alert('Connected.'); });

</script>

So that all works as expected on most devices/browsers.

But on the browsers that fail to connect, if I change this line:

var srv = io('<mydomain.com>:3000' , { transports : ['websocket'], secure: true });

…to this:

var srv = io('<mydomain.com>:3000');

…and refresh the browser, it still fails to connect, except now the error is a CORS error (as expected would be the case).

But then if I change that line back to this:

var srv = io('<mydomain.com>:3000' , { transports : ['websocket'], secure: true });

…and then I refresh the client browser again, the client browser connects to the socket server after a few seconds of trying, and the application in general starts to work just as normally as it does on other devices right from the start.

THIS SEEMS BANANAS TO ME.

And if I close the client browser once it’s working, then open the browser up to start a fresh session, when I load the page it’s back to not working again. I can refresh the page a hundred times without it starting to work, but then if I perform the rigmarole above (remove the io options from the code, refresh the client browser, then undo the code change and refresh the client browser again) it starts working and continues to work until I close the browser again and start a new session.

Meanwhile on most devices it works fine the first time, with no fiddling.

This isn’t browser-specific — on one device both firefox and chrome connect fine. On another device firefox connects but chrome won’t. On another device chrome connects but firefox won’t.

What in the actual F is going on?

Source: JavaSript – Stack Overflow

November 4, 2021
Category : News
Tags: javascript | node.js | sockets

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.