We Keep Coding

Creating a websocket ping in vanilla browser JS

I've searched a lot but cannot find a specific example of how to send - using javascript - a ping over a websocket (https://www.rfc-editor.org/rfc/rfc6455#section-5.5.2) from the browser. I'm told that the server I'm using will reply to a ping, but I've been trying variations on the following theme without success.
var sockets= {};
// ... code that attaches sockets to this object
for (let key in sockets) {
console.log("about to send pings to", key)
sockets[key].send(0x9)
}

const ws = new WebSocket('URL goes here');
ws.onopen = () => { ws.send('ping') };
ws.onmessage = (data) => { console.log(data); } // this should be pong
EDIT the script that you'll need,
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-socket-js/1.0.0/web_socket.min.js"></script>

Run websocket in web worker or service worker - javascript

I have 9 websocket connections from different sites working to update the DOM with data. Currently I am connecting to all and listening to all websockets and updating the data with a function call.
The issue I'm facing is that there are many websocket connections and there are memory and CPU usage issues. How can I use either service workers and web workers to optimize so many websocket connections?
async function appendGatePublicTickersData(e) {
if (e.event == "update" && e.result[0].contract == "BTC_USD") {
if ('total_size' in e.result[0]) {
$(".gate-btc-open-interest").html(commaNumber(e.result[0].total_size))
if ('last' in e.result[0]) {
$(".gate-btc-open-value").html(commaNumber(customFixedRounding((e.result[0].total_size / e.result[0].last), 4)))
}
}
if ('volume_24h_usd' in e.result[0]) {
$(".gate-btc-24-volume").html(commaNumber(e.result[0].volume_24h_usd))
}
if ('volume_24h_btc' in e.result[0]) {
$(".gate-btc-24-turnover").html(commaNumber(e.result[0].volume_24h_btc))
}
if ('funding_rate' in e.result[0]) {
var fundingRateBtcGate = customFixedRounding(e.result[0].funding_rate * 100, 4)
$(".public-gate-btc-funding").html(fundingRateBtcGate)
}
if ('funding_rate_indicative' in e.result[0]) {
var predictedRateBtcGate = customFixedRounding(e.result[0].funding_rate_indicative * 100, 4)
$(".public-gate-btc-predicted").html(predictedRateBtcGate)
}
}
}
var pubGateWs = new WebSocket("wss://fx-ws.gateio.ws/v4/ws/btc");
pubGateWs.addEventListener("open", function() {
pubGateWs.send(JSON.stringify({
"time": 123456,
"channel": "futures.tickers",
"event": "subscribe",
"payload": ["BTC_USD", "ETH_USD"]
}))
});
pubGateWs.addEventListener("message", function(e) {
e = JSON.parse(e.data)
appendGatePublicTickersData(e)
});
pubGateWs.addEventListener("close", function() {});

Since you are using Web Sockets it would be a good idea to use a SharedWorker to create a new thread for your Web Sockets. The difference between a normal WebWorker and a SharedWorker is that the web worker will create a new session in each tab or browser when loading the page, whereas the shared worker will use the same session in each tab. So all of your tabs or windows will have the same worker and same Web Socket connection to work with.
If the data is updated very frequently (more than 60 times per second) and the DOM has to be updated every time that happens, then use the requestAnimationFrame method to throttle the amount that the DOM is being updated. It will wait for the next repaint cycle before updating the DOM with new content, which is about 60 times per second, or 60FPS.
An implementation of this would like the example below:
Main thread.
// Create shared worker.
const webSocketWorker = new SharedWorker('web-sockets-worker.js');
/**
* Sends a message to the worker and passes that to the Web Socket.
* #param {any} message
*/
const sendMessageToSocket = message => {
webSocketWorker.port.postMessage({
action: 'send',
value: message,
});
};
// Event to listen for incoming data from the worker and update the DOM.
webSocketWorker.port.addEventListener('message', ({ data }) => {
requestAnimationFrame(() => {
appendGatePublicTickersData(data);
});
});
// Initialize the port connection.
webSocketWorker.port.start();
// Remove the current worker port from the connected ports list.
// This way your connectedPorts list stays true to the actual connected ports,
// as they array won't get automatically updated when a port is disconnected.
window.addEventListener('beforeunload', () => {
webSocketWorker.port.postMessage({
action: 'unload',
value: null,
});
webSocketWorker.port.close();
});
Shared Worker.
/**
* Array to store all the connected ports in.
*/
const connectedPorts = [];
// Create socket instance.
const socket = new WebSocket("wss://fx-ws.gateio.ws/v4/ws/btc");
// Send initial package on open.
socket.addEventListener('open', () => {
const data = JSON.stringify({
"time": 123456,
"channel": "futures.tickers",
"event": "subscribe",
"payload": ["BTC_USD", "ETH_USD"]
});
socket.send(data);
});
// Send data from socket to all open tabs.
socket.addEventListener('message', ({ data }) => {
const payload = JSON.parse(data);
connectedPorts.forEach(port => port.postMessage(payload));
});
/**
* When a new thread is connected to the shared worker,
* start listening for messages from the new thread.
*/
self.addEventListener('connect', ({ ports }) => {
const port = ports[0];
// Add this new port to the list of connected ports.
connectedPorts.push(port);
/**
* Receive data from main thread and determine which
* actions it should take based on the received data.
*/
port.addEventListener('message', ({ data }) => {
const { action, value } = data;
// Send message to socket.
if (action === 'send') {
socket.send(JSON.stringify(value));
// Remove port from connected ports list.
} else if (action === 'unload') {
const index = connectedPorts.indexOf(port);
connectedPorts.splice(index, 1);
}
});
// Start the port broadcasting.
port.start();
});
Sidenote: your appendGatePublicTickersData does not use the await keyword, so it does not have to be an async function.
Now supported since Safari 16.
Browser support for Shared Web Workers

Send a message using websockets in node.js

hell0 there!
Today I tried to send a websocket message. What am I doing wrong? I commented the code bellow so hopefully you guys can understand my goal...
// Import websocket
const websocket = require('ws');
// Create server
var socket = new websocket.Server({ port: 8080 })
// When client connects to websock server, reply with a hello world message
socket.on('connection', ws => {
ws.send('{"message":"Hello world."}'); //This works.
});
function send_message(msg){
ws.send(msg);
}
/* Calculate something, await for user interaction, etc... */
// When im done with all that, just send a message.
send_message('{"message":"please work"}'); // This does not work
What am I doing wrong?

You need to keep track of the connections. How you do that is up to you
const websocket = require('ws');
const socket = new websocket.Server({ port: 8080 })
const connections = [];
socket.on('connection', ws => {
connections.push(ws);
});
// send a new message to every connection once per second
setInterval(() => {
const date = new Date();
for (const ws of connections) {
ws.send(`hello again: ${date}`);
}
}, 1000);
Of course a real app would probably track the connections via something more complicated than just an array of connections. It would also need to stop tracking those connections when they disconnect etc...

const socket = new WebSocket('server_url'); // Connection opened
socket.addEventListener('message', function (event) { socket.send('send message'); });
I used the WebSocket like this to send the message.
I hope this will help you to fix the issues.

How can I do Ping/Pong between JavaScript and NodeJS WebSocket?

I'm currently developing a NodeJS WebSocket server. To detect broken connections I've followed this guide here:
https://github.com/websockets/ws#how-to-detect-and-close-broken-connections
The server side works really good but the client makes problems because I can't find a ping function.
Does anyone has an idea how I can get the client part done without the library?
const WebSocket = require('ws');
function heartbeat() {
clearTimeout(this.pingTimeout);
// Use `WebSocket#terminate()`, which immediately destroys the connection,
// instead of `WebSocket#close()`, which waits for the close timer.
// Delay should be equal to the interval at which your server
// sends out pings plus a conservative assumption of the latency.
this.pingTimeout = setTimeout(() => {
this.terminate();
}, 30000 + 1000);
}
const client = new WebSocket('wss://echo.websocket.org/');
client.on('open', heartbeat);
client.on('ping', heartbeat);
client.on('close', function clear() {
clearTimeout(this.pingTimeout);
});
One main problem is that there is no ping method I think:
client.on('open') -> client.onopen available in JavaScript
client.on('close') -> client.onclose available in JavaScript
client.on('ping') -> How? Just how?

There is no Javascript API to send ping frames or receive pong frames. This is either supported by your browser, or not. There is also no API to enable, configure or detect whether the browser supports and is using ping/pong frames.
https://stackoverflow.com/a/10586583/7377682

Sad but true, in case of the ping frame, the API does not support it as mentioned in previous answers.
The most popular workaround is to listen to the close event and try to reconnect to the server using an interval.
This tutorial is easy to understand and contains most use-cases to begin with WS:
var ws = new WebSocket("ws://localhost:3000/ws");
let that = this; // cache the this
var connectInterval;
var check = () => {
const { ws } = this.state;
if (!ws || ws.readyState == WebSocket.CLOSED) this.connect(); //check if websocket instance is closed, if so call `connect` function.
};
// websocket onopen event listener
ws.onopen = () => {
console.log("connected websocket main component");
this.setState({ ws: ws });
that.timeout = 250; // reset timer to 250 on open of websocket connection
clearTimeout(connectInterval); // clear Interval on on open of websocket connection
};
// websocket onclose event listener
ws.onclose = e => {
console.log(
`Socket is closed. Reconnect will be attempted in ${Math.min(
10000 / 1000,
(that.timeout + that.timeout) / 1000
)} second.`,
e.reason
);
that.timeout = that.timeout + that.timeout; //increment retry interval
connectInterval = setTimeout(this.check, Math.min(10000, that.timeout)); //call check function after timeout
};
// websocket onerror event listener
ws.onerror = err => {
console.error(
"Socket encountered error: ",
err.message,
"Closing socket"
);
ws.close();
};

I think what you are look for on the client is onmessage:
client.onmessage = function (event) {
console.log(event.data);
}
All messages sent from the server can be listened to this way. See https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

Check if WebSocket Server is running (on localhost)

When I try to initialize a websocket connection to the server running on localhost with
var webSocket = new WebSocket("ws://localhost:8025/myContextRoot");
in javascript, but the server hasn't completed starting up yet, I get the error
SCRIPT12029: WebSocket Error: Network Error 12029, A connection with the server could not be established
How can I prevent this? I.e. how do I check if the server has already started or how can I force the WebSocket client to wait for the server?

What about:
var webSocketFactory = {
connectionTries: 3,
connect: function(url) {
var ws = new WebSocket(url);
ws.addEventListener("error", e => {
// readyState === 3 is CLOSED
if (e.target.readyState === 3) {
this.connectionTries--;
if (this.connectionTries > 0) {
setTimeout(() => this.connect(url), 5000);
} else {
throw new Error("Maximum number of connection trials has been reached");
}
}
});
}
};
var webSocket = webSocketFactory.connect("ws://localhost:8025/myContextRoot");
When you get a connection error, you can do a limited number of trial-errors to try to re-connect. Or you can endlessly try to reach the server.

The accepted answer is perfectly fine. I just would like to extend it a little bit further with promises.
var wsFactory = { tryCount: 3,
connect : function(url){
var ctx = this,
ws = new WebSocket(url);
return new Promise(function(v,x){
ws.onerror = e => { console.log(`WS connection attempt ${4-ctx.tryCount} -> Unsuccessful`);
e.target.readyState === 3 && --ctx.tryCount;
if (ctx.tryCount > 0) setTimeout(() => v(ctx.connect(url)), 1000);
else x(new Error("3 unsuccessfull connection attempts"));
};
ws.onopen = e => { console.log(`WS connection Status: ${e.target.readyState}`);
v(ws);
};
ws.onmessage = m => console.log(m.data);
});
}
};
wsFactory.connect("ws://localhost:8025/myContextRoot")
.then(ws => ws.send("Hey..! This is my first socket message"))
.catch(console.log);

You can't prevent (or put on hold) the WebSocket from starting / establish a connection. WebSocket automatically establishes a connection with the server when its declared. What you can do is place all your code inside onopen event handler that you want to execute on successful connection. So it would be like...
var webSocket = new WebSocket("ws://localhost:8025/myContextRoot");
webSocket.onopen = function() {
// code you want to execute
};
check this article to know more about WebSocket.

Hence the protocol can't get queried by the server if it is not started, the only option is trial and error.
Or you could let the WebSocket server create a simple textfile with the timestamp of the startup in your web space directory where the javascript can retrieve it and than try to establish a connection. You can retrieve the textfile with XMLHttpRequest.