使用 stomp 和 sockjs 的 spring websockets 在打开新选项卡时创建新连接答案

【问题标题】：spring websockets using stomp and sockjs create new connection on opening new tab使用 stomp 和 sockjs 的 spring websockets 在打开新选项卡时创建新连接
【发布时间】：2023-10-14 10:29:01
【问题描述】：

我正在使用没有 spring security 的 stomp 和 sockjs 使用 spring websockets。当我在浏览器中有一个我的应用程序时，会建立新的套接字连接，但是当我在同一个浏览器中打开另一个选项卡时，它也会创建新的套接字连接。所以我想停止这种行为并希望它使用相同的连接 ID在打开新标签时。它是一个聊天应用程序。使用此博客中的代码：

https://github.com/salmar/spring-websocket-chat

谁能给我工作代码如何在本地存储中存储连接 n 从本地存储中检索新选项卡中存储的套接字连接？

            function connect() {
            var socket = new SockJS('/spring-mvc-java/chat');
            stompClient = Stomp.over(socket);  
            stompClient.connect({}, function(frame) {

                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/messages', function(messageOutput) {
                    showMessageOutput(JSON.parse(messageOutput.body));
                });
            });
        }

【问题讨论】：

您需要存储该连接 ID，以便可以跨选项卡共享它。 LocalStorage 是最简单的解决方案。
你能给我提供任何示例链接吗？
好的，假设您有连接 ID id_1，那么您可以使用 localStorage.setItem('conId', 'id_1') 将其存储在 LocalStorage 中，要在另一个选项卡中获取此 ID，您可以使用 localStorage.getItem('conId')。使用此 ID，您必须使用此保存的连接 ID 在选项卡中打开新的 WebSocket 连接。
好的，谢谢，连接 id id_1 你在这里指的是用户的 websocket 会话 id？
无论您使用什么来识别不同的会话，它都可能是一个请求参数，只是一个路径变量或标头。

标签： spring websocket stomp sockjs

【解决方案1】：

window 中的本地存储是解决上述问题的最简单方法。将会话 ID 存储在本地存储对象中，您可以跨其他选项卡访问。从对象中检索会话 ID 并重用于连接。

例子：

localStorage.setItem('sessionId', '123abc');

在其他选项卡中检索相同的对象：

localStorage.getItem("sessionId");

您可以参考以下链接了解如何使用 localStorage： https://developer.mozilla.org/en/docs/Web/API/Window/localStorage

【讨论】：

你能提供我使用套接字连接的代码吗
我已经在使用该代码，baeldung.com/websockets-spring 在该示例中我没有使用任何本地存储内容
function connect() { var socket = new SockJS('/spring-mvc-java/chat'); stompClient = Stomp.over(socket); stompClient.connect({}, function(frame) { setConnected(true); console.log('Connected: ' + frame); stompClient.subscribe('/topic/messages', function(messageOutput) { showMessageOutput(JSON.parse (messageOutput.body)); }); }); }