web-dev-qa-db-fra.com

Node.js et Socket.io Création de salle

puis-je demander votre aide. Mes codes ne fonctionnent pas pour créer une pièce à l'aide de socket.room, j'ai d'abord déclaré var rooms = ['Lobby']; et j'aimerais créer des pièces et pousser les noms des pièces créées vers rooms[]. Mon objectif est de permettre aux utilisateurs de créer leur propre salle et de la supprimer si possible. J'ai utilisé le code de Michael Mukhin ici comme référence.

Voici le code de mon 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);
    });
});

Voici le code dans le client index.html Je voudrais créer une salle et l'ajouter à la liste des 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>

Veuillez m'aider les gars, j'ai déjà lu la documentation socket.io. Mais j'ai eu du mal à comprendre. J'espère que vous pourrez m'aider les gars. Merci d'avance, je suis désolé mais j'apprends toujours socket.io et node.js. Merci.

javascriptnode.jssocketswebsocketsocket.io
15
Joenel de Asis

Cela peut aider:

server.js (sans le code concernant 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>
33
warchimede