在 FireFox 插件中使用 websocket 立即断开连接答案

【问题标题】：Immediate Disconnection using websocket in FireFox Addon在 FireFox 插件中使用 websocket 立即断开连接
【发布时间】：2016-02-16 16:55:48
【问题描述】：

我一直致力于开发与运行 WebSocket 服务器的本地应用程序交互的浏览器扩展。 Safari 和 Chrome 扩展非常容易实现，在对 FF 开发感到头疼之后，我认为我可以像在其他浏览器中一样实现 WebSockets。但是我遇到了一些问题。

我了解我无法在“主”js 文件中直接创建 WebSocket，因此尝试使用我在互联网上找到的解决方法：

https://github.com/canuckistani/Jetpack-Websocket-Example 使用 page-worker 作为 main 和 WebSocket 代码之间的一种代理。当我实现此代码时，我的 WebSocket 连接立即出错，只有 {"isTrusted":true} 作为唯一信息。

我还尝试使用 hiddenframe，因为这似乎是 1Password 在其 FF 插件中处理 websocket 通信的方式，但这也会导致同样的即时错误。

当我在我的普通 FF 实例中简单地打开到我的服务器的 websocket 连接时，它可以完美连接，但到目前为止，我还没有从插件中得到任何工作。

使用以下方法制作 pageWorker：

var pw = pageWorker.Page({
    contentUrl: self.data.url('com.html'),
    contentScriptFile: self.data.url('com.js')
})

com.html:

<!DOCTYPE HTML>
<html>
<body>
</body>
</html>

com.js:

document.onready = launchCom();
// Could this need to be on ready?

function launchCom() {
    console.log("[com.js] launchCom Called");
    var wsAvailable = false;
    if ("WebSocket" in window) {
        console.log("[com.js] Detected Websocket in Window, attempting to open...");
        // WebSocket is supported.
        ws = new WebSocket('ws://localhost:9001');
        wsAvailable = true;
    } else {
        console.log("[com.js] Websocket is not supported, upgrade your browser!");
    }
}

ws.onmessage = function(event) {
  console.log(event.data);
}

ws.onopen = function(evt) {
    console.log("[com.js] ws opened. evt: " + evt);
}

ws.onerror = function(evt) {
    console.log("[com.js] ws error: " + JSON.stringify(evt));
}

运行此结果：

console.log: xxx: [com.js] launchCom Called
console.log: xxx: [com.js] Detected Websocket in Window, attempting to open...
console.log: xxx: [com.js] ws error: {"isTrusted":true}
console.log: xxx: [com.js] ws closed. evt: {"isTrusted":true}

任何帮助将不胜感激！

【问题讨论】：

标签： javascript firefox websocket firefox-addon firefox-addon-sdk

【解决方案1】：

我也陷入了类似的情况，因为 websocket 无法直接在 main.js 中实现。我也和你一样，可能是服务器拒绝连接。我的代码片段如下所示：

main.js

var wsWorker = require('sdk/page-worker').Page({
  contentURL: "./firefoxScript/webSocket.html",
  contentScriptFile : ["./firefoxScript/webSocket.js"]
});

webSocket.html

<html>
<head>        
    <title></title>
</head>
<body>
</body>
</html>

webSocket.js

var ws = new WebSocket('ws://localhost:9451'); 
  ws.onopen = function() {
  console.log('Connection open...');
};

ws.onclose = function() {
  console.log('Connection closed...');
};

ws.onmessage = function(event) {
   console.log('Message recieved...');
};

ws.onerror = function(event) {
  console.log('Connection Error...');
};

这对我来说非常好用。

【讨论】：

【解决方案2】：

我已经解决了这个问题：

我在我的 OS X 应用程序中使用https://github.com/zwopple/PocketSocket 作为我的服务器，PocketSocket 和 FF 似乎存在问题。

更改 PocketSocket 的 PSWebSocketDriver.m 第 87 行代码后

[[headers[@"Connection"] lowercaseString] isEqualToString:@"upgrade"]

到

[[headers[@"Connection"] lowercaseString] containsString:@"upgrade"]

根据https://github.com/zwopple/PocketSocket/issues/34，我能够使用原始代码从 FF 插件打开 WebSocket 连接，但服务器在消息上出错。

在 about:config 中将 network.websocket.extensions.permessage-deflate 设置为 false 允许发送消息，所以我添加了

 require("sdk/preferences/service").set("network.websocket.extensions.permessage-deflate", false);

到我的 main.js，一切正常！

PocketSocket 代码的微小改动对服务器与其他 WebSocket 客户端的交互没有任何影响。

【讨论】：