Question

我在前端使用Vue SocketIO，希望我的应用程序根据用户输入动态加入会议室。

该功能包中尚不提供此功能（作者一直在从事此功能），我想知道将其一起破解的方法。

我正在这样在我的主应用程序文件中设置SocketIO：

import VueSocketIO from 'vue-socket.io'
import io from 'socket.io-client';

const token = window.localStorage.getItem('token');
const socketInstance = io(require('../config/web').socket_url, {
    transports: ['websocket', 'polling'],
    transportOptions: {
        polling: {
            extraHeaders: {
                Authorization: token
            }
        }
    }
});
Vue.use(new VueSocketIO({
    debug: true,
    connection: socketInstance,
    vuex: {
        store,
        actionPrefix: 'SOCKET_',
        mutationPrefix: 'SOCKET_'
    }
}));

在我的组件中，我试图像这样加入，

selectSession () {
                console.log(this.$socket)
                // this.$socket.join(this.subscribedSession)
            }

失败，因为this。$ socket没有连接方法。

有人知道如何破解吗？

Answer 1

VueSocketIO软件包甚至socket.io-client都不是问题

vue.$socket是一个socket.io-client实例，因此具有本机客户端提供的所有功能。

问题是您不能从客户端加入会议室，这是仅服务器端的功能。

如果查看native socket.io client API docs，您会发现客户端对象上没有join方法，不是因为他们没有实现它，而是因为它在设计上不存在

那我该如何解决呢？

很高兴你问...

我建议创建一个名为join的服务器端处理程序，该处理程序将房间名称作为参数，然后服务器将套接字连接到房间中

const express = require("express");
const io = require('socket.io')(express());

io.on("connection", socket => {
  socket.on("join", roomName => {
    socket.join(roomName);
  }
};

然后可以从您的客户端使用：

socket.emit("join", "chatroom1");

注意：这可能是安全问题。

在Vue SocketIO中动态加入会议室

1 个答案:

那我该如何解决呢？