如何通过在 url 中输入名称来让用户进入特定房间?socket.io [英] how to make the user enter a specific room by typing it's name int the url? socket.io

问题描述

我想实现一个简单的应用程序，比如 slack，我输入一个房间名称，它会创建一个具有该名称的房间，任何人都可以通过在 url 中输入它的名称来加入这个房间我尝试了下面的代码，但我认为与 URL 没有关系，所以有什么方法可以直接使用 socket.IO 执行此操作，或者我必须手动执行此操作

I want to implement a simple app like slack, I type a room name and it creates a room with that name and any one can join this room by typing it's name in the url I tried the code below but I think there's no relation with the URL, so is there any way to do that directly with socket.IO or I have to do that manually

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>

推荐答案

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

Your question is a bit odd because when you request a URL, it fetches a page of HTML for the browser to display. No socket.io connection is created by fetching a page. And, servers don't create socket.io connections.

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

So, if you want http://localhost:3000/some_room to get a page that ends up with a socket.io connection in some_room, then there are only a couple ways to get there.

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

First, you need a route on the Express server that serves a page. If some_room can be anything so the path of your URL can literally be anything, then that's probably not a very good design because it means that all possible routes to your server must somehow return the exact same page and you can have no other meaningful routes. That's likely not a good idea or design.

相反，你可以很容易地做到这一点:

Instead, you could easily make it like this:

 http://localhost:3000/chat/some_room

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

Then, you can create a route for /chat. That route can return a web page that will make the appropriate socket.io connection. The simplest way to do this is to make the /chat route return a web page that contains the following code:

<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 中找到的内容发送加入房间的请求.

This uses an approach where the client parses it's own URL and sends a request to join a room based on what it finds in the URL.

还有其他方法:

1. 客户端可以将房间名称作为初始连接的查询参数，这样它就不必发送另一条消息来加入房间.这在技术上更清晰(启动时少一条消息)，但需要弄清楚如何在 socket.io 连接参数上发送查询参数以及如何在服务器端访问它们(可行，但不是我知道的事情)).
2. 服务器可以从 URL 中解析房间名称，并在为页面提供服务时将该房间名称嵌入到客户端的 Javascript 中.我个人不明白为什么这比让客户端 Javascript 本身解析 URL 更好.
3. 服务器可以设置一个带有所需房间名称的cookie，当客户端连接socket.io时，服务器可以从socket.io连接请求附带的cookie中获取房间名称并自动将其添加到该房间(如果同一客户端的多个页面在处理中可能具有不同的房间名称，则会出现问题，因为只有一个 cookie 可能会被覆盖).

这篇关于如何通过在 url 中输入名称来让用户进入特定房间?socket.io的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！