如何控制何时将套接字连接请求从客户端发送到后端?

Question

使用vue-socket.io我的前端当前在最初构建应用程序时或每次刷新页面时向后端发出 Socket.io 连接请求。这对我来说是有问题的，因为我的页面最初是在登录页面上构建的。这意味着它正在发送没有正确数据的套接字请求，因为用户尚未登录。用户登录后，我无法发送另一个套接字连接请求。

socket.js(plugins文件夹(前端

import Vue from "vue";
import store from "../store";
import SocketIO from "socket.io-client";
import VueSocketIO from "vue-socket.io";
Vue.use(
new VueSocketIO({
debug: true,
connection: SocketIO("http://localhost:3000", {
query: { token: store.state.token }
}),
vuex: {
store,
actionPrefix: "SOCKET_",
mutationPrefix: "SOCKET_"
}
})
);

套接字.js(controllers文件夹(后端

io.use(function (socket, next) {
console.log('Token ' + socket.handshake.query.token);
if (socket.handshake.query && socket.handshake.query.token) {
jwt.verify(socket.handshake.query.token, 'THIS IS SUPPOSED TO BE PRIVATE', function (err, decoded) {
if (err) return next(new Error('Authentication error'));
socket.decoded = decoded;
next();
});
} else {
next(new Error('Authentication error'));
}
})
.on('connection', function (socket) {
socket.on('JOIN_ROOM', (room) => {
socket.join(room);
});
// CourseQuestions Page
socket.on('POST_QUESTION', (data) => {

我正在寻找一种方法，一旦用户登录，最好使用vue-socket.io以编程方式再次从前端发送套接字连接请求。

Answer 1

您应该将{ autoConnect: false }作为选项传递到new VueSocketIO()中。 像这样：

new VueSocketIO(..., { autoConnect: false }, ...)

然后，当您要打开连接时，只需调用this.$socket.open().

GitHub 问题。并查看该评论。