Javascript 无法使用Vue插件连接到WebSocket

我想编写一个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>

---

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

好的，我想出来了。问题行是

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
，它工作得很好。
您可以在使用组件的地方添加代码，在使用插件的地方添加启动代码吗？将console.log放入插件代码中，在
mounted
事件中，我怀疑
mounted
中的代码是在插件代码之前执行的。在这两种情况下，我都尝试通过插件连接WebSocket。我根据您的建议放置了控制台日志，它看起来像是先加载了插件，然后安装了钩子（
plugin:websockettester已启动
->
已安装！
->
plugin:connect method start
）。我找到了答案，请看下面我的帖子。
websocket tester launched
connecting...
trying to connect websocket
Opening Web Socket...

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