如何使用Socket.io发送URL查询字符串并在页面跳转时保留参数

1. 表单提交：发送Socket数据并跳转带参数 #

先处理初始表单页面（比如index.html），用户提交表单时，先通过Socket.io把数据发去服务器，再跳转到website.html并自动带上uname参数：

<!-- index.html -->
<form id="userForm">
  <input type="text" name="uname" placeholder="Enter your name" required>
  <button type="submit">Submit</button>
</form>

<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const form = document.getElementById('userForm');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const uname = form.uname.value;
  
  // 1. 通过Socket.io把表单数据传给服务器
  socket.emit('userData', { uname });
  
  // 2. 跳转到website.html，用encodeURIComponent处理特殊字符避免URL出错
  window.location.href = `/website.html?uname=${encodeURIComponent(uname)}`;
});
</script>

服务器端（Node.js + Express + Socket.io）接收这个事件的代码：

// server.js
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

io.on('connection', (socket) => {
  socket.on('userData', (data) => {
    console.log('Received user data:', data);
    // 这里可以做数据存储、验证等操作
  });
});

// 托管静态HTML文件
app.use(express.static('public'));

server.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

2. 在website.html中保留uname并处理按钮跳转 #

接下来处理website.html，先从URL里提取uname，然后给跳转按钮绑定事件，自动带上这个参数；同时创建新Socket连接时也可以把参数传过去：

<!-- website.html -->
<h1>Welcome <span id="username"></span>!</h1>
<button class="nav-btn" data-target="page1.html">Go to Page 1</button>
<button class="nav-btn" data-target="page2.html">Go to Page 2</button>

<script src="/socket.io/socket.io.js"></script>
<script>
// 从URL查询字符串里提取uname参数
const urlParams = new URLSearchParams(window.location.search);
const uname = urlParams.get('uname');

// 页面上显示用户名
if (uname) {
  document.getElementById('username').textContent = uname;
}

// 统一处理所有跳转按钮：自动拼接uname参数
const navButtons = document.querySelectorAll('.nav-btn');
navButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    const targetPage = btn.dataset.target;
    window.location.href = `${targetPage}?uname=${encodeURIComponent(uname)}`;
  });
});

// 创建Socket连接时把uname传给服务器（可选，根据业务需求）
const socket = io({
  query: {
    uname: uname
  }
});

// 服务器端可以这样获取这个参数
// io.on('connection', (socket) => {
//   const user = socket.handshake.query.uname;
//   console.log('Connected user:', user);
// });
</script>

3. 其他页面的通用处理逻辑 #

如果page1.html、page2.html这类页面也需要使用uname参数和Socket连接，直接复用提取参数和跳转的逻辑就行：

<!-- page1.html -->
<h1>Page 1 - Hello <span id="username"></span></h1>
<button class="nav-btn" data-target="website.html">Back to Home</button>

<script src="/socket.io/socket.io.js"></script>
<script>
const urlParams = new URLSearchParams(window.location.search);
const uname = urlParams.get('uname');

if (uname) {
  document.getElementById('username').textContent = uname;
}

// 跳转按钮同样自动带参数
const navButtons = document.querySelectorAll('.nav-btn');
navButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    const targetPage = btn.dataset.target;
    window.location.href = `${targetPage}?uname=${encodeURIComponent(uname)}`;
  });
});

// 同样可以传递参数到Socket连接
const socket = io({ query: { uname } });
</script>

关键注意点 #

• 一定要用encodeURIComponent()处理uname参数，避免特殊字符（比如空格、中文）导致URL解析错误
• 用URLSearchParams统一提取查询参数，比手动拆分URL字符串更可靠
• Socket连接时通过query选项传参数，服务器可以通过socket.handshake.query直接获取
• 给跳转按钮加data-target属性，统一处理跳转逻辑，减少重复代码

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