Node.js和Socket.io创建空间 [英] Node.js and Socket.io Creating Room

问题描述

我可以请求你的帮助吗？我的代码不适用于使用socket.room创建房间，首先我宣布 var rooms = ['Lobby']; 我想创建房间和将创建的房间名称推送到 rooms [] 。我的目标是允许用户创建自己的房间并在可能的情况下删除它。我使用Michael Mukhin的代码这里作为参考。

这是我服务器的代码.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。房间）; 
 socket.emit（'updatechat'，'SERVER'，'你已经连接到Lobby'）; 
 socket.broadcast.to（'Lobby'）。emit（'updatechat'，' SERVER'，用户名+'已连接到此房间'）; 
 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 ==='大堂'）{ 
 publish.publish（'Lobby'，data）; 
} else {
 publish.publish（socket.room，data）; 
} 
}）; 
 
 socket.on（'switchRoom'，函数（newroom）{
 socket.leave（socket.room）; 
 socket.join（newroom）; 
 subscribe .subscribe（newroom）; 
 socket.emit（'updatechat'，'SERVER'，'你已连接到'+ newroom）; 
 socket.broadcast.to（socket.room）.emit（' updatechat'，'SERVER'，socket.username +'离开了这个房间'）; 
 socket.room = newroom; 
 socket.broadcast.to（newroom）.emit（'updatechat'，'SERVER' ，socket.username +'已加入此房间'）; 
 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 +'已断开连接'）; 
 socket.leave（socket.room） ）; 
}）; 
}）; 
  

以下是客户端index.html中的代码
我想创建一个房间并将其添加到 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（你叫什么名字：）） ; 
 test（）; 
}）; 
 
 
 //这是我点击按钮时调用的创建空间
 socket.on（'createroom'，function（）{
 socket.emit （'创造'，房间）; 
}）; 
 
 
 
 
 socket.on（'updatechat'，函数（用户名，数据）{
 $（'＃conversation'）。append（' < b>'+ username +'：< / b>'+ data +'< br>'）; 
}）; 
 
 
 socket.on（'updaterooms'，函数（rooms，current_room）{
 $（'＃rooms'）。empty（）; 
 $ .each （房间，功能（键，值）{
 if（value == current_room）{
 $（'＃rooms'）。append（'< div>'+ value +'< / div> ;'）; 
} 
 else {
 $（'＃rooms'）。append（'< div>< a href =＃onclick =switchRoom（\'） '+ value +'\'）>'+ value +'< / a>< / div>'）; 
} 
}）; 
}）; 
 
功能switchRoom（房间）{
 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>房间< / 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 =datastyle =width：200px; /> 
< input type =buttonid =datasendvalue =send/> 
< / div> 
  

请帮助我们，我已经阅读过socket.io文档。但我发现很难理解。我希望你能帮助我们。在此先感谢，对不起，我还在学习socket.io和node.js.谢谢。

解决方案

这可能有所帮助：

服务器.js（没有关于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 '，'你已经连接到Lobby'）; 
 socket.broadcast.to（'Lobby'）。emit（'updatechat'，'SERVER'，用户名+'已连接到这个房间'）; 
 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'，'你已连接到'+ newroom）; 
 socket.broadcast.to（oldroom）.emit（'updatechat'，'SERVER'，socket.username +'离开了这个房间'）; 
 socket.room = newroom; 
 socket.broadcast.to（newroom）.emit（'updatechat'，'SERVER'，socket.username +'已加入此房间'）; 
 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 +'已断开连接'）; 
 socket.leave（socket.room）; 
}）; 
}）; 
  

index.html

 < head> 
 ... //您的其他代码
< script> 
 var socket = io.connect（'http：// localhost：8000'）; 
 
 socket.on（'connect'，function（）{
 socket.emit（'adduser'，prompt（你叫什么名字：））; 
}）; 
 
 socket.on（'updatechat'，函数（用户名，数据）{
 $（'＃conversation'）。append（'< b>'+ username +'：< / b>'+ data +'< br>'）; 
}）; 
 
 
 socket.on（'updaterooms'，函数（rooms，current_room）{
 $（'＃rooms'）。empty（）; 
 $ .each （房间，功能（键，值）{
 if（value == current_room）{
 $（'＃rooms'）。append（'< div>'+ value +'< / div> ;'）; 
} 
 else {
 $（'＃rooms'）。append（'< div>< a href =＃onclick =switchRoom（\'） '+ value +'\'）>'+ value +'< / a>< / div>'）; 
} 
}）; 
}）; 
 
功能switchRoom（房间）{
 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>房间< / 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 =datastyle =width：200px; /> 
< input type =buttonid =datasendvalue =send/> 
< / div> 
 
< div style =float：left; width：300px; height：250px; overflow：scroll-y; padding：10px;> 
< div id =room creation>< / div> 
< input id =roomnamestyle =width：200px; /> 
< input type =buttonid =roombuttonvalue =create room/> 
< / div> 
 ... //页面的其余部分
< / body> 
  

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 rooms and push the created room names to rooms[]. My goal is to allow users to create their own room and delete it if possible. I used the code of Michael Mukhin here as a reference.

Here is the code of my 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);
    });
});

Here is the code in the client index.html I would like to create a room and add it to the list of 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>

Please help me guys I've already read socket.io documentation. But I found it hard to understand. I hope you can help me guys. Thanks in advance, i'm sorry but i'm still learning socket.io and node.js. Thanks.

解决方案

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>

这篇关于Node.js和Socket.io创建空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！