node.js - 在 NestJs 中使用 Socket IO 加入和发射到房间
问题描述
我正在尝试使用socketio在nestjs中制作一个简单的房间,但无法掌握房间的概念。我想要的是客户端将一个 id 发送到一个通用端点,然后服务器将该套接字连接到一个特定的房间,然后开始从其他地方向那个房间发送消息。我目前拥有的是客户加入一个名为“会议”的活动,然后被发送一个假会议,但我不知道如何让多个客户加入同一个房间并一次发送相同的信息。
客户端 (html)
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.js"></script>
<script>
const url = 'http://localhost:4001';
const socket = io(url);
socket.on('connect', function() {
console.log('Connected');
socket.emit('meeting', { roomId: '12345' });
});
socket.on('meeting', function(data) {
console.log('you have joined the meeting: ', data);
});
socket.on('exception', function(data) {
console.log('event', data);
});
socket.on('disconnect', function() {
console.log('Disconnected');
});
</script>
服务器(NestJS):
@WebSocketGateway(4001)
export class PackGateway implements OnGatewayConnection {
constructor(private otherService: OtherService) {}
@WebSocketServer()
server: Server;
handleConnection() {
console.log('new connection!');
}
@SubscribeMessage('meeting')
joinUserToMeeting(@MessageBody() data: any, @ConnectedSocket() client: Socket): Observable<WsResponse<any>> {
client.join(data.roomId, (err) => {
if (err) {
console.log('error ', err);
} else {
console.log('client joined room: ' + data.roomId);
this.server.to(data.meetingId).emit('a new challenger approaches');
}
});
return from(data.meetingId)
.pipe(
map(
(res: any) => {
return {
event: 'meeting',
data: data.meetingId
}
}
)
);
}
}
通过这种设置,我的客户正在连接到会议活动,加入到他们在连接到会议活动时发送的 roomId,并被发回他们加入的 meetingId。但是我错过了一个关键的事情:
- 客户端实际上并没有打开服务器加入它的房间的连接。我是否需要在客户端代码中执行此操作才能开始与特定房间 ID 的连接?一旦我可以得到类似下面的东西,那么我认为我的客户端会在任何客户端加入时收到一条消息,因为在建立新连接时服务器会向该房间发出一条消息。
<script>
const url = 'http://localhost:4001';
const socket = io(url);
socket.on('connect', function () {
console.log('Connected');
socket.emit('meeting', { meetingId: '12345' });
});
socket.on('meeting', function (data) {
console.log('you have joined the meeting: ', data);
socket.in(data).on('roomIdEvent', function (data) {
console.log('you got a new event specific to the meeting you joined');
console.log('data');
});
});
socket.on('exception', function (data) {
console.log('event', data);
});
socket.on('disconnect', function () {
console.log('Disconnected');
});
</script>
解决方案
意识到当我的服务器发送到那个房间时,我没有正确构建消息:
所以
this.server.to(data.meetingId).emit('a new challenger approaches');
去
this.server.to(data.meetingId).emit('meeting', 'a new challenger approaches');
现在因为我的服务器已将客户端加入到那个房间,通过房间发送到会议允许我的客户看到数据
推荐阅读
- javascript - 使用 javascript 在下拉列表中更改自定义下拉选择器副本
- android - 带有两个文本视图的自定义单选按钮 - Android
- sql-server - 突发记录
- discord - 有什么方法可以更改 DM 名称?不和谐 js 12
- javascript - 在 vue 中使用 jest mock 测试 axios 时响应未定义
- python - Issues with add and delete rows with one to many relationship
- python - 如何使用 CTC 损失函数和数据集监控准确性?(包括可运行代码)
- firefox - 页面的设置阻止了内联资源的加载(“default-src”)。无法还原配置更改
- javascript - 尝试在 javascript 中验证用户名和密码,但没有收到警报和所需的输出
- react-native - HostFunction 中的异常:来自 JS 的格式错误的调用:字段大小不同异常?