Socket.IO connection disconnects when pop up is closed

Question

I'm using Firefox 48 which is supposed to be stable for WebExtensions. I've connected my test app with Socket.IO. As soon as I close the pop up, the socket.IO connection breaks. Here is the code:

manifest.json

{
    "manifest_version": 2,
    "name": "myapp",
    "version": "1.0",
    "browser_action": {
        "default_icon": {
            "96": "button/icon.png"
        },
    "default_title": "myapp",
    "default_popup": "popup/main.html"
    }
    "background": {
        "scripts": ["myclient.js"]
    }
}

main.html

<body>
<script src="/scripts/socket.io.js"></script>
<script src="/scripts/jquery-2.2.4.min.js"></script>
<script src="/myclient.js"></script>
</body>

myclient.js

var address = "localhost";
var client = io("http://" + address + ":17001/");
client.on("message", function () {
    $("#test").text("message");
});

My nodeJS server code

console.log("Server started");
var io = require("socket.io")(17001);
io.on("connection", function (socket) {
    var address = socket.request.connection.remoteAddress;
    console.log("Someone joined. Socket ID:", socket.id, address);
    io.emit("message");
    socket.on("disconnect", function () {
        console.log("Someone disconnected!");
    });
});

How can I stop the connection from getting disconnected? TIA

EDIT: Also tried the same extension with chrome because I read here that firefox doesn't support background, yet the problem of connection breaking persists.

EDIT 2: Updated my code as per Andrew said, still doesn't work:

"background": {
    "scripts": ["myclient.js", "/scripts/socket.io.js", "/scripts/jquery-2.2.4.min.js"],
    "page": "bgp.html"
}

I also tried the above code by commenting the scripts line, still doesn't work.
bgp.html

<!DOCTYPE html>
<html lang="en">
<body>
<script src="/scripts/socket.io.js"></script>
<script>
    var address = "localhost";
    var client = io("http://" + address + ":17001/");
</script>
</body>
</html>

If I remove the creation of connection from myclient.js, the connection doesn't happen at all! Which means the bgp.html isn't working.

Andrew Swan · Accepted Answer · 2016-08-12T21:20:39.567

1

It looks like you are loading myclient.js in both your background page and your popup page, but the version in the background page won't work since you haven't loaded the socket.io library there. The popup page does load socket.io so it works there but the popup page is ephemeral, it is unloaded (and any websockets etc that is created are cleaned up) when the popup is dismissed.

You didn't say exactly what you're trying to do but if you want a single long-lived socket.io connection, you're on the right track with the background page. The most expedient fix would be to create an actual background.html page and add <script> tags to load socket.io, then create your socket from the background page and have the popup page exchange messages with the background page to access the socket (which you do with runtime.sendMessage() or runtime.connect()).

Also tried the same extension with chrome because I read here that firefox doesn't support background, yet the problem of connection breaking persists.

The documentation you linked to is about a permission called "background" that Chrome supports but Firefox does not. Firefox does support background pages in webextensions.

In response to the second edit of the original question, you're getting close but the default content security policy for background pages disallows inline scripts. If you put your code into a separate .js file and reference it from a <script> tag it ought to work

edited Aug 12 '16 at 21:20

answered Aug 10 '16 at 23:14

Andrew Swan

1,268
6
7

Thank you for your reply, I updated my question. Unfortunately the connection doesn't get created. – Akash Agarwal Aug 11 '16 at 05:38
Do you have any solution? – Akash Agarwal Aug 13 '16 at 19:29
can you post the full code for an extension that exhibits the problem? – Andrew Swan Aug 14 '16 at 17:04
In the code above, the manifest references background scripts but not a background html page. You also have a background page with an inline script. Can you post (a link to) a full extension in which you've adopted the suggestions above but still cannot create a connection? – Andrew Swan Aug 16 '16 at 01:32
Here it is: https://github.com/akashaggarwal7/WebExtension.git I don't know why the exact link is not being shown as the link. Please copy the link text. I mentioned in the main post that I tried commenting the scripts line, still it won't work. Are you telling me that there should be no inline script in the background page? – Akash Agarwal Aug 16 '16 at 18:08
You still have an inline script in your background page which is disallowed by the default Content-Security-Policy. As I said in the edited answer above, the simplest fix is probably to move that code to a separate .js file and include it in `bgp.html` with a ` – Andrew Swan Aug 16 '16 at 19:14
Tried that as well, still the connection closes. I pushed the changes in the git repo. – Akash Agarwal Aug 17 '16 at 07:39
Update: the method works in chrome! But it won't work on firefox! :/ – Akash Agarwal Aug 17 '16 at 07:53
It works for me with Firefox Nightly. I ran `node server.js` then loaded the extension in Firefox and immediately saw this output from the server: `Someone joined. Socket ID: /#VaiaaxiEL7nzajPiAAAA ::ffff:127.0.0.1 ` – Andrew Swan Aug 17 '16 at 23:13
I don't know why but it works for me too now, on simple Firefox. Thank you for bearing with me all along :) – Akash Agarwal Aug 18 '16 at 05:58

Socket.IO connection disconnects when pop up is closed

1 Answers1