如何让用户通过输入名称来输入特定房间int int url？ socket.io

Question

我想实现一个简单的应用程序，如松弛，我键入房间名称，它创建一个房间的名称，任何人都可以加入这个房间，通过在url中输入它的名字 我试过下面的代码，但我认为有与URL无关，那么有没有什么办法与socket.IO做到这一点直接或我必须这样做手工

server.js：

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

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

io.on('connection', function(socket){ 
    io.on('connection', function(socket){ 
    socket.join('some room'); 
    console.log("joined rom"); 
}); 
    console.log('a user connected'); 
}); 

http.listen(3000, function(){ 
    console.log('listening on *:3000'); 
}); 

客户端：

<script> 
     var socket = io(); 
    </script> 

Answer 1

你的问题是有点奇怪，因为当你请求一个URL，它获取的浏览器显示HTML的页面。通过获取页​​面不会创建socket.io连接。而且，服务器不会创建socket.io连接。

所以，如果你想让http://localhost:3000/some_room得到一个以some_room的socket.io连接结束的页面，那么只有几种方法可以实现。

首先，您需要提供页面的Express服务器上的路由。如果some_room可以是任何东西，所以URL的路径可以是任何东西，那么这可能不是一个很好的设计，因为它意味着所有可能的路由到您的服务器必须以某种方式返回完全相同的页面，并且您可以没有其他有意义的路由。这可能不是一个好主意或设计。

相反，你可以很容易地使这样的：

http://localhost:3000/chat/some_room 

然后，您可以为/chat创建一个路由。该路由可以返回一个网页，该网页将建立适当的socket.io连接。要做到这一点最简单的方法是使/chat路线返回一个网页，其中包含下面的代码：

<script src="/socket.io/socket.io.js"></script> 
<script> 
    var socket = io(); 
    socket.on('connected', function() { 
     // get path from current URL 
     let room = window.location.pathname.slice(6); // remove leading /chat/ 
     let pos = room.indexOf('/'); 
     if (pos !== -1) { 
      room = room.slice(0, pos); 
     } 
     socket.emit("joinRoom", room); 
    }); 
</script> 

然后，在服务器上：

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

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

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

io.on('connection', function(socket){ 
    // put the client in the requested room 
    socket.on("joinRoom", function(room) { 
     // only allow certain characters in room names 
     // to prevent messing with socket.io internal rooms 
     if (!(/[^\w.]/.test(room))) { 
      socket.join(room); 
     } 
    }); 
}); 
    console.log('a user connected'); 
}); 

http.listen(3000, function(){ 
    console.log('listening on *:3000'); 
}); 

它使用一个方法，即客户端解析它是自己的URL，并根据它在URL中找到的内容发送加入房间的请求。

还有其它的方法：

1. 客户端可以把房间的名称作为初始连接上的查询参数，因此不会有发另一条消息，加入聊天室。这在技术上更清洁（启动时少一条消息），但需要弄清楚如何在socket.io连接参数上发送查询参数，以及如何访问服务器端的查询参数（可以实现，但不是我知道的事情） ）。
2. 服务器可以从网址中解析房间名称，并在服务该页面时将该房间名称嵌入到客户端的Javascript中。我没有亲自看到为什么这比仅仅让客户端JavaScript解析URL本身更好。
3. 服务器可以设置一个具有所需房间名称的cookie，当客户端与socket.io连接时，服务器可以从随该套接字附带的cookie获取房间名称。io连接请求并自动将其添加到该房间（如果由于只有一个可能被覆盖的cookie，可能会出现不同房间名称的同一客户端正在处理多个页面时会出现问题）。

Answer 2

确保空间名称是单个字符串。它会工作。

io.on('connection', function(socket){ 
     io.on('connection', function(socket){ 
     socket.join('some_room'); 
     console.log("joined rom"); 
    });