一个html5页面怎么创建多个websocket

Posted 2023-04-19

参考技术A 1. WebSocket API简介
首先看一段简单的javascript代码，该代码调用了WebSockets的API。

[javascript] view plaincopy
var ws = new WebSocket(“ws://echo.websocket.org”);

ws.onopen = function()ws.send(“Test!”); ;

ws.onmessage = function(evt)console.log(evt.data);ws.close();;

ws.onclose = function(evt)console.log(“WebSocketClosed!”);;

ws.onerror = function(evt)console.log(“WebSocketError!”);;

这份代码总共只有5行，现在简单概述一下这5行代码的意义。
第一行代码是在申请一个WebSocket对象，参数是需要连接的服务器端的地址，同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。
第二行到第五行为WebSocket对象注册消息的处理函数，WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror，当Browser和WebSocketServer连接成功后，会触发onopen消息；如果连接失败，发送、接收数据失败或者处理数据出现错误，browser会触发onerror消息；当Browser接收到WebSocketServer发送过来的数据时，就会触发onmessage消息，参数evt中包含server传输过来的数据；当Browser接收到WebSocketServer端发送的关闭连接请求时，就会触发onclose消息。我们可以看出所有的操作都是采用消息的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。

将 Websocket-Connection 保持在多个页面上

【中文标题】将 Websocket-Connection 保持在多个页面上

【英文标题】：Hold Websocket-Connection over several pages

【发布时间】：2015-03-30 15:31:22

【问题描述】：

我需要一个想法来设计一个与我的 C++-Webserver 通信的复杂 html/javascript(jQuery) 系统。

直到现在我有一个主 index.html 并且我通过事件加载子模块：

$(".MainButton").click(function()
   $("#swap").load($(this).attr('alt'));
);

现在的问题是每个子模块都需要一个 Websocket 连接，我不想为我正在加载的每个子模块打开一个新的连接。

是否可以打开全局 Websocket 连接..

var ws = new WebSocket("ws://localhost:800/stream");

.. 并在每个子页面中使用 ws？

非常感谢。

【参考方案1】：

您的问题的标题和内容不同。至于内容，如果你通过 jQuery 的 load 方法加载 HTML 片段（而不是页面），这些片段会合并到文档中，结果只有那个文档存在。如果是您的情况，您为什么不通过将ws 设为window 的全局变量并在子模块中使用它来打开main.html 上的连接？只要子模块的URI与CORS同源或跨源，就可以访问和操作main.html的ws。

但是，如果您坚持应该在多个页面上保持连接，包括刷新 main.html 作为您的问题的标题，那么除非您使用 Single-page application，否则现在是不可能的。详情见以下：

How to maintain a WebSockets connection between pages? Do Shared Web Workers persist across a single page reload, link navigation http://tavendo.com/blog/post/websocket-persistent-connections/