简体   繁体   中英

Unable to emit to a specific room and client (Socket.io 2.0.2)

I am using Socket.io to create a multiplayer game. I have used a generated numerical code to dynamically create and join rooms.

My issue comes about emitting to specific rooms or even specific clients. I am unable to emit to a room ( io.in(room).emit('event') or io.to(room).emit('event') They are synonyms ). I am however able to socket.emit('event') between the server and client just fine. No errors. Simply nothing happens when I use anything but socket.emit() , io.emit() , and socket.on('',function(){ this.emit(); }) .

The reason I have to emit to specific rooms is to update all clients in their rooms when a new client has joined. (I had tried emitting to each socket.id in each room but that does not work) .

browser debugger tracking server emitted events

I have uploaded all the code I have used in my Node.js server in hopes that someone can see the error in my program. I am new to Socket.io and I am not sure about the validity of how I have set up my dynamic rooms.

The room event that does not work is: connectToRoom

Server

 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];
    });
});

Client

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>

正确的语法如下:

io.to('some room').emit('some event');

I have resolved my issue. The issue in this program is the way that I have made my program. The program is coded in a "non-dynamic room" manner. I have coded the program to only handle one game instance. Not multiple game instances for each room.

It is due to the fact that I am using one "game" instance for all the rooms. All games in each room will be using the same codes. Because I am running separate unique game instances for each unique room, I also need to create unique code for each corresponding game instance. This program does not create unique codes for each corresponding game instance. Hence it does not work.

I have restructured the program in a modular manner to handle activities for each individual room.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM