如果我在客户端创建后不立即连接，则使用 sockjs-client 和 stompjs 的 WebSocket 无法连接

Question

我只在页面加载时尝试连接到远程一次，然后在必要时订阅频道。

为了保证代码可以被不同页面共享，我编写了如下代码（闭包），并将函数

webSocket

导出为：

export function webSocket() {
  const socket = new SockJS(WebSocketEndPoint.RESOURCE_CONTROLLER);
  const stompClient = Stomp.over(socket);
  let isConnected = false;
  function subscribe(address, callback) {
    if (isConnected) {
      stompClient.subscribe(address, callback);
    } else {
      stompClient.connect({}, () => {
        isConnected = true;
        stompClient.subscribe(address, callback);
      });
    }
  };
  function subscribeRealtimeExecOutput(addr, callback){ 
      subscribe(addr, callback);
  }

  return {
    subscribeRealtimeExecOutput,
  };
}

还有

在其他页面使用如下：

import { webSocket } from '../../websocket/websocketService';

//in the constructor
this.subscriber = webSocket().subscribeRealtimeExecOutput;

//used when required
this.subscriber(pane.jobIdentifier, (data) => {
  console.log(data);
});

我希望

connect

方法只会在同一页面中运行一次，然后订阅者将根据连接订阅不同的频道。

但是，它似乎不起作用 - 连接将不会建立，因此浏览器只会提示我打开 Web 套接字...

有人可以帮忙吗？非常感谢您的帮助。

此致，赫伦

Answer 1

在我自己进行本地测试后，我发现在创建client并直接connect到服务器后，一切都像魅力一样。所以我重构了我的代码subscribe如下：

function subscribe(address, callback) {
    if (isConnected) {
      stompClient.subscribe(address, callback);
    } else {
      stompClient = Stomp.over(socket);
      isConnected = true;
      stompClient.connect({}, () => {
        stompClient.subscribe(address, callback);
      }, () => {
        console.error('Sorry, I cannot connect to the server right now.');
      });
    }
  }

如果连接仍未建立，我再次创建client并目录设置isConnected并连接到服务器。

后来，我只是对发生的事情感到好奇，并在这方面寻找一些有趣的东西：

http://jmesnil.net/stomp-websocket/doc/

创建 STOMP 客户端后，它必须调用其 connect() 方法来有效连接 STOMP 服务器并对其进行身份验证。

此外

但是如果连接失败怎么办？ connect() 方法接受一个可选的 error_callback 参数，如果客户端无法连接到服务器，将调用该参数。

还有来自stackoverflow的帖子，进一步证实了我的重构

我创建了一个新的 Stomp.Client 实例，因为当前实例的 Web Socket 已关闭，并且一旦关闭就无法重新打开 Web Socket。

Answer 2

我想在这篇文章中添加一条重要信息。我遇到了原始问题中描述的相同问题，但是在我在 javascript 中声明/初始化 websocket 后，直接调用了

stompclient.connect();

函数。

我的错误代码如下所示：

var socket = new SockJS('/game-websocket');
stompClient = Stomp.over(socket);

window.onload = function (){
    stompClient.connect({}, function (frame) {

        ...

    }
}

我遇到的错误是由于将声明/初始化与

window.onload = function (){}

行的连接分开而引起的。显然，窗口加载所需的时间以某种方式破坏了以下 Websocket 连接。

在我的例子中，这种分离并不是真正需要的，我的固定代码如下所示：

window.onload = function (){

    var socket = new SockJS('/game-websocket');
    stompClient = Stomp.over(socket);

    stompClient.connect({}, function (frame) {

        ...

    }
}