服务器创建Room socket.io和特定的URL

Question

我想通过服务器创建动态室，并像这样个性化URL：localhost：3000/path/path.php？roomid。

我有一个表格供用户输入他们的名字，然后单击一个提交按钮“创建一个房间”，他们将输入此类型的URL页面：“ localhost：3000/path/path/path.php？ “其中 homeid 是单击按钮时服务器创建的。

在我创建一个房间的那一刻，我只有URL“ localhost：3000/path/path.php ”，但我想个性化URL，因此它变成 localhost：3000/path /path.php?roomid

其背后的想法是能够共享链接 localhost：3000/path/path/path.php？roomid ，以便他们可以直接加入仅通过单击共享链接（代码适用于多玩家游戏，因此我想创建一个可共享的URL和唯一的链接，例如游戏skribbl.io）。

然而;我只看到用户进入房间名称的教程，因此我不知道如何解决此问题。

这是我的代码： server.js

const express = require('express');
const app = express();
const httpServer = require('http').createServer(app);
const { getRandomString } = require("../utils/utils");

const io = require("socket.io")(httpServer, {
  cors: {
    optionSuccesStatus: 200,
    origin: "http://localhost",
    methods: ["GET", "POST"],
    credentials: true,
  }
});
//tbh I don't really understand all those lines, I just got it by following lots of tutorials
app.set('views', '../../path.php');
app.set('view engine', 'php');
app.use(express.urlencoded({ extended: true }));

io.on('connection', client => {

  //Creation private room
  client.on('createRoom', () => {
    var roomId = getRandomString(7); // use a function to create a random code room
    console.log("player joined");
    client.join(roomId);
  });
}

client.js：

const socket = io(document.location.protocol+'//'+document.location.host +":3000");

socket.emit('createRoom');

表单page.php：

<form id = "formulaire_creation_jeu" method='POST' action="path.php">
    <div id="pseudo" class='form-group mb-6'>
         <label for="username" class='form-label inline-block mb-2 text-gray-700'>Pseudo</label>
         <input id="username" type='text' name="username" required minlength="2" maxlength="15" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                        class='form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 transition ease-in-out focus:text-gray-700 focus:bg-white focus:border-black focus:outline-none'>
          <div id="error_container_pseudo"></div>
     </div>    
     <div>
          <button type="submit" class="inline-block px-6 py-2.5 bg-yellow-400 text-black font-medium text-xs font-serif leading-tight uppercase rounded shadow-md hover:bg-yellow-500 hover:shadow-lg focus:bg-yellow-500 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-yellow-500 active:shadow-lg transition duration-150 ease-in-out">
              Create a room
          </button>  
     </div>
</form>

在我的以下代码中，当我提交表单时，我只有这样的链接： localhost：3000/path/path/path.php 。服务器和客户端已连接，但我不确定它甚至创建了一个房间。 预先感谢您的帮助

Answer 1

因此，您唯一想要的是要生成服务器端的 RoomID - 我看不出是什么阻止您在客户端上发出此功能：

const socket = io(document.location.protocol+'//'+document.location.host +":3000");
socket.emit('createRoom');

然后在服务器端上：

io.on('connection', client => {

  // Create private room
  client.on('createRoom', ({roomId}) => {
    console.log("Player wants to create a room");
    client.join(getRandomString(7));
  });
}

唯一的区别是，我将 getRandomstring（7）从客户端移至服务器。