socket.io Websocket connection inside a HTML5 SharedWorker

Question

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'm not certain (this is why it's a comment, not an answer), but I'm pretty sure that websockets in a shared-worker aren't implemented for all browsers. Last I checked, Firefox had major issues with this... but good luck! — Myst
Hi! Myst, thanks for the comment. I'm planning to use it with Chrome only. — Zeecher Game

Zeecher Game Zeecher Game · Accepted Answer · 2015-12-03T09:04:27

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);

socket.io Websocket connection inside a HTML5 SharedWorker

2 Answers