借助Cloudflare Worker代理在站点启动时修改WebSocket代码

1. 搭建GitHub Pages基础站点 #

• 新建GitHub仓库（例如命名ws-proxy-site），在仓库设置中开启GitHub Pages，选择main分支根目录作为部署源。
• 仓库中添加index.html文件，作为后续注入WebSocket修改逻辑的载体。

2. 创建Cloudflare Worker代理 #

• 登录Cloudflare后台，创建新的Worker服务。
• 替换Worker默认代码为以下转发逻辑（按需修改目标WebSocket地址）：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // 替换为你要代理的目标WebSocket服务器地址
  const targetWsUrl = new URL('wss://your-target-site.com/ws-endpoint')
  const modifiedRequest = new Request(targetWsUrl, {
    method: request.method,
    headers: request.headers,
    body: request.body,
    redirect: 'follow'
  })
  const response = await fetch(modifiedRequest)
  // 直接转发WebSocket响应
  if (response.webSocket) {
    return response
  }
  return response
}

• 部署Worker，记录Worker的访问域名（例如your-worker-name.your-cloudflare-account.workers.dev）。

3. 在GitHub Pages页面中重写WebSocket #

• 修改仓库中的index.html，在页面头部注入重写WebSocket构造函数的脚本，将目标地址替换为Worker代理地址：

<!DOCTYPE html>
<html>
<head>
  <script>
    // 提前重写WebSocket构造函数
    const OriginalWebSocket = window.WebSocket;
    window.WebSocket = function(url, protocols) {
      // 将目标站点的WebSocket地址替换为Worker代理地址
      const proxyUrl = url.replace('wss://your-target-site.com/ws-endpoint', 'wss://your-worker-name.your-cloudflare-account.workers.dev');
      return new OriginalWebSocket(proxyUrl, protocols);
    };
    // 同步原型方法，避免功能异常
    window.WebSocket.prototype = OriginalWebSocket.prototype;
  </script>
</head>
<body>
  <!-- 测试WebSocket发送逻辑 -->
  <script>
    const ws = new WebSocket('wss://your-target-site.com/ws-endpoint');
    ws.onopen = () => {
      ws.send('测试消息：通过代理发送');
    };
    ws.onmessage = (event) => {
      console.log('收到响应：', event.data);
    };
  </script>
</body>
</html>

• 提交修改到GitHub，等待GitHub Pages自动部署完成。

4. 验证功能 #

访问GitHub Pages的站点地址，打开浏览器开发者工具的控制台，查看WebSocket连接状态和消息收发是否正常。

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