Socket state pending forever in Javascript and Node

Question

// client.js
const webSocket = new WebSocket('wss://127.0.0.1:8081');

webSocket.addEventListener('open', (message) => {
    alert(message);
})

const text = document.getElementById('text');
const button = document.getElementById('button');

button.onclick = () => {
    webSocket.send(text.value);
}

// server.js
import { Server } from 'net';

const server = new Server();

server.on('connection', (socket) => {
    console.log(socket);

    socket.on('data', (data) => {
     
    })
});

server.listen(8081, '127.0.0.1', () => {
    console.log('Server running at port 8081');
});

The problem that I'm facing is:

When I load the page the socket is printed in the console of the server (I can get the remote address and remote port)
No matter what I do, the connection in the client is always pending. I tried Chrome, Brave, Mozilla and Safari and no one seems to work.

What am I missing? I tried to not send the message until the connection is ready, but I never get that state in my PC. The alert in the client never pops, even if I establish the onopen property without an event.

Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.
    at button.onclick

You don't have a WebSocket server. The client sends a request, but the server does nothing. Either implement the WebSocket protocol yourself or use a WebSocket module. A WebSocket is more than a TCP connection. `net.Server` is only a TCP server. — jabaa, Aug 13 '22 at 16:10

jfriend00 · Accepted Answer · 2022-08-13T17:22:36.810

A webSocket client must connect to a webSocket server. webSocket is a specific connection algorithm (that starts with an http request and then switches to the webSocket protocol) and a specific data format. So, a webSocket client must have a webSocket server to connect to. Your server is a generic TCP server that does not support webSocket connections.

The client will initially establish a TCP socket to your server, then send an http request over that socket, and then it will sit there waiting for an appropriate response to the http request it sent. Since your server never sends that response, it will just sit there waiting until eventually it will timeout and close the socket. This is why you see it stuck in the pending state. It's still waiting for the rest of the webSocket connection sequence to happen and it never does.

If you're curious how the webSocket connection scheme and data format work, you can see a nice description of it here.

Relevant StackOverflow answers:

How does WebSockets server architecture work?

What's the difference between WebSocket and plain socket communication?

Do websocket implementations use http protocol internally?

Overview of webSocket connection scheme

How WebSocket server handles multiple incoming connection requests?