【发布时间】:2018-01-22 05:55:28
【问题描述】:
我正在使用Socket.io 2.0.4 和React.js (CRA)
背景:在我的服务器代码 (server.js) 中,一旦有人成功加入房间,我想发出一个事件,告诉该房间中的所有客户端有人加入。
问题:如果我尝试将.to(room) 或.in(room) 与.emit 结合使用...但@987654326 @ 将自行工作。
工作原理:我成功地实现了socket.join() 代码,并在回调中控制台记录了使用我创建的showClients 函数加入的每个人的ID。我可以通过控制台看到每个人一次加入一个。
注意:我将房间名称存储在数据变量中并使用data.room 访问它,但我也只是手动写入房间名称无济于事。
客户代码(删节)
import React, {Component} from 'react';
import Card from '../card/card';
import './game.css';
const io = require('socket.io-client');
const socket = io()
class Game extends Component {
constructor(props){
super();
}
componentDidMount(){
this.gameCode();
this.cardSelected();
socket.on("cardDiscarded", this.updateDiscard);
socket.on("playerJoined", () => {
alert("hi!");
console.log("YAY!!!!!!!!!!!!!!!!!!!!");
});
}
//....rest of my code....
}
服务器代码(删节)
看joinRoom函数看问题
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
const http = require("http").Server(app);
var io = require("socket.io")(http);
var bodyParser = require('body-parser');
console.log("Hello world!");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
io.on("connection", (socket) => {
socket.on("createNewRoom", (name) =>{
CreateNewRoom();
console.log("NEW ROOM CREATED!");
})
socket.on("joinRoomRequest", (name, room) =>{
// console.log(name, room);
console.log("Request to join room");
var data = {
name: name,
room: room
};
joinRoom(data);
})
function CreateNewRoom() {
//Get unique room number
var thisGameId = (Math.random() * 1000000 ) | 0;
//Send the room number to the browser
socket.emit('newRoomCreated', {roomID: thisGameId, mySocketID: socket.id});
//Tell socket.io this user is joining this room
socket.join(thisGameId.toString());
console.log(thisGameId);
};
function joinRoom(data){
console.log("trying to join room:" + data.room);
data.socketID = socket.id;
console.log(data);
socket.join(data.room, () => {
let rooms = Object.keys(socket.rooms);
//Let the clients know a player has joined
console.log(rooms);
console.log(data.name + " JOINED room " + data.room);
showClients(data.room);
io.to(data.room).emit("playerJoined"); //<----- DOESN't WORK
});
}
function showClients(room){
var roomClients = io.of('/').in(room).clients((err, data)=>{
if (err) throw err;
console.log("The people in room ", room, " are: ", data);
})
}
})
【问题讨论】:
-
你在哪里发送
createNewRoom? -
在客户端的另一个反应组件中。然后它成功地创建了房间,因为
newRoomCreatedemit 被客户端拾取了。 -
joinRoomRequest在哪里调用?如果您确定一切设置正确并被击中,我会说您的io.to应该是io.sockets.in(roomName).emit('playerJoined', 'Some Data') -
在一个单独的 React 组件中,当用户单击 DOM 中的加入按钮时,我会发出
joingRoomRequest事件。socket.emit("joinRoomRequest",guestName, room);