Я использую Socket.io для создания многопользовательской игры. Я использовал сгенерированный числовой код для динамического создания и соединения комнат.
Моя проблема связана с отправкой в определенные комнаты или даже определенных клиентов. Я не могу передать в комнату (io.in(room).emit('event') или io.to(room).emit('event') Это синонимы). Однако я могу socket.emit('event') между сервером и клиентом просто отлично. Ошибок нет. Просто ничего не происходит, когда я использую что-либо, кроме socket.emit(), io.emit() и socket.on('',function(){ this.emit(); }).
Причина, по которой я должен отправлять сообщения в определенные комнаты, заключается в том, чтобы обновить всех клиентов в их комнатах, когда к ним присоединился новый клиент. (Я пробовал передавать на каждый socket.id в каждой комнате, но это не сработало).
события, отправленные сервером отслеживания отладчика браузера
Я загрузил весь код, который использовал на своем сервере Node.js, в надежде, что кто-то увидит ошибку в моей программе. Я новичок в Socket.io и не уверен в правильности того, как я настроил свои динамические комнаты.
Не работает событие комнаты: connectToRoom.
Сервер
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/',function(req, res) {
res.sendFile(__dirname + '/client/index.html');
});
app.use('/client',express.static(__dirname + '/client'));
http.listen(3000, function(){
console.log('listening on localhost:3000');
});
io.on('connection', function(socket){
socket.id = Math.random();
SOCKET_LIST[socket.id]=socket;
socket.on('create',function(){
var thisGameId = ( Math.random() * 100000 ) | 0;
roomNo+=1;
roomArr[thisGameId]=thisGameId;
this.emit('createResponse', {gameId: thisGameId, mySocketId: socket.id});
this.join(thisGameId.toString());
});
socket.on('joinRoom',function(data){
//playerJoinGame(data);
//io.sockets.in(data.roomKey.toString()).emit('connectToRoom', "You are in room no. "+data.roomKey);
//socket.to(data.roomKey.toString()).emit('connectToRoom', "You are in room no. "+data.roomKey);
if( io.nsps['/'].adapter.rooms[data.roomKey]!== undefined ){
socket.join(data.roomKey.toString());
SOCKET_LIST[socket.id].username = data.username;
this.emit('joinRoomResponse',{
roomKey:data.roomKey
});
}
if(io.nsps['/'].adapter.rooms[data.roomKey]=== undefined){
this.emit('joinError',{
message: "This room does not exist."
});
}
});
socket.on('updateRoom',function(data){
var clients=io.sockets.adapter.rooms[data.roomKey].sockets;
var clientsArr=Object.keys(clients);
for (var clientId in clientsArr ) {
io.sockets.connected[clientsArr[clientId]].emit('connectToRoom', {
roomKey:data.roomKey,
username:data.username
});
}
io.sockets.in(data.roomKey).emit('connectToRoom', {
roomKey:data.roomKey,
username:data.username
});
});
socket.on('disconnect',function(){
delete SOCKET_LIST[socket.id];
});
});
Клиент
var socket = io();
var roomKey,username,mySocketId;
var optionDiv = document.getElementById('optionDiv');
var optionDivCreate = document.getElementById('optionDiv-create');
var optionDivJoin = document.getElementById('optionDiv-join');
var prepDiv = document.getElementById('prepDiv');
var createDiv = document.getElementById('create-Div');
var lobbyDiv = document.getElementById('lobbyDiv');
var createRoomKey = document.getElementById('create-roomKey');
var createPlayers = document.getElementById('create-players');
var joinForm = document.getElementById('join-form');
var joinForm_roomKey = document.getElementById('join-roomKey');
var joinForm_username = document.getElementById('join-username');
var joinForm_submit = document.getElementById('join-form-submit');
var gameDiv = document.getElementById("gameDiv");
optionDivCreate.onclick=function(){
socket.emit('create');
};
optionDivJoin.onclick=function(){
optionDiv.style.display='none';
prepDiv.style.display='inline-block';
joinForm.style.display='inline-block';
};
socket.on('createResponse',function(data){
roomKey = data.gameId;
mySocketId = data.mySocketId;
optionDiv.style.display='none';
prepDiv.style.display='inline-block';
createDiv.style.display='inline-block';
createRoomKey.innerHTML = roomKey;
});
joinForm_submit.onclick= function(){
};
joinForm.onsubmit = function(e){
e.preventDefault();
roomKey = joinForm_roomKey.value;
username = joinForm_username.value;
socket.emit('joinRoom',{
roomKey:roomKey,
username:username
});
joinForm_roomKey.value='';
joinForm_username.value='';
};
socket.on('joinRoomResponse',function(data){
optionDiv.style.display='none';
createDiv.style.display='none';
prepDiv.style.display='none';
lobbyDiv.style.display='inline-block';
socket.emit('updateRoom',{
roomKey:roomKey,
username:username
});
});
socket.on('connectToRoom',function(data){
socket.emit('debug');
//createPlayers.innerHTML = "<br />"+data.username;
alert("triggered");
});
socket.on('joinError',function(data){
alert(data.message);
});
HTML
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Prototype</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="optionDiv" style="">
<button id="optionDiv-create">Create Game</button><br />
<button id="optionDiv-join">Join Game</button>
</div>
<div id="prepDiv" style="display:none;">
<div id="create-Div" style="display:none;">
Room Key:<br />
<h1 id="create-roomKey"></h1>
<h1 id="create-players"></h1>
</div>
<form id="join-form" style="display:none;">
Username:<br />
<input id="join-username" type="text" style="width:500px"></input><br />
Room Key:<br />
<input id="join-roomKey" type="text" style="width:500px"></input><br />
<button id="join-form-submit">Join</button>
</form>
</div>
<div id="lobbyDiv" style="display:none;">
You are in room:<br />
<h1 id="join-roomKey"></h1><br />
Players in room:<br />
<h1 id="join-players"></h1>
</div>
<div id="gameDiv" style="display:none;">
<div id="gameDiv-canvas">
<canvas id="ctx" width="500" height="500" style="border:1px solid #000000;">
</canvas>
</div>
<div id="gameDiv-chat">
<div id="chat-text" style="width:500px;height:100px;overflow-y:scroll">
<div>
Hello!
</div>
</div>
<form id="chat-form">
<input id="chat-input" type="text" style="width:500px"></input>
</form>
</div>
</div>
<!--<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.2/socket.io.js"></script>-->
<script src="/socket.io/socket.io.js"></script>
<script src="/client/js/client.js"></script>
</body>
</html>
