Vue & Sockets：处理来回发送消息

Question

我有一个消息传递系统的简单实现或尝试，只是为了向不同的用户显示一条消息的警报。我正在使用 https://www.npmjs.com/package/vue-socket.io Vue Socket Io，但它只是一个 socket.io。我正在尝试让客户端订阅已安装的事件。该名称基于他们的用户 ID。问题是我下面的实现无法显示警报。我可以在 mount 中看到正在订阅的事件，我可以看到在服务器中发送消息控制台日志，所以我知道它被解雇了，但我没有看到 alert 被 emit(Chat_ 触发....

服务器：

io.on('connection', function(socket) {
    socket.on('sendMessage', function (data) {
       console.log("Sending message to" + data.user);
       socket.emit(`CHAT_${data.user}`, data.msg)
    });
 });

客户：

在客户端，userIDSelf 是作为 prop 传入的用户 ID。这是用户的登录 ID，在 mounted 中，他们会自动订阅附加了用户 ID 的聊天频道，就像自定义频道一样。

mounted() {
    this.sockets.subscribe(`CHAT_${this.userIDSelf}`, (data) => {
         alert(data)
    });
},

有一个函数 sendMessage 从模板中的 2 个输入（未看到）中获取值。您必须输入一个用户 ID，说明您希望将消息发送给谁，然后再输入实际消息。这些被发送到上面列出的后端服务器。

methods: {
  sendMessage() {
        this.$socket.emit('sendMessage', {user:  this.userIDReceiver, msg: this.message})
  },
}

Answer 1

我在这里看到一个逻辑问题。在您的服务器代码中

io.on('connection', function(socket) {
  socket.on('sendMessage', function (data) {
    console.log("Sending message to" + data.user);
    socket.emit(`CHAT_${data.user}`, data.msg)
  });
});

向服务器发出 sendMessage 事件的 socket（用户 123）最终也将是 socket，它将从服务器。但是用户 123 socket 只监听 CHAT_123 事件。套接字正在向自己发送消息但未收到消息。

可能的解决方案

A - `room` 方法

一旦套接字连接到服务器，根据它的用户 ID 将其放入 room。这需要在连接期间将用户标识发送到服务器，例如带有查询参数。在客户端中，只需将 token 查询参数添加到连接字符串中，例如

const io = require('socket.io-client');
const socket = io("https://server-domain.com/?token=" + userid);

并通过服务器端房间中的连接插座（加入），如

io.on('connection', function(socket) {
  const userid = socket.handshake.query.token;
  socket.join(userid);
});

那么你的插座 sendMessage 会像这样工作

/* ... server side */
socket.on('sendMessage', function (data) {
  console.log("Sending message to" + data.user);
  io.to(data.user).emit('chatMessage', data.msg);
});

B - `keep reference to the socket` 方法

内部每个套接字都有一个socket id。通常这些都不会暴露user/clients。但是你确实有一个独特的 user id。因此，让我们在服务器端保留一个 user id / socket instance - 关系，这样您就可以使用用户 ID 为每个相应的用户获取对套接字对象的引用。

最基本的例子是服务器端的内存存储

let socketRefs = {};
io.on('connection', function(socket) {
  const userid = socket.handshake.query.token;
  socketRefs[userid] = socket;
});

那么您的套接字 sendMessage 将像这样工作

/* ... server side */
socket.on('sendMessage', function (data) {
  console.log("Sending message to" + data.user);
  let targetSocket = socketRefs[data.user];
  targetSocket.emit('chatMessage', data.msg);
});

Vue & Sockets：处理来回发送消息

Vue & Sockets: Handling sending messages back and forth

javascript

socket.io

vue.js

vuejs2

可能的解决方案

A - `room` 方法

B - `keep reference to the socket` 方法

Vue & Sockets：处理来回发送消息

Vue & Sockets: Handling sending messages back and forth

javascript

socket.io

vue.js

vuejs2

可能的解决方案

A - room 方法

B - keep reference to the socket 方法

A - `room` 方法

B - `keep reference to the socket` 方法