Node.js i Socket.io Tworzenie pokoju

Question

Czy mogę prosić o pomoc. Moje kody nie działają przy tworzeniu pokoju za pomocą socket.room, najpierw zadeklarowałem var rooms = ['Lobby']; i chciałbym stworzyć pokoje i wypchnąć utworzone nazwy pokoi do rooms[]. Moim celem jest umożliwienie użytkownikom utworzenia własnego pokoju i usunięcia go, jeśli to możliwe. Jako odniesienie posłużyłem się kodem Michaela Mukhina here.

Oto kod mojego server.js

var redis = require('redis'); 
var express = require('express'); 
var app = express(); 
var http = require('http'); 
var server = http.createServer(app); 
var io = require('socket.io').listen(server); 
var publish = redis.createClient(); 
var subscribe = redis.createClient(); 

server.listen(8080); 


app.get('/', function (req, res) { 
    res.sendfile(__dirname + '/index.html'); 
}); 

var usernames = {}; 

var rooms = ['Lobby']; 

io.sockets.on('connection', function (socket) { 

    socket.on('adduser', function (username){ 
     socket.username = username; 
     socket.room = 'Lobby';   
     usernames[username] = username; 
     socket.join('Lobby');   
     subscribe.subscribe(socket.room); 
     socket.emit('updatechat', 'SERVER', 'you have connected to Lobby'); 
     socket.broadcast.to('Lobby').emit('updatechat', 'SERVER', username + ' has connected to this room'); 
     socket.emit('updaterooms', rooms, 'Lobby'); 
    }); 

    socket.on('create', function (room) { 
     var room = 'test'; 
     rooms.push(room); 
     }); 

    socket.on('sendchat', function (data) { 

     io.sockets.in(socket.room).emit('updatechat', socket.username, data); 
     if (socket.room === 'Lobby') { 
      publish.publish('Lobby', data); 
     } else { 
     publish.publish(socket.room, data); 
     } 
    }); 

    socket.on('switchRoom', function(newroom){ 
     socket.leave(socket.room); 
     socket.join(newroom); 
     subscribe.subscribe(newroom); 
     socket.emit('updatechat', 'SERVER', 'you have connected to '+ newroom); 
     socket.broadcast.to(socket.room).emit('updatechat', 'SERVER', socket.username+' has left this room'); 
     socket.room = newroom; 
     socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username+' has joined this room'); 
     socket.emit('updaterooms', rooms, newroom); 
    }); 



    socket.on('disconnect', function(){ 

     delete usernames[socket.username]; 
     io.sockets.emit('updateusers', usernames); 
     socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected'); 
     socket.leave(socket.room); 
    }); 
}); 

Oto kod w kliencie index.html Chciałbym stworzyć pokój i dodać go do listy rooms[] .

<script src="/socket.io/socket.io.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script> 
    var socket = io.connect('http://localhost:8080'); 


    socket.on('connect', function(){ 

     socket.emit('adduser', prompt("What's your name: ")); 
     test(); 
    }); 


     //this is my create room to be called when i click a button 
     socket.on('createroom', function() { 
      socket.emit('create', room); 
     }); 




    socket.on('updatechat', function (username, data) { 
     $('#conversation').append('<b>'+ username + ':</b> ' + data + '<br>'); 
    }); 


    socket.on('updaterooms', function (rooms, current_room) { 
     $('#rooms').empty(); 
     $.each(rooms, function(key, value) { 
      if(value == current_room){ 
       $('#rooms').append('<div>' + value + '</div>'); 
      } 
      else { 
       $('#rooms').append('<div><a href="#" onclick="switchRoom(\''+value+'\')">' + value + '</a></div>'); 
      } 
     }); 
    }); 

    function switchRoom(room){ 
     socket.emit('switchRoom', room); 
    } 


    $(function(){ 
     $('#datasend').click(function() { 
      var message = $('#data').val(); 
      $('#data').val(''); 
      socket.emit('sendchat', message); 
     }); 


     $('#data').keypress(function(e) { 
      if(e.which == 13) { 
       $(this).blur(); 
       $('#datasend').focus().click(); 
      } 
     }); 
    }); 

</script> 
<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;"> 
    <b>ROOMS</b> 
    <div id="rooms"></div> 
</div> 

<div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;"> 
    <div id="conversation"></div> 
    <input id="data" style="width:200px;" /> 
    <input type="button" id="datasend" value="send" /> 
</div> 

Proszę mi pomóc, chłopaki, że już przeczytałem dokumentację socket.io. Ale trudno mi było to zrozumieć. Mam nadzieję, że możesz mi pomóc. Z góry dziękuję, przepraszam, ale nadal uczę się socket.io i node.js. Dzięki.

Answer 1

To może pomóc:

server.js (bez kodu dotyczącego REDiS)

var usernames = {}; 

var rooms = ['Lobby']; 

io.sockets.on('connection', function(socket) { 
    socket.on('adduser', function(username) { 
     socket.username = username; 
     socket.room = 'Lobby'; 
     usernames[username] = username; 
     socket.join('Lobby'); 
     socket.emit('updatechat', 'SERVER', 'you have connected to Lobby'); 
     socket.broadcast.to('Lobby').emit('updatechat', 'SERVER', username + ' has connected to this room'); 
     socket.emit('updaterooms', rooms, 'Lobby'); 
    }); 

    socket.on('create', function(room) { 
     rooms.push(room); 
     socket.emit('updaterooms', rooms, socket.room); 
    }); 

    socket.on('sendchat', function(data) { 
     io.sockets["in"](socket.room).emit('updatechat', socket.username, data); 
    }); 

    socket.on('switchRoom', function(newroom) { 
     var oldroom; 
     oldroom = socket.room; 
     socket.leave(socket.room); 
     socket.join(newroom); 
     socket.emit('updatechat', 'SERVER', 'you have connected to ' + newroom); 
     socket.broadcast.to(oldroom).emit('updatechat', 'SERVER', socket.username + ' has left this room'); 
     socket.room = newroom; 
     socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username + ' has joined this room'); 
     socket.emit('updaterooms', rooms, newroom); 
    }); 

    socket.on('disconnect', function() { 
     delete usernames[socket.username]; 
     io.sockets.emit('updateusers', usernames); 
     socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected'); 
     socket.leave(socket.room); 
    }); 
}); 

index.html

<head> 
... // your other code 
<script> 
var socket = io.connect('http://localhost:8000'); 

socket.on('connect', function(){ 
    socket.emit('adduser', prompt("What's your name: ")); 
}); 

socket.on('updatechat', function (username, data) { 
    $('#conversation').append('<b>'+ username + ':</b> ' + data + '<br>'); 
}); 


socket.on('updaterooms', function (rooms, current_room) { 
    $('#rooms').empty(); 
    $.each(rooms, function(key, value) { 
     if(value == current_room){ 
      $('#rooms').append('<div>' + value + '</div>'); 
     } 
     else { 
      $('#rooms').append('<div><a href="#" onclick="switchRoom(\''+value+'\')">' + value + '</a></div>'); 
     } 
    }); 
}); 

function switchRoom(room){ 
    socket.emit('switchRoom', room); 
} 

$(function(){ 
    $('#datasend').click(function() { 
     var message = $('#data').val(); 
     $('#data').val(''); 
     socket.emit('sendchat', message); 
    }); 

    $('#data').keypress(function(e) { 
     if(e.which == 13) { 
      $(this).blur(); 
      $('#datasend').focus().click(); 
     } 
    }); 

    $('#roombutton').click(function(){ 
     var name = $('#roomname').val(); 
     $('#roomname').val(''); 
     socket.emit('create', name) 
    }); 
}); 

</script> 
</head> 
<body> 
    <div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;"> 
     <b>ROOMS</b> 
     <div id="rooms"></div> 
    </div> 

    <div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;"> 
     <div id="conversation"></div> 
     <input id="data" style="width:200px;" /> 
     <input type="button" id="datasend" value="send" /> 
    </div> 

    <div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;"> 
     <div id="room creation"></div> 
     <input id="roomname" style="width:200px;" /> 
     <input type="button" id="roombutton" value="create room" /> 
    </div> 
    ... // the rest of your page 
</body>