Node.js and Socket.io Creating Room

后端 未结 1 1971
南笙
南笙 2020-12-23 02:20

can i ask for your help. My codes doesn\'t work for creating a room using socket.room, first I\'ve declared var rooms = [\'Lobby\']; and I would like to create

相关标签:
1条回答
  • 2020-12-23 03:05

    This may help :

    server.js (without the code regarding 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>
    
    0 讨论(0)
提交回复
热议问题