What would cause intermittent socket connections?

[ghost]

Being new to all of this in the Javascript world I am running into a few issues but getting far. When I go to launch the app, the app doesn't always connect. some times I have to refresh a few times before it connects. What would cause this?

Configuration:

Webserver (Private 10.0.3.1 | CentOS 8);
NodeJs Server (Private (SSL Valid .com 'Letsencrypt') 10.0.2.1 | Ubuntu 20.04)
Database server (Private 10.0.1.1 | CentOS 8)

Client.js

const $x = document.getElementById('chat-input-button');
const $xx = document.getElementById('chat-input');
const $xxx = document.getElementById('user-name');
const $chatlog = document.getElementById('chat-log');
const $online = document.getElementById('status');
const $connect = document.getElementById('connect');
const ws = new WebSocket("wss://10.0.2.1:443/ws");
let wsTimeout = null;


function ping(){
    let msg = {
        type: 'PING'
    }
    $online.style.backgroundColor ='pink';
    const $pingmsg = ws.send(JSON.stringify(msg));
}

const $keepAlive = setInterval(ping, 50000);

$x.onclick = function(e){
    console.log($xx.value);
    ws.send($xx.value);
};

ws.onopen = function(e){
    console.log('Connecting');
    console.log(ws.readyState);
    $online.style.backgroundColor ='green';
};

ws.onmessage = function(e) {
    const $li = document.createElement('li');
    $li.innerText = JSON.parse(e.data);
    $li.style.display = 'block';
    $chatlog.prepend($li);
    $online.style.backgroundColor ='green';
};

ws.onclose = function(e){
    console.log('Connection Closed');
    console.log(ws.readyState);
    $online.style.backgroundColor ='red';
    setTimeout(function(){

    },1000);
};

ws.onerror = function(e){
    $online.style.backgroundColor ='yellow';
    console.log('An Error has occurred: ' +  e);
    console.log(ws.readyState);
};

Server.js

const $uWS = require("uWebSockets.js");
const $uuid = require('uuidv4');
const $util = require("util");
const $decoder = new $util.TextDecoder('utf-8');
const $port = 443;
let SOCKETS = [];

const $app = $uWS.SSLApp({
    key_file_name: "./ssl/privkey.pem",
    cert_file_name: "./ssl/cert.pem"
    })
    .ws('/ws', {
        // config
        compression: 0,
        maxPayloadLength: 16 * 1024 * 1024,
        idleTimeout: 60,

        open: (ws, req) => {
            // this handler is called when a client opens a ws connection with the server
            console.log('Client Connected: ' + (ws.getRemoteAddress()));
            SOCKETS.push(ws);
            ws.subscribe('room');
        },

        message: (ws, data, isBinary) => {
            // called when a client sends a message
            console.log(JSON.stringify($decoder.decode(data)));
            ws.publish('room', JSON.stringify($decoder.decode(data)));
        },

        close: (ws, code, message) => {
            // called when a ws connection is closed
            console.log(code);
        }
    }).listen($port, token => {
        token ?
            console.log(`Listening to port ${$port}`) :
            console.log(`Failed to listen to port ${$port}`);
    });

[hst-m]

the app doesn't always connect. some times I have to refresh a few times before it connects

what does this mean? you need to be more specific, you have a bunch of console.logs set up on both server and client, what do they say when you load the page?

you are missing auto-reconnect code to try the ws connection again but you want it to connect on the first try

[ghost]

Sorry, thought I was clear.

As for the question, When I open the web page on server 10.0.3.1 it launches the app from 10.0.2.1, when the app launches, it will either connect right away, or it will hang for a few seconds to just less of a minute then connect or fail after the timeout.

[ghost]

I wasn't looking at the auto-reconnect just yet. just getting familiar with uWebSockets. Really liking it so far. Only tested socket.io.

[ghost]

The logs will either show connection state 1 or 3 depending on if it connects to the server. and same on the client.

[hst-m]

What is the error message

[ghost]

[ghost]

[hst-m]

I try to connect to that 'wss://eso-dev.com/ws' and get no connection. you are saying it is 50% chance connecting? or is it 0% chance? just something you need to troubleshoot and fix with your setup

[ghost]

that server is not public. it's a private registration to 10.0.2.1. I do own the domain,

[ghost]

So, I rebooted the server and it seems to connect right away but if I refresh a few times the issue starts all over again. I can open the server to the public if you want to see it for yourself.

[ghost]

Ok, so... I have been able to reproduce it on my other server too. So, when I do a bunch of different configs and update the server.js and keep refreshing the issue seems to appear. now, if I reboot after a few server.js config the issue seems to go away. I have yet to reproduce it and pressing f5 for like 3 mins now straight.

[joshxyzhimself]

Hi there,

I think this is a case similar to what I encountered in uNetworking/uWebSockets#1132 (comment), which is caused by an incomplete certificate chain.

On chrome desktop it will still load the page since it's tolerant but you'll get intermittent connects and disconnects, but on Firefox and Chrome Android the page won't even load at all. You can also test your endpoint at https://www.ssllabs.com/ssltest/ which is great in telling you if there are problems with your site's certificate chain, in which case you might get the following message:

On my case when I generate certificates, LetsEncrypt gives me four (4) files: privkey.pem, cert.pem, chain.pem, and fullchain.pem.

On the above referenced issue, this one fails:

const key_file_name = `/etc/letsencrypt/live/${endpoint_domain}/privkey.pem`;
const cert_file_name = `/etc/letsencrypt/live/${endpoint_domain}/cert.pem`;
const https_app = uws.SSLApp({ key_file_name, cert_file_name });

Yet this one where I use the fullchain.pem instead of cert.pem works:

const key_file_name = `/etc/letsencrypt/live/${endpoint_domain}/privkey.pem`;
const cert_file_name = `/etc/letsencrypt/live/${endpoint_domain}/fullchain.pem`; // fixed here
const https_app = uws.SSLApp({ key_file_name, cert_file_name });