websocket怎样共享连接

1.网站为三栏式布局
2.因为头部会一直保持 ，将websocket的消息接收放在头部，一直能接收消息没有问题
3.现有一页面，需要根据消息内容动态生成，上述方式,在加载该页面后，似乎找不到其本身的元素，生成内容失败
4.解决该问题，是在本页面做消息接收，同时在头部也做接收。但这样要开两个websocket,连接重复了，正确方式 是怎样呢？

这是纯前端的问题
我现在告诉你用vue，用单页模式。栏目用路由切换你肯定不干。

所以我只能告诉你跨IFrame通讯了。当然个人说，我们只是跨框架通讯，我不建议你弄生成后找元素。
你的top框架只是发消息就好，找元素生成dom，在接收的框架里处理。

虽然现在跨框架通讯有很多种方式，我个人建议用 postMessage 和监听来做
下面的js只是个例子用法，告诉你个过程。具体步骤你可以自己根据代码关键词百度

function exipapp() {
            window.parent.postMessage("callexitapp", '*'); //向父框架发送消息
        };
        
        window.addEventListener('message',
            function (e) {
                if (e.data == "callexitapp_end") { //等待父框架处理完毕后，回发的callexitapp_end
                   hookclike();
               }
            });

//这里我用父子框架，你要对其他框架发其实是一样的，比如window.parent.top 给父窗口下的top框架发

下面也是一个随便搜的例子，只是告诉你有这么一种方式去通讯罢了
https://hbiao68.blog.csdn.net/article/details/112693419

它允许通过单个 TCP 连接实现双向通信。WebSocket 通常用于实时通信应用程序，如聊天应用程序、实时游戏等。

在 WebSocket 中，连接的共享是通过客户端和服务器之间的长连接实现的。这意味着客户端与服务器只需建立一次连接，然后可以在连接保持打开的情况下进行多次交互，实现实时数据传输。这与传统的 HTTP 请求-响应模式不同，不需要为每个请求都建立新的连接。

使用 WebSocket 共享连接的步骤如下：

客户端与服务器建立 WebSocket 连接。客户端通过 HTTP 协议发送一个特殊的握手请求，服务器验证请求并在成功验证后接受连接。

连接建立后，客户端和服务器可以通过发送消息进行实时通信。消息可以是文本、二进制数据等。

连接保持打开，客户端和服务器可以随时发送消息，不需要每次都重新建立连接。

通过共享连接，WebSocket 提供了低延迟、高性能的实时通信能力，促进了实时应用程序的开发。