socket.io 加入房间的问题答案

【问题标题】：Issue with socket.io join roomsocket.io 加入房间的问题
【发布时间】：2015-12-18 08:03:53
【问题描述】：

我对带有房间的 socket.io 有疑问。

查看服务器代码：

下面的这段代码运行正常。

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

 socket.join("myroom");

 socket.on('chat message', function(data){
  io.in("myroom").emit('chat message', data);
 });


});

但我希望用户在活动结束后进入房间。就像下面的代码一样。

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

 socket.on('chat message', function(data){
  io.in("myroom").emit('chat message', data);
 });

 socket.on('join', function(name, device, room){
   socket.join("myroom");
 });


});

这几乎是相同的代码，但不起作用。我做错了什么？

事件被正确调用。

编辑。添加前端代码：

var socket = io.connect('http://localhost:5000');



   $('#msg_form').submit(function(){
     socket.emit('chat message', $("#m").val(), "myroom");
     $('#m').val('');
     return false;
   });

   $("#user").submit(function() {
      var name = $("#name").val();
      var room = $("#room").val();
      var device = navigator.userAgent;

      if (name === "" || name.length < 2) {
        $("#errors").empty();
        $("#errors").append("Please enter a name");
        $("#errors").show();
      } else {
        socket.emit("join", name, device, room);
        $("#messages").focus();
      }
    });

谢谢。

【问题讨论】：

“但不起作用”并没有告诉我们您期望的行为是什么或您观察到的代码在做什么。这不是对您想要的行为或您观察到当前代码正在做什么的充分描述。请更好地解释您的问题和问题。
@jfriend00 消息未在第二个代码上传递。
您是否在“聊天消息”之前收到“加入”消息？此外，您的加入回调显示三个参数，但只有一个。
@jfriend00 是的，我在“聊天消息”之前收到“加入”。在这个例子中，我没有使用任何参数，只是调用方法 join。如果我在连接上调用 join 方法可以正常工作，但不适用于事件。
您的代码还有其他问题您没有披露，因为socket.join() 在连接套接字后的任何时候都可以正常工作。我在我的代码中使用名为“joinRoom”和“leaveRoom”的消息来做与你正在做的事情完全相同的事情——它工作得很好。

标签： node.js express websocket socket.io

【解决方案1】：

我做了这个小demo来解释，我通过setTimeout函数模拟客户端事件：

服务器端：

var http = require('http');
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(9999);

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

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

  socket.on('message', function(data){
  io.in("myroom").emit('message', data);
 });

 socket.on('join', function(name, device, room){
  console.log("new client has joining a room");
   socket.join("myroom");
 });
  });

客户端：

    <script src="/socket.io/socket.io.js"></script>
<script>


var socket = io.connect('http://localhost:9999');

setTimeout(function () { console.log("msg emmited to server");
    socket.emit('join');

}, 

    10000);
setTimeout(function () {
 console.log("msg emmited to server");
    socket.emit("message","message from client");
}, 

    20000);

socket.on("message",function(data){
  console.log("message received from server ="+data);
    }
    );

</script>

【讨论】：

【解决方案2】：

在您的$("#user").submit(...) 处理程序中，您不会阻止表单的默认操作，因此很可能会在您点击提交按钮后立即重新加载页面。而且，这将在您点击加入后立即重置您的连接，为您提供一个未加入房间的新初始化连接。

您可以将return false; 添加到该处理程序或将e 参数添加到该处理程序并调用e.preventDefault() 以防止在您点击提交时重新加载页面。

  $("#user").submit(function(e) {
      e.preventDefault();
      var name = $("#name").val();
      var room = $("#room").val();
      var device = navigator.userAgent;

      if (name === "" || name.length < 2) {
        $("#errors").empty();
        $("#errors").append("Please enter a name");
        $("#errors").show();
      } else {
        socket.emit("join", name);
        $("#messages").focus();
      }
    });

【讨论】：

就是这样！非常感谢你的帮助。 :)