无法使用 Vue 插件连接到 WebSocket
Unable to connect to WebSocket with Vue plugin
我想编写一个 vue 插件,以便在我的 Vue 应用程序中获得方便的 WebSocket 方法,如 connect()
和 subscribe()
。我在连接到 WebSocket 时遇到问题,它仅在我调用已安装挂钩中的 connect()
方法并加载整个页面时有效(就像使用浏览器刷新按钮一样)。在另一种情况下,当我首先加载页面然后通过单击按钮显式调用 connect()
方法时,未建立连接。
我的 vue-plugin 代码:
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...
就是这样,连接没有建立。为什么会发生这种情况以及如何解决?
好的,我明白了。问题行是插件中的 const stompClient = getStompClient("http://localhost:8080/ws");
。我已将其移至连接方法并存储为 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
,效果很好。
我想编写一个 vue 插件,以便在我的 Vue 应用程序中获得方便的 WebSocket 方法,如 connect()
和 subscribe()
。我在连接到 WebSocket 时遇到问题,它仅在我调用已安装挂钩中的 connect()
方法并加载整个页面时有效(就像使用浏览器刷新按钮一样)。在另一种情况下,当我首先加载页面然后通过单击按钮显式调用 connect()
方法时,未建立连接。
我的 vue-plugin 代码:
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...
就是这样,连接没有建立。为什么会发生这种情况以及如何解决?
好的,我明白了。问题行是插件中的 const stompClient = getStompClient("http://localhost:8080/ws");
。我已将其移至连接方法并存储为 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
,效果很好。