Socket.io服务端创建动态房间 生成带roomId的可分享URL

核心逻辑拆为3步，不要把房间创建和页面跳转绑定在原生表单提交动作上：

• 服务端负责生成全局唯一的roomId，收到创建房间请求后将ID回传给请求方，不主动控制页面跳转
• 客户端拦截表单默认提交动作，拿到服务端返回的roomId后，手动拼接带查询参数的URL再触发跳转
• 页面加载时优先读取URL上的roomId参数，如果存在就直接发起加入对应房间的请求，不需要走创建流程

• 配置错误：Express原生不支持PHP作为视图引擎，现有app.set('view engine', 'php')配置无效；CORS配置里的optionSuccesStatus存在拼写错误
• 触发时机错误：createRoom事件在页面加载时就触发，和用户点击提交按钮的动作完全脱节
• 逻辑断层：服务端生成roomId后没有回传给客户端，客户端拿不到房间ID自然无法拼接带参URL
• 缺失入房逻辑：没有处理带roomId的分享链接访问场景，用户点击链接进入页面后无法自动加入对应房间

1. 服务端 server.js #

如果需要解析PHP文件，先执行npm install php-express安装对应依赖；如果PHP文件仅作为前端静态模板，直接用静态资源托管即可。
修正后代码：

const express = require('express');
const app = express();
const httpServer = require('http').createServer(app);
const { getRandomString } = require("../utils/utils");
// 启用PHP模板解析时放开下面两行，纯静态托管可注释
// const phpExpress = require('php-express');
// app.set('views', '../../path');

const io = require("socket.io")(httpServer, {
  cors: {
    optionSuccessStatus: 200, // 修正原配置拼写错误
    origin: "http://localhost:3000",
    methods: ["GET", "POST"],
    credentials: true,
  }
});

// 托管静态资源，将path.php放在public/path目录下即可直接访问
app.use(express.static('public'));
app.use(express.urlencoded({ extended: true }));
// PHP模板引擎配置，纯静态托管可注释
// app.engine('php', phpExpress.engine);
// app.set('view engine', 'php');

// 存储已创建的有效房间，用于重复校验
const activeRooms = new Set();

io.on('connection', client => {
  // 创建房间逻辑
  client.on('createRoom', (callback) => {
    let roomId;
    // 循环生成不重复的7位房间ID
    do {
      roomId = getRandomString(7);
    } while (activeRooms.has(roomId));
    
    activeRooms.add(roomId);
    client.join(roomId);
    console.log(`房间 ${roomId} 已创建，创建者socketID: ${client.id}`);
    // 通过socket回调把生成的roomId回传给客户端
    callback({ roomId });
  });

  // 加入已有房间逻辑
  client.on('joinRoom', (roomId, callback) => {
    if (!activeRooms.has(roomId)) {
      return callback({ success: false, msg: '房间不存在或已解散' });
    }
    client.join(roomId);
    console.log(`用户 ${client.id} 加入房间 ${roomId}`);
    callback({ success: true });
  });

  // 可选：用户断开时自动清理空房间，避免ID冗余
  client.on('disconnecting', () => {
    client.rooms.forEach(room => {
      if (room !== client.id && io.sockets.adapter.rooms.get(room)?.size === 1) {
        activeRooms.delete(room);
        console.log(`空房间 ${room} 已自动销毁`);
      }
    });
  });
});

httpServer.listen(3000, () => {
  console.log('服务运行在 http://localhost:3000');
});

2. 客户端逻辑 client.js #

删除原有页面加载就触发创建房间的逻辑，替换为以下代码：

const socket = io(document.location.protocol + '//' + document.location.host);
// 读取URL上的roomId查询参数
const urlParams = new URLSearchParams(window.location.search);
const roomId = urlParams.get('roomId');

// 如果URL携带roomId，直接发起加入房间请求
if (roomId) {
  socket.emit('joinRoom', roomId, (res) => {
    if (!res.success) {
      alert(res.msg);
      // 房间无效时跳回首页
      window.location.href = '/path/path.php';
    }
  });
}

// 拦截表单提交事件
const form = document.getElementById('formulaire_creation_jeu');
if (form) {
  form.addEventListener('submit', (e) => {
    // 阻止原生表单默认跳转
    e.preventDefault();
    const username = document.getElementById('username').value.trim();
    if (!username) return;
    
    // 向服务端请求创建房间
    socket.emit('createRoom', (res) => {
      // 拿到服务端返回的roomId后，拼接带参URL跳转
      window.location.href = `/path/path.php?roomId=${res.roomId}`;
    });
  });
}

3. 页面表单 page.php #

原有表单不需要大改，保持现有DOM结构即可，注意不要修改表单和输入框的ID，确保客户端JS能正常获取DOM元素。如果需要做无JS降级，可以保留form的action属性，JS正常加载时会自动拦截提交动作，不会触发原生跳转。

• 打开表单页面，输入昵称点击创建按钮，页面会自动跳转到localhost:3000/path/path.php?roomId=xxxxxxx格式的地址
• 服务端控制台会打印对应房间的创建日志
• 复制跳转后的完整URL在新标签页打开，会自动加入同一个房间，服务端会打印用户加入日志
• 房间内所有用户退出后，空房间会自动被清理，避免ID重复冲突
  注意：随机生成的短ID存在极小概率重复的可能，上面的服务端代码已经加了去重校验，不需要额外修改getRandomString方法。

内容的提问来源于stack exchange，提问作者chubby marschmallow