In the project I've been working on, I found a problem with Stomp JS client disconnect.
It's about a case when user closes the tab in browser or when there's a problem with internet connection. In other words, I want to be able to handle this disconnect java side (server side). Is it possible?
I already have code that handles Websocket opening and it works fine, what I want to achieve is to handle connection closing (both expected and unexpected cases)
Here's a piece of my HTML file that includes Stomp JS related code (I can provide Java code as well if it's necessary):
<script type="text/javascript">
$(document).ready(function() {
connect();
});
var stompClient = null;
function connect() {
var socket = new SockJS('/lock-document');
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/notify-open-documents/${id}', function (messageOutput) {
console.log('Receiving message: ' + JSON.parse(messageOutput.body));
});
sendName();
});
}
function disconnect() {
if (stompClient !== null) {
stompClient.disconnect();
}
console.log("Disconnected");
}
function sendName() {
console.log("Sending message : " + JSON.stringify({'documentId' : "${id}" }));
stompClient.send('/ws/lock-document', {}, JSON.stringify({'documentId': "${id}"}));
}
</script>
Related
I'm utilizing websockets for passing json messages but I don't want multiple ws connections if multiple tabs are open.
To reduce the connections I want to implement a single ws connection object that can send/receive messages to and from all tabs to my website. The object should forward the json to all tabs and each tab will process the message.
I've been looking at web/shared/service workers and I'm not sure the 2018 path to solve the issue and browser support seems to be a concern as well.
Looks like shared workers are not supported in Safari in support of service workers. Chrome/ff/opera seem to support shared workers.
In short it's a little confusing, bit of a mess and I want to know the best path forward with the best support.
If you know of a good resource, example code to implement ws with your suggested method please provide it as well.
After further research I've decided to implement web workers.
At this point I'm having success and I wanted to add an important piece that I got stuck on for future readers.
In my worker.js file I put this at the top to kick things off. The importScripts function threw an error if I didn't do it otherwise.
Also for the sake of helping, this is my skeleton code in my worker.js file that works. Message processing from the html pages are separated from the ws messages received from the server. You can start, stop the worker from the html page.
All tabs will get the messages from the worker, each page needs to process the messages as needed.
I'm also using robust-websockets so it auto reconnects from this github as this code works with web workers and is maintained. There is another project by the same name that isn't as updated by the time of this post. The reconnecting-websockets does not support web workers and you will get an error. - https://github.com/nathanboktae/robust-websocket
html
<script>
document.addEventListener('DOMContentLoaded', init);
function init(){
worker = new Worker('js/ws_worker.js');
worker.addEventListener('message', workerMessaged);
worker.postMessage({ "args": '<username_admin>', "cmd": 'start', "url": '127.0.0.1:8000' });
worker.postMessage({ "message": 'Initialize new worker'});
console.log('Message posted to worker, start');
}
// Received a json message from the Worker, process it.
function workerMessaged(ev){
console.log('Message received from worker');
console.log(ev.data);
worker.postMessage({ "cmd": 'message', "message": 'Sending reply over ws'});
}
worker.js
// proper initialization
if( 'function' === typeof importScripts) {
importScripts('robust-websocket.js');
var WebSocket;
self.addEventListener("message", function(e) {
var args = e.data.args;
var cmd = e.data.cmd;
var roomName = e.data.args;
var url = e.data.url;
var message = e.data;
// Code to process ws messages from the server
WebSocket.onmessage = function(event) {
console.log(" WebSocket message received: " + event.data, event);
self.postMessage(event.data);
};
WebSocket.onerror = function(event) {
console.log(" WebSocket message received: " + event.data, event);
self.postMessage(event.data);
};
if (cmd === 'start') {
WebSocket = new RobustWebSocket(
'ws://' + url +
'/ws/' + roomName + '/');
console.log('Connected via websockets');
/* Send initial message to open the connection and finalize the ws object*/
WebSocket.onopen = function() {
var obj = { "message": "hello" };
var json = JSON.stringify(obj);
WebSocket.send(json);
};
} else if (cmd === 'stop') {
WebSocket.onclose = function() {
console.log('Closing WebSocket');
WebSocket.close();
console.log('Closed WebSocket');
console.log('Terminating Worker');
self.close(); // Terminates the worker.
};
} else if (cmd === 'message') {
WebSocket.onopen = function() {
var json = JSON.stringify(message);
WebSocket.send(json);
};
console.log('message sent over websocket');
console.log('message');
} else {
console.log('logging error ' + e.data);
console.log(e.data);
self.postMessage('Unknown command: ');
}
}, false);
};
I'm working on socket room and i try to disconnect from client side when i refresh the page, the problem is in console i receive message that socket id is disconnected, and another socket id generated but the old socket still active
here is my code in client side :
var roomSocket = io.connect("http://mysitehere.com:5001", {'forceNew': true});
var room = port;
roomSocket.on('connect', function () {
roomSocket.emit('starting', room);
console.log('emit connection to room');
});
roomSocket.on('connected', function () {
console.log('connected user');
});
roomSocket.on('message', function (data) {
console.log('Incoming message:' + data);
});
$(document).unload(function () {
roomSocket.disconnect();
});
my code in server js
socket.on('disconnect', function (data) {
console.log('------------------------------------');
console.log("DISCONNECTION : " + socket.id);
console.log('------------------------------------');
});
and the result :
i'm using the spring web socket , it's a chat web socket app, every user msg will be delivered to all users, this below my home.html
function connect() {
var socket = new SockJS('http://192.168.1.115:8080/ROOT/hello');
stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
setConnected(true);
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/greetings', function(greeting) {
console.log(greeting);
console.log("greetinggggggggg");
showGreeting(JSON.parse(greeting.body).content);
});
});
}
function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log("Disconnected");
}
function sendName() {
var name = document.getElementById('name').value;
stompClient.send("/app/hello", {}, JSON.stringify({
'name' : name
}));
}
I want to use a unity3d app as client, actually i'm using socket io to connect to a web socket endpoint.
socket io link on assets store https://www.assetstore.unity3d.com/en/#!/content/21721
i could connect to the endpoint but i could not find how to subscribe to /topic/greetings as
stompClient.subscribe('/topic/greetings', function(greeting){
console.log(greeting);
console.log("greetinggggggggg");
showGreeting(JSON.parse(greeting.body).content);
});
});
Thanks
I am using the following code to create/subscribe to a topic and handle the messages. Sometimes the connection gets lost and the error says:
Whoops! The connection was lost...
I would like to know if there is a way to reconnect it. Is it possible in the error callback or define the whole code in a method and call it recursively in error callback ?
$(document).ready(function () {
........
...............
try {
var socket = new SockJS("${createLink(uri: '/stomp')}");
var client = Stomp.over(socket);
client.connect({}, function () {
client.subscribe("/topic/${userInstance?.username}",
function (message) {
............
....................
});
});
} catch (error) {
console.log("ERROR: " + error.toString());
}
});
I managed to do it using failure callback and connect again. It will keep trying as long as it will fail.
This is what I am using in a Polymer element:
ready: function() {
this.connectWs();
},
connectWs: function() {
this.socket = new WebSocket(this.socketUrl);
this.stompClient = Stomp.over(this.socket);
this.stompClient.debug = null;
this.stompClient.connect({},
function(frame) {
// Connection OK
}.bind(this),
function(e) {
console.error(e, "Reconnecting WS", this.socketUrl);
window.setTimeout(function() {
this.connectWs();
}.bind(this), 2500);
}.bind(this)
);
},
I hope you all are doing well. I'm trying to establish connection to socket.io server from inside of the worker.js file using importScripts which loads the socket.io-client js file which is in the same directory with worker.js. After loading socket.io-client
by using var socket = io.connect('http://38.98.xxx.xxx:6000'); I am trying to establish connection to socket.io server on different host, but it ain't working. Please point me in the right direction.I appreciate any help.
<script>
var worker = new SharedWorker("http://baseUrl.com/js/push/worker/worker.js");
worker.port.addEventListener("message", function(e) {
console.log("Got message: " + e.data);
}, false);
worker.port.start();
worker.port.postMessage("start");
</script>
worker.js
importScripts('socket.io.js');
var socket = io.connect('http://38.98.154.167:6000');
var connections = 0;
self.addEventListener("connect", function(e) {
var port = e.ports[0];
connections ++;
port.addEventListener("message", function(e) {
if (e.data === "start") {
port.postMessage('hello');
}
}, false);
port.start();
}, false);
socket.on('connect', function () {
port.postMessage('connect');
});
socket.on('disconnect', function () {
port.postMessage('disconnect');
});
I figured it out. Just had to move
socket.on('connect', function () {
port.postMessage('connect');
});
socket.on('disconnect', function () {
port.postMessage('disconnect');
});
into the self.addEventListener("connect", function(e) {});in the worker.js and change from var socket=io.connect('http://38.98.xxx.xxx:6000');
to
var socket = io('http://38.98.xxx.xxx:6000');
Here is the working example is case if anybody needs.
worker.js
importScripts('socket.io.js');
var socket = io('http://38.98.xxx.xxx:6000');
var connections = 0;
self.addEventListener("connect", function(e) {
var port = e.ports[0];
connections ++;
port.addEventListener("message", function(e) {
if (e.data === "start") {
port.postMessage('hello');
}
}, false);
port.start();
socket.on('push', function(pushed){
port.postMessage(pushed);
});
socket.on('connect', function () {
port.postMessage('connect');
});
socket.on('disconnect', function () {
port.postMessage('disconnect');
});
}, false);
There is a drop in replacement for const io = require('socket.io-client');
which runs the connection for the returned socket in a dedicated webworker. It is
const io = require('sockerworker.io');
const socket = io([url][, options]);
Instead of writing your own boilerplate for the webworker, you could use this. It is available here via npm. (disclosure: I am its author.)