So I have created a new web application that uses a WebSocket to Node.JS WebSocket server. Now the Node server does everything it needs to and works perfectly. My problem is with the browser implementation.
I have looked at a lot of the libraries other people have been given in the answers, but I want to see if their is a better or cleaner way to do this.
So in my instance, I essentially create an object, which wraps the WebSocket and then uses a setInterval to reconnect, by calling connect(url), which will create another WebSocket instance.
I have been looking at connections and clients, and it seems that if a connection closes, say the server goes down, or something happens, it looks as though sometimes, in a longer period of time, the WebSocket connections are doubling up, so instead of 1 connection per client, it is 2, 3 or 4...?
I have a feeling this is because I am making a new instance of the WebSocket each time?
Code below:
// Main Function
function WSWrapper() {
// Variables
this.socket = null;
this.enabled = false;
this.retry = false;
// Connect
this.connect = function(address) {
// Sets the address
this.address = address;
// Creates the websocket connection
this.socket = new WebSocket(address);
// On message event handler
this.socket.onmessage = function(event) {
// Do stuff here
}
this.socket.onopen = function(event) {
// On connect, disable retry system
window.ta.enabled = true;
window.ta.retry = false;
}
this.socket.onclose = function(event) {
// On close, enable retry system, disable bidding
window.ta.enabled = false;
window.ta.retry = true;
window.ta.bidEnabled = false;
}
this.socket.onerror = function(event) {
// Set variables off
window.ta.enabled = false;
window.ta.bidEnabled = false;
window.ta.retry = true;
}
return true;
}
// Close Socket
this.closeSocket = function() {
// Shutdown websocket
this.socket.close();
return true;
}
// Send Message
this.socketSend = function(content) {
this.socket.send(content);
return true;
}
// Retry System: Attempts to reconnect when a connection is dropped
this.repeat = setInterval(function() {
if (window.ta.enabled == false && window.ta.retry == true) {
window.ta.connect(window.ta.address);
}
}, 2000);
}
window.ta = new WSWrapper();
window.ta.connect('wss://example.com');
I have come up with some thoughts and questions, any answers would be good.
Is there a way to reconnect the same socket? like an .open(url) function that will re-open the connection? I looked in the chrome console, and went through the prototype for the WebSocket, but I see nothing there, so I don't think so but would love to be told otherwise.
Could I fix this by using some functions that take the information, so for example, I create the WebSocket instance and then pass all requests to another function to manage the message information, and then when a connection disconnects, I can somehow delete the old instance and re-create a new one?
Anything would be good, as I am really not sure, it seems that everyone makes a wrapper (like I am doing), but does things differently, so what is the best way or the preferred way, that won't cause multiple instances of the socket to keep running? If there is a problem with my code then please explain!
Thanks
just an update on this, I was able to take the following code:
https://github.com/websockets/ws/wiki/Websocket-client-implementation-for-auto-reconnect
And amend it to work for me in the browser. See the below code, remember this is an adaption from the above, so I take no credit in the code.
// Define WSClient instance
window.WSClient = {
// Default reconnect interval
reconnectInterval: 5000,
// Define whether it has ever reconnected
reconnected: false,
// Log messages
debug: false,
// Open the URL
open: function(url) {
// Define that
var that = this;
// Open the URL
this.url = url;
// Create underlying websocket instance
this.instance = new WebSocket(this.url);
// Setup the event handler for onopen
this.instance.onopen = function (ev) {
// If it has ever reconnected lets say that
if (that.reconnected && that.debug) {
console.log('[WS]: Reconnected.');
}
// Run the open function
that.onopen(ev);
}
// Setup the event handler for onmessage
this.instance.onmessage = function(data, flags) {
that.onmessage(data, flags);
}
// Setup the event handler for onclose
this.instance.onclose = function(e) {
switch (e){
// Normal closure
case 1000:
if (that.debug) {
console.log("[WS]: Closed");
}
break;
// Abnormal closure
default:
that.reconnect(e);
break;
}
// Run onclose event
that.onclose(e);
}
// Setup the event handler for onerror
this.instance.onerror = function(e) {
switch (e.code){
// Try and reconnect
case 'ECONNREFUSED':
that.reconnect(e);
break;
// Otherwise run error
default:
that.onerror(e);
break;
}
}
},
// Setup send function
sendRaw: function(data, option) {
try {
this.instance.send(data, option);
} catch (e) {
this.instance.emit('error', e);
}
},
// Send the content
send: function(content) {
this.instance.send(content);
},
// Define the reconnection function
reconnect: function(e) {
// Define that
var that = this;
// Log reconnection
if (that.debug) {
console.log(`[WS]: Reconnecting in ${this.reconnectInterval / 1000} seconds.`);
}
// Set reconnect timeout
setTimeout(function() {
// Log reconnecting
if (that.debug) {
console.log("[WS]: Reconnecting...");
}
// Define has reconnected
that.reconnected = true;
// Try and open the URL
that.open(that.url);
}, this.reconnectInterval);
},
}
So I use this in the Vue.JS framework like so:
<script type="text/javascript">
// Define the websocket
window.vm['socket_example'] = new Vue({
el: '#socket_example',
name: 'SocketExample',
data: {},
methods: {
// On connection open
socket_open: function(event) {
// Send get lots function
this.$socket.send('some_content_here');
},
// On connection close
socket_close: function(event) {
},
// On connection error
socket_error: function(error) {
},
// On connection message
socket_message: function(event) {
},
},
mounted: function() {
// Setup WebSocket connection
this.$socket = WSClient;
this.$socket.debug = true;
this.$socket.open('<?php echo $endpoint; ?>');
// Setup websocket listeners
this.$socket.onopen = this.socket_open;
this.$socket.onclose = this.socket_close;
this.$socket.onerror = this.socket_error;
this.$socket.onmessage = this.socket_message;
},
});
</script>
Anyway I hope this was helpful!
Related
Basically we use the socket to call deliverers for an app made in flutter, in the part of the app we made the socket work in the foreground service, however with the loss of internet connection the socket accumulates the emits and ends up crashing the app causing a memory leak.
I'm out of ideas to fix this now.
In the server side
global.ioDeliveryman = require('./socketio.js').init(deliveryManServer, {
pingInterval: 10,
pingTimeout: 5,
});
global.ioDeliveryman.on('connect', function (socket) {
socket.on('USER_CONNECTED', function(data){
global.connectedDeliverymanUsers[data.id] = {socket_id: socket.conn.id , aceite: data.aceite}
});
socket.on('USER_DISCONNECTED', function(data){
if(global.connectedDeliverymanUsers[data.id]){
try {
global.ioDeliveryman.sockets.connected[global.connectedDeliverymanUsers[data.id].socket_id].disconnect();
delete global.connectedDeliverymanUsers[data.id]
} catch (TypeError) {
console.log("Disconnect of undefined");
}
}
});
});
Client side
if (!socket.connected) {
conectar();
var jsao;
socket.on(describeEnum(SocketFunction.ALOCAR_ENTREGADOR), (data) async => {
socket.emit(describeEnum(SocketFunction.PONG), { "id": userId } ),
Vibration.vibrate(pattern: [1, 1000, 500, 2000]),
//the var jsao is setted here
NotificationUtils.showNotificationNovaCorrida(jsao),
await FGS.ForegroundService.sendToPort(jsao),
// check if app it's in the background aind wait 45 seconds to
Timer(Duration(seconds: 43), () async {
await FGS.ForegroundService.sendToPort('{"order": {"funcao": "VERIFICAR_BACKGROUND"}}');
if (isBackground) {
Timer(Duration(seconds: 2), () {
enviarAceiteEntregador(false, "${data["order"]["user_id"]}");
});
}
isBackground = true;
}),
});
Emit inside a function callback on backend
here we do ping pong to see if the user is connected, but this memory leak sometimes happens
it`s done in a loop with callback to cycle through the available deliverers one by one until one of them accepts
// PING
try{
if (alertMap.get(entregador.deliveryman_id.toString())) {
callback();
return;
}
//emit for deliveryman with socketId
global.ioDeliveryman.to(socketId).emit('ALOCAR_ENTREGADOR', {order: actualOrder, clientName: clientName});
} catch (TypeError) { console.log("Disconnect of undefined"); }
// PONG
pongMap.set(entregador.deliveryman_id.toString(), false);
everything works until the moment when the delivery person loses connection, then the socket starts to emit madly
I have a server
var connect = require('connect');
var serveStatic = require('serve-static');
var HTMLServer = function(path){
this.path = path;
this.server = connect().use(serveStatic(this.path));
this.startServer = function(callback){
this.server = this.server.listen(8080, callback);
};
this.stopServer = function(callback){
this.server.close(callback);
}
}
And I use it as follows:
var thisServer = new HTMLServer(__dirname);
thisServer.startServer(function(){
console.log('Server running on 8080...');
setTimeout(function(){
thisServer.stopServer(function(){
console.log('Server closed');
});
}, 3000);
});
As expected, server starts and after 3000 milliseconds it stops.
But, if within these 3000 milliseconds I make a request to this server, the stopServer is called, however the server is not closed.
I'm sure this line this.server.close(callback); gets executed, but doesn't close the server as I expect.
How can I fix that?
Is a request to the server changing the server instance in a way that needs a special handling?
Later edit:
I would like to add some precision now that I left the code running. It seems the server does get closed, however not instantly, but after an amount of time that I don't understand, no longer than 5 minutes.
So the close operation seems to be delayed. Can I make it instant somehow?
While #jfriend00 was correct that node.js keeps running until all exiting sockets are finished, the process.exit solution was a bit too radical for my use case and I needed a cleaner solution to close the server gracefully.
Looking into getConnections only added more confusion since it didn't function as expected. (for example it returned 2 connections even if I didn't make any request).
I also looked into server.listening but it returned false even if the server accepted more requests. Perhaps accepts connection from a client that made requests before closing the server.
Anyway, the solution for me was to use the http-shutdown lib which essentially adds the following .shutdown method to your server object.
function addShutdown(server) {
var connections = {};
var isShuttingDown = false;
var connectionCounter = 0;
function destroy(socket, force) {
if (force || (socket._isIdle && isShuttingDown)) {
socket.destroy();
delete connections[socket._connectionId];
}
};
function onConnection(socket) {
var id = connectionCounter++;
socket._isIdle = true;
socket._connectionId = id;
connections[id] = socket;
socket.on('close', function() {
delete connections[id];
});
};
server.on('request', function(req, res) {
req.socket._isIdle = false;
res.on('finish', function() {
req.socket._isIdle = true;
destroy(req.socket);
});
});
server.on('connection', onConnection);
server.on('secureConnection', onConnection);
function shutdown(force, cb) {
isShuttingDown = true;
server.close(function(err) {
if (cb) {
process.nextTick(function() { cb(err) });
}
});
Object.keys(connections).forEach(function(key) {
destroy(connections[key], force);
});
};
server.shutdown = function(cb) {
shutdown(false, cb);
};
server.forceShutdown = function(cb) {
shutdown(true, cb);
};
return server;
};
With this function, I can update my server as follows, and now stopServer works as expected:
var HTMLServer = function(path){
this.path = path;
this.server = connect().use(serveStatic(this.path));
this.startServer = function(callback){
this.server = addShutdown(this.server.listen(8080, callback));
};
this.stopServer = function(callback){
console.log("I was called");
this.server.shutdown(callback);
}
}
I'm using RTCMulticonnection MultiRTC script to capture and stream multiple user cameras.
I guess, If any user refresh page then session keeps alive in background even I've added page unload event
window.onbeforeunload = function() {
rtcMultiConnection.close();
};
my problem is that joining a room after refresh keeps throwing error/warning message Session-Descriptions not found. Rechecking...
Why session description not found? I've checked RTCMulticonnection js and this error is throwing from below function.
function joinSession(session, joinAs) {
if (isString(session)) {
connection.skipOnNewSession = true;
}
console.log(session);
console.log(joinAs);
if (!rtcMultiSession) {
log('Signaling channel is not ready. Connecting...');
// connect with signaling channel
initRTCMultiSession(function() {
log('Signaling channel is connected. Joining the session again...');
setTimeout(function() {
joinSession(session, joinAs);
}, 1000);
});
return;
}
// connection.join('sessionid');
if (isString(session)) {
if (connection.sessionDescriptions[session]) {
session = connection.sessionDescriptions[session];
} else
return setTimeout(function() {
log('Session-Descriptions not found. Rechecking..');
joinSession(session, joinAs);
}, 1000);
}
// connection.join('sessionid', { audio: true });
if (joinAs) {
return captureUserMedia(function() {
session.oneway = true;
joinSession(session);
}, joinAs);
}
if (!session || !session.userid || !session.sessionid) {
error('missing arguments', arguments);
var error = 'Invalid data passed over "connection.join" method.';
connection.onstatechange({
userid: 'browser',
extra: {},
name: 'Unexpected data detected.',
reason: error
});
throw error;
}
if (!connection.dontOverrideSession) {
connection.session = session.session;
}
var extra = connection.extra || session.extra || {};
// todo: need to verify that if-block statement works as expected.
// expectations: if it is oneway streaming; or if it is data-only connection
// then, it shouldn't capture user-media on participant's side.
if (session.oneway || isData(session)) {
rtcMultiSession.joinSession(session, extra);
} else {
captureUserMedia(function() {
rtcMultiSession.joinSession(session, extra);
});
}
}
Upgraded my application with RTCMulticonnection version v3, also used socket.io instead of WebSocket, earlier I was using WebSocket.
When I press F5 repeatedly without stopping the same socket.username enters the room, generating a list of duplicate names. By spending time, this sockets duplicated vain automatically disconnecting .
I tried with these lines after disconnecting and not work!
delete io.sockets.adapter.sids[socket.id];
delete io.sockets.adapter.rooms[socket.id];
How can I avoid this? Tks.
// SERVER.JS
io.set('authorization', function (handshakeData, accept) {
if (handshakeData.headers.cookie) {
handshakeData.cookie = cookie.parse(handshakeData.headers.cookie);
handshakeData.sessionID = cookieParser.signedCookie(handshakeData.cookie['sec_session_id'], 'secret');
if (handshakeData.cookie['sec_session_id'] != handshakeData.sessionID) return accept('Cookie is invalid.', false);
} else return accept('No cookie transmitted.', false);
accept(null, true);
});
io.sockets.on('connection', function(socket) {
socket.on('adduser', function(name, room, picuser, codeuser, operation) {
var handshakeData = socket.request;
var cookies = cookie.parse(handshakeData.headers.cookie);
if(name.length > 0)
{
if (!io.sockets.adapter.sids[socket.id][room]) {
var newCookie = changeCookie(cookies.sec_session_id);
cookiesSockets[cookies.sec_session_id] = newCookie;
cookiesSockets2[newCookie] = socket.id;
socket.color = getRandomColor();
socket.username = name;
socket.room = room;
socket.newid = newCookie;
socket.picuser = picuser;
socket.codeuser = codeuser;
// add the client's username to the global list
usernames[name] = name;
// send client to room
socket.join(room);
// echo to client they've connected
socket.emit('updatechat', socket.picuser, socket.codeuser, socket.color, getClock(), 'You', 'join in '+room+'.', room, 0, 0, getClock2(), operation);
// echo to room 1 that a person has connected to their room
socket.broadcast.to(room).emit('updatechat', socket.picuser, socket.codeuser, socket.color, getClock(), name,'join in room.', room, 0, 0, getClock2(), 3);
//update id's private chats on socket disconnecting and connecting...
if (SocketsUsernames[name])
{
if (SocketsUsernames[name]!=cookies.sec_session_id)
{
var cookieReal = SocketsUsernames[name];
var cookieChanged = cookiesSockets[cookieReal];
delete cookiesSockets[cookieReal];
delete cookiesSockets2[cookieChanged];
socket.broadcast.to(room).emit('updatechatpvt', room, cookieChanged, newCookie);
}
}
SocketsUsernames[name] = cookies.sec_session_id;
updateUsers(room);
}
else
socket.emit('updatechat',null, null, null, null, null, null, room, null, null, null, 7);
}
});
socket.on('disconnect', function(){
if (socket.username)
{
// remove the username from global usernames list
delete usernames[socket.username];
socket.leave('myroom');
}
});
});
//CLIENT.JS
socket.on('connect', function (){
// Retrieve the object from storage CHATROOM!!
var retrievedRooms = localStorage.getItem('myRooms');
console.log('retrievedRooms: ', JSON.parse(retrievedRooms));
if (retrievedRooms && Object.keys(JSON.parse(retrievedRooms)).length>0)
Object.keys(JSON.parse(retrievedRooms)).forEach(function(key) {
if (key)
{
myRooms[key]=key;
socket.emit('checkuser', key, function(callback){
if(!callback) socket.emit('adduser', $('#modalPerfil').attr('data-username'), key, $('#modalPerfil').attr('data-picuser'), $('#modalPerfil').attr('data-userid'), 1);
});
}
});
});
// SOLUTION IN CLIENT.JS - setTimeout
socket.on('connect', function (){
// Retrieve the object from storage CHATROOM!!
var retrievedRooms = localStorage.getItem('myRooms');
console.log('retrievedRooms: ', JSON.parse(retrievedRooms));
if (retrievedRooms && Object.keys(JSON.parse(retrievedRooms)).length>0)
Object.keys(JSON.parse(retrievedRooms)).forEach(function(key) {
if (key)
{
myRooms[key]=key;
setTimeout(function(){
socket.emit('checkuser', key, function(callback){
if(!callback) socket.emit('adduser', $('#modalPerfil').attr('data-username'), key, $('#modalPerfil').attr('data-picuser'), $('#modalPerfil').attr('data-userid'), 1);
});
}, 1000);
}
});
});
This code is causing you a couple problems:
socket.onclose = function (reason) {
roomsToLeaveClient = socket.rooms;
Object.getPrototypeOf(this).onclose.call(this, reason);
});
First off, There's an extra ) at the end that is closing off your .on('connect') block.
That then causes your socket.on('disconnect', ...) code to be outside the scope of socket so it probably isn't getting called appropriately. I'd suggest you don't need to listen for a close event at all. You can just listen for the disconnect event and do any of your cleanup business there.
And, since you're off one set of parens in that code, there's probably a corresponding error somewhere else in your code that still allows things to parse properly. Putting your code in a linter like http://jshint.com shows these types of errors.
Then, if you really did want to override .onclose, you can't just call the prototype version. Instead, you have to save the version that was in place before you assign your override and call that one. That's the only way the is compatible with any other overrides. But, you really ought to just be using .on() with event names to watch socket lifecycle things, then you don't have to worry about proper overrides in any way.
I can't tell right away if there are other issues, but this is a glaring one that needs to be fixed first.
Also, you do not need your roomsToLeaveClient handling. socket.io will automatically remove a disconnecting client from any rooms that it is in. That is not something you need to do.
If you want to know what rooms a socket is in so you can tell the other members of that room that you are leaving, then socket.io has a data structure that tells you exactly what rooms the socket is in and you can just iterate that data structure. You don't have to keep track of that yourself.
I want to send the same messages many times in a row, but i need to use a loop. When I use a loop though, no messages are sent. I am using amqp in Nodejs.
Here is the working code for sending a single messages. What should I do to send many. I have already tried just wrapping a while loop around the connection.publish part and nothing was sent.
var amqp = require('amqp');
var connection = amqp.createConnection({url: "amqp://tester:tstpsswrd#10.4.52.115:5672"});
connection.on('ready', function () {
connection.queue('my-queue', function (q) {
connection.publish('my-queue', 'hi');
});
});
I'm positive that I am doing something stupid wrong here, or maybe missing something. First time with rabbitmq.
Update, Loop example
var amqp = require('amqp');
var connection = amqp.createConnection({url: "amqp://tester:tstpsswrd#10.4.52.115:5672"});
connection.on('ready', function () {
connection.queue('my-queue', function (q) {
while(true){
connection.publish('my-queue', 'hi');
}
});
});
In practical scenario you can not and should not be having a infinite loop as such for writing to a message broker. There have to be some event based thing or a proper defined number.
Try this code you can use the for loop according to your requirement:
var amqp = require('amqp');
var connection = amqp.createConnection({ host: 'localhost', port: 5672});
connection.on('ready', function () {
for(var i=0; i<1000; i++){
var status = writeOnQueue("testing the queue"+i);
}
});
function writeOnQueue(xml){
var msg = xml;
console.log(msg);
try{
connection.exchange('test-exchange', {confirm: true},function(exchange) {
publish = exchange.publish('my-queue',msg, { mandatory: false });
console.log('sent the message success test-exchange');
return true;
});
}
catch(e){
console.log('Some error occured.'+ e);
}
}