GET表单提交时WebSocket服务无法获取带查询参数的请求URL

出现该现象的本质是普通HTML GET表单提交是常规HTTP页面跳转请求，和WebSocket连接请求是完全独立的两个请求：

• 点击表单提交后，浏览器首先发起普通HTTP GET请求，地址栏变为?id=xxx是该请求触发的页面跳转效果。由于最初的http.createServer没有传入请求处理回调，服务端不会返回有效页面内容，页面加载完成后执行前端WebSocket初始化代码时，若没有手动拼接地址参数，默认发起的WebSocket握手请求地址为根路径/，服务端WebSocket服务收到的请求URL自然只有/。
• 手动指定new WebSocket('ws://localhost:3000/?id=test')时，参数直接携带在WebSocket握手请求的URL中，因此服务端可以正常读取。
• 单独启动HTTP服务能打印带参URL，是因为读取的是表单提交触发的普通HTTP请求的URL，并非WebSocket握手请求的URL。

HTTP服务搭配WebSocket的场景下完全可以获取请求URL，根据业务场景二选一即可：

方案1：表单提交跳转后自动携带参数建立WS连接 #

适合需要保留页面跳转、地址栏带参的场景，服务端同时处理普通HTTP响应和WebSocket连接：

const http = require('http');
const WebSocket = require('ws');
const port = 3000;

// 处理普通HTTP请求，返回页面内容
const server = http.createServer((req, res) => {
  // 普通HTTP请求的URL参数可在此处直接读取
  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
  res.end(`
  <form method="GET">
    <input name="id" placeholder="请输入ID">
    <button type="submit">提交</button>
  </form>
  <script>
    // 初始化WS时，自动拼接当前页面地址的查询参数
    const ws = new WebSocket(\`ws://\${location.host}\${location.search}\`);
    ws.onopen = () => console.log('WS连接已建立');
  </script>
  `);
});

// 挂载WebSocket服务
const ws = new WebSocket.Server({ server });
ws.on('connection', (socket, req) => {
  // 此处即可正常获取WS握手请求携带的URL参数
  console.log('WS连接请求URL：', req.url);
});

server.listen(port);

方案2：拦截表单提交，无刷新建立WS连接 #

适合不需要页面跳转的单页场景，前端直接拦截表单默认跳转行为，拿到表单值后拼接参数发起WS连接：

<form id="wsForm">
  <input name="id" id="idInput" placeholder="请输入ID">
  <button type="submit">连接WS</button>
</form>
<script>
const form = document.getElementById('wsForm');
form.addEventListener('submit', (e) => {
  // 阻止表单默认的GET跳转行为
  e.preventDefault();
  const inputId = document.getElementById('idInput').value.trim();
  // 拼接参数发起WS连接
  const ws = new WebSocket(`ws://${location.host}/?id=${encodeURIComponent(inputId)}`);
  // 后续WS业务逻辑...
})
</script>

注意：ws.on('connection')事件仅会在客户端发起WebSocket握手请求（请求头携带Upgrade: websocket）时触发，普通的HTTP表单请求、静态资源请求都需要在http.createServer的回调函数中单独处理。

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