无法使用 Vue 插件连接到 WebSocket

Posted 2023-02-16

【中文标题】无法使用 Vue 插件连接到 WebSocket

【英文标题】：Unable to connect to WebSocket with Vue plugin

【发布时间】：2019-10-09 10:31:29

【问题描述】：

我想编写一个 vue 插件，以便在我的 Vue 应用程序中获得方便的 WebSocket 方法，例如 connect() 和 subscribe()。我在连接到 WebSocket 时遇到问题，它仅在我在挂载的钩子中调用 connect() 方法并加载整个页面时才有效（例如使用浏览器刷新按钮）。在另一种情况下，当我第一次加载页面然后通过单击按钮显式调用connect() 方法时，连接没有建立。

我的 vue 插件代码：

import SockJS from "sockjs-client";
import Stomp from "webstomp-client";

const WebSocketTester = 
  install(Vue, options) 
    console.log("websocket tester launched");
    let connected = false;
    const ws = 
      connected: () => connected
    ;

    const stompClient = getStompClient("http://localhost:8080/ws");

    const connect = () => 
      return new Promise((resolve, reject) => 
        if (connected) 
          reject("Already connected !");
          return;
        
        console.log("trying to connect websocket");
        stompClient.connect(, frame => 
          console.log("got websocket frame:");
          console.log(frame);
          if (frame.command == "CONNECTED") 
            connected = true;
            resolve();
           else 
            reject("Could not connect with " + url);
          
        );
      );
    ;

    ws.connect = () => 
      return connect();
    ;

    Vue.prototype.$ws = ws;
  
;

const getStompClient = webSocketUrl => 
  const socket = new SockJS(webSocketUrl);
  return Stomp.over(socket);
;

export default WebSocketTester;

我的 vue 组件：

<template>
  <div class="hello">
    <button @click="connect">Connect with websocket</button>
  </div>
</template>

<script>
export default 
  name: "HelloWorld",
  props: 
    msg: String
  ,
  methods: 
    connect() 
      console.log("connecting...");
      this.$ws.connect().catch(error => 
        console.log("could not connect by click");
        console.log(error);
      );
    
  ,
  mounted() 
    // this works well
    // this.$ws.connect().catch(error => 
    //   console.log("could not connect in mounted");
    //   console.log(error);
    // );
  
;
</script>

在这种情况下，我取消注释挂载的钩子，页面加载后我看到控制台日志是这样的：

websocket tester launched
trying to connect websocket
Opening Web Socket...
Web Socket Opened...
DEPRECATED: undefined is not a recognized STOMP version. In next major client version, this will close the connection.
>>> CONNECT
>>> length 52
<<< CONNECTED
connected to server undefined
got websocket frame:
Frame command: "CONNECTED", headers: …, body: ""

一切正常。但是，如果我注释挂载的钩子并希望通过单击按钮与 WebSocket 连接，控制台日志如下所示：

websocket tester launched
connecting...
trying to connect websocket
Opening Web Socket...

就是这样，连接没有建立。为什么会发生这种情况以及如何解决？

【问题讨论】：

能在使用组件的地方加上使用插件的启动代码吗？将 console.log 放入插件代码和 mounted 事件中，我怀疑 mounted 中的代码在插件代码之前执行。

在这两种情况下，我都尝试通过插件与 WebSocket 连接。我根据您的建议放置了控制台日志，看起来插件首先加载，然后挂载钩子（plugin: websocket tester launched -> mounted! -> plugin: connect method start）。我找到了答案，请看我下面的帖子。

【参考方案1】：

好的，我想通了。问题行是插件中的const stompClient = getStompClient("http://localhost:8080/ws");。我已将其移至 connect 方法并存储为 ws.object。

        if (connected) 
          reject("Already connected !");
          return;
        
        ws.stompClient = getStompClient("http://localhost:8080/ws");
        console.log("trying to connect websocket");
        ws.stompClient.connect(, frame => 

后来，我使用ws.stompClient，效果很好。