首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何通过在url中键入用户的名称来让用户进入特定的房间?socket.io

如何通过在url中键入用户的名称来让用户进入特定的房间?socket.io
EN

Stack Overflow用户
提问于 2017-09-08 18:07:07
回答 2查看 2.1K关注 0票数 1

我想要实现一个简单的应用程序,比如松弛,我输入了一个房间名,它用这个名字创建了一个房间,任何人都可以通过在URL中输入它的名字加入这个房间--我尝试了下面的代码,但是我认为它与socket.IO没有任何关系,那么有什么方法可以直接使用socket.IO或者我必须手动这样做呢?

server.js:

代码语言:javascript
运行
复制
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');
});

客户:

代码语言:javascript
运行
复制
  <script>
      var socket = io();
    </script>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-09-08 23:15:27

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

因此,如果您希望http://localhost:3000/some_room获得一个以some_room中的socket.io连接结束的页面,那么只有几种方法可以达到这个目的。

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

相反,您可以很容易地做到这样:

代码语言:javascript
运行
复制
 http://localhost:3000/chat/some_room

然后,您可以为/chat创建一个路由。该路由可以返回将建立适当socket.io连接的网页。最简单的方法是让/chat路由返回一个包含以下代码的网页:

代码语言:javascript
运行
复制
<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>

然后,在服务器上:

代码语言:javascript
运行
复制
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. 服务器可以从URL中解析房间名称,并在服务页面时将该房间名称嵌入到客户机的Javascript中。我个人不明白为什么这比让客户端Javascript解析URL本身更好。
  3. 服务器可以使用所需的房间名称设置cookie,并且当客户端连接到socket.io时,服务器可以从socket.io连接请求附带的cookie中获取房间名称,并自动将其添加到该房间(如果同一个客户端正在处理多个页面,并且可能有不同的房间名称,则会出现问题,因为只有一个cookie可能会被覆盖)。
票数 2
EN

Stack Overflow用户

发布于 2017-09-08 18:15:25

确保房间名称是单字符串。看起来不错。

代码语言:javascript
运行
复制
   io.on('connection', function(socket){
      io.on('connection', function(socket){
      socket.join('some_room');
      console.log("joined rom");
    });
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46122290

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档