如何维护页面之间的WebSockets连接?

Rya*_*hel 30 html javascript websocket

在我的一个脚本上,我有这个代码:

var webSocket = window.WebSocket || window.MozWebSocket;
window.ws = new webSocket('ws://64.121.210.140:2585/consoleappsample', 'my-protocol');
Run Code Online (Sandbox Code Playgroud)

哪个工作正常.但是,当用户更改页面时,我必须重新建立连接.我相信这会导致我的代码出现问题,因为如果客户端将数据发送到服务器然后更改页面,则可能无法接收数据并且正在发生竞争条件.

我试图把它window.ws放在全球范围内,但它似乎没有解决问题.WebSockets连接是否有任何方法可以在页面之间保留,因此不需要不断重新建立连接?

ZER*_*ER0 25

您提到的全局范围始终与JavaScript上下文相关,并且为每个窗口创建一个Context(并在从内存中卸载文档时销毁).因此,您的努力是无用的:如果用户更改页面,则无法保持连接打开.当然,您可以将您的webapp作为"单页"应用程序,其中所有数据都使用XMLHttpRequest/ajax/WebSocket加载.因此,离开页面意味着离开/关闭应用程序,并且有意义关闭套接字.

另一种旧方法可以将您的页面放在一个框架中,用户只能在框架中导航(即使它占据了窗口的整个大小).通过这种方式,您可以在最顶层的窗口中创建WebSocket,永远不会更改(这也意味着位置栏中显示的URL将始终相同).

说,我同意@dystroy:你的应用程序应该始终能够处理这种情况 - 用户可能会遇到一些网络问题并暂时失去连接,即使它没有离开页面.

  • 我知道这是一个旧的回复,但如果一个应用程序让用户总是更改页面,那么这会不会断开连接并重新连接的网络套接字服务器? (3认同)

kan*_*aka 19

您可以尝试在共享WebWorker中创建WebSocket连接,该连接允许来自同一域的多个页面共享执行上下文.但是,目前还不清楚共享工作者是否在页面重新加载或替换中持续存在:共享Web工作者是否在单页重新加载,链接导航中持续存在

此外,共享WebWorkers目前限制浏览器支持 (webkit和Opera).

更新:

由于单个共享Web工作者可以提供多个页面,因此实现比普通Web工作者稍微复杂一些.

这是一个使用WebSockets并可以在其间共享的共享Web worker示例

首先是HTML:

<!DOCTYPE html>
<html>
<body>
<script>
    var worker = new SharedWorker("shared.js");
    worker.port.addEventListener("message", function(e) {
        console.log("Got message: " + e.data);
    }, false);
    worker.port.start();
    worker.port.postMessage("start");
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

实现共享工作者的Javascript shared.js:

var ws = null
var url = "ws://" + location.hostname + ":6080"
self.addEventListener("connect", function(e) {
    var port = e.ports[0]
    port.addEventListener("message", function(e) {
        if (e.data === "start") {
            if (ws === null) {
                ws = new WebSocket(url);
                port.postMessage("started connection to " + url);
            } else {
                port.postMessage("reusing connection to " + url);
            }
        }
    }, false);
    port.start();
}, false);
Run Code Online (Sandbox Code Playgroud)

我已经确认这适用于Chrome 52.

  • 很好的建议,遗憾的是对我没用.它缺乏对浏览器http://caniuse.com/#feat=sharedworkers的支持. (2认同)