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

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_"
    }
  })
);

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问题。看看那个评论。