插座问题.io加入房间

Question

我的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();
      }
    });

谢谢。

Answer 1

我制作了这个小演示来解释，我通过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>

Answer 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();
      }
    });