socket.io 没有向房间里的其他人发送事件

Question

所以我试图弄清楚一个非常基本的 socket.io 应用程序发生了什么。我通过让 2 个不同的选项卡注册为不同的用户并尝试查看另一个选项卡是否获得事件来对此进行测试。前端都没有接收到其他事件，但服务器确实可以正确接收到事件。我的前端是 vue.js，我认为我的代理设置正确。我不确定为什么连接到同一个房间的房间 2 人不会根据文档收到事件。

编辑：如果我删除 roomId 的 .to，则消息将仅复制给发送消息的用户：/不确定这是否意味着什么。

Edit2：这与 rabbitmq 适配器无法用于中继消息有关。通过删除该中间件，一切正常。

Node.js 服务器

import http from 'http';
import express from 'express';
import { Server } from 'socket.io';
const adapter = require('socket.io-amqp');

const app = express();
const server = http.createServer(app);
const io = new Server(server,{
  path: '/socket'
});

io.adapter(adapter('amqp://localhost'));

app.get('/',(req,res) => {
    res.send('<h1>Hello World, Again</h1>')
});

io.on('connection',(socket) => {
  
  const query = socket.handshake.query;
  const userId = query['userId'] as string;
  const roomId = query['roomId'] as string;
  if(!userId || !roomId)
  { 
    console.log('failed to connect - userId or roomId is undefined');
    socket.disconnect(); 
    return;
  } 
  
  socket.join(roomId);
  console.log(`connection - user: ${userId}, room: ${roomId}`);

  socket.on('newValue',(e) => {
    socket.to(roomId).emit('newValue',{
      userId: userId,
      value: e.value
    });

    console.log(`roomId: ${roomId}, userId: ${userId}, value: ${e.value}`);
  });

  socket.on('disconnect',(reason)=> {
    socket.to(roomId).emit('userDisconnect',{
      userId: userId
    });

    console.log(`disconnect - user: ${userId}, room: ${roomId}`);
  });

  socket.to(roomId).emit('newUser',{
    userId
  });
});
 
const PORT = 3000;
server.listen(PORT,() => {
    console.log(`listening on http://localhost:${PORT}`);
});

管理套接字的Vue.js视图

<template>
  <div class="room">
    <div class="p-grid">
      <div class="p-col-12">
        <playing-card :value="selectedValue" class="center-card"/>
      </div>
    </div>
    <div class="p-grid">
      <div class="p-col-12">
        <value-selector @change="onValueChange"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import 'vue-router';
import { userStore } from '../store/index';
import { io, Socket } from 'socket.io-client';
import { Options, Vue } from 'vue-class-component';
import ValueSelector from '../components/ValueSelector.vue';
import PlayingCard from '../components/PlayingCard.vue';

@Options({ 
  components: { 
    PlayingCard, ValueSelector
  }
})
export default class Room extends Vue {
  
  selectedValue = -1;
  private socket!: Socket | null;

  private closeSocket(): void {
    if(this.socket)
    {
      this.socket.close();
      this.socket = null;
    }
  }

  private configureSocket(): void {
    if(!this.socket)
    {
      this.socket = io({
        path: '/socket',
        reconnection: true,
        reconnectionDelayMax: 10000,
        query: {
          roomId: this.$route.params.roomId as string,
          userId: userStore.getters.userId as string
        }
      });

      this.socket.on('newValue',(e)=>{
        console.log(e);
      });

      this.socket.onAny((eventName,e)=>{
        console.log(eventName);
        console.log(e);
      });
    }
  }

  mounted(): void {
    this.configureSocket();
  }

  onValueChange(values: any) {
    this.selectedValue = values.newVal;
    if(this.socket)
    {
      this.socket.emit('newValue', {
        value: this.selectedValue
      });
    }
  }

  unmounted(): void {
    this.closeSocket();
  }
}
</script>

<style lang="scss" scoped>
.center-card {
  margin: auto;
}
</style>

Vue.config.js

module.exports = {
    devServer: {
      proxy: {
        '/socket': {
          target: 'http://localhost:3000',
          changeOrigin: true,
          ws: true,
        }
      }
    }
  }

服务器日志

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node src/index.ts`
listening on http://localhost:3000
connection - user: ls91m4il, room: 123, socketId: 86zN3g6maJu1z0OzAAAB
connection - user: pq68znqa, room: 123, socketId: xvKKzXhEbCrnz_l_AAAD
roomId: 123, userId: ls91m4il, socketId, 86zN3g6maJu1z0OzAAAB value: 5
roomId: 123, userId: pq68znqa, socketId, xvKKzXhEbCrnz_l_AAAD value: 13

对于 onAny 或 on 订阅的事件响应以及匹配的命名事件，不会触发前端日志。

Answer 1

首先，socket.to(roomId).emit(...) 将向 roomId 中的每个套接字发送消息，socket 代表的客户端除外。如果您想发送到roomId 中的所有套接字，您将使用io.to(roomId).emit(...)。我不清楚您是要发送到所有套接字还是发送到除发起者之外的所有套接字，所以我想确保您了解这方面的内容。

在调试和日志记录方面可以确保自己能够解决问题的事项：

1. 确保两个客户端都连接到您的服务器并保持连接。在 connect 和 disconnect 事件上记录实际的 socket.id 将为您提供很好的了解。

2. 确保两个客户端都请求相同的roomId。如果每个roomId 不同，那么roomId 中将只有一个套接字，而socket.to().emit() 将没有其他人可以发送到。

3. 确保发送newValue 消息的客户端没有发布导致页面重新加载的表单，因此旧套接字被断开并创建新套接字。登录点 #1 应该确保您没有看到这种情况发生。我提到这个主要是因为这是一个常见的错误，尽管我没有看到足够多的实际 HTML 页面来知道这对你来说是否是个问题。

4. 在您的服务器上记录每条传入消息。不仅记录消息，还记录它所来自的socket.id。这将允许您重建整个消息流。

没有所有这些数据，我们就无法查明问题所在。这种类型的问题需要收集数据，然后跟踪线索，直到您可以更准确地看到正在发生的事情和没有发生的事情。如果我不得不冒险猜测，我想知道您是否对 #1 或 #2 有疑问。