当前位置：首页 > 文章列表 > 文章 > java教程 > 正确发起WebSocket连接方法详解

正确发起WebSocket连接方法详解

2026-02-07 16:12:42 0浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《浏览器正确发起 WebSocket 连接方法》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

如何在浏览器中正确发起 WebSocket 连接（而非 HTTP 请求）

浏览器直接访问 WebSocket 服务器地址（如 http://127.0.0.1:5801）会触发普通 HTTP GET 请求，不会携带 `Sec-WebSocket-Key`；必须通过前端 HTML 页面调用 JavaScript `WebSocket` API 才能发起符合协议的 WebSocket 握手。

WebSocket 是一种独立于 HTTP 的全双工通信协议，其连接建立依赖标准的 HTTP 升级（Upgrade）机制，但该机制仅在客户端显式调用 new WebSocket(url) 时触发。当你在浏览器地址栏输入 http://127.0.0.1:5801 并回车，浏览器执行的是常规页面导航（navigation），发送的是 Accept: text/html 类型的 HTTP 请求——这与 WebSocket 握手完全无关，因此自然不会包含 Sec-WebSocket-Key、Upgrade: websocket、Connection: Upgrade 等必需头字段。

✅ 正确做法是：
部署一个静态 HTML 页面（例如 index.html），在其中使用原生 WebSocket 构造函数连接你的服务端：

<!DOCTYPE html>
<html>
<head><title>WebSocket Client</title></head>
<body>
  <h2>WebSocket Test Client</h2>
  <div id="status">Connecting...</div>
  <script>
    const host = "ws://127.0.0.1:5801"; // 注意：使用 ws:// 或 wss://，非 http://

    const socket = new WebSocket(host);

    socket.onopen = () => {
      document.getElementById("status").textContent = "✅ Connected";
      socket.send("Hello from browser!");
    };

    socket.onmessage = (event) => {
      console.log("Received:", event.data);
      alert(`Server says: ${event.data}`);
    };

    socket.onerror = (err) => {
      document.getElementById("status").textContent = "❌ Connection failed";
      console.error("WebSocket error:", err);
    };

    socket.onclose = () => {
      document.getElementById("status").textContent = "⚠️ Disconnected";
    };
  </script>
</body>
</html>

? 关键注意事项：

✅ URL 必须以 ws://（开发）或 wss://（生产 HTTPS）开头；http:// 会导致 SecurityError；
✅ 确保 Java WebSocket 服务端已正确实现 @OnOpen、@OnMessage 等生命周期方法，并监听对应路径（如 /）；
❌ 不要尝试用 fetch()、XMLHttpRequest 或表单提交模拟 WebSocket —— 它们无法触发协议升级；
? 若服务端启用了跨域限制（如 Tomcat 默认拦截），需在服务端配置允许来源（如 @ServerEndpoint(value = "/", configurator = CorsConfigurator.class)）；
? 调试建议：使用浏览器开发者工具的 Network → WS 标签页查看 WebSocket 连接详情，确认请求头中是否包含 Sec-WebSocket-Key 和 Upgrade: websocket。

简言之：浏览器本身不“访问 WebSocket”，而是由网页中的 JavaScript 主动发起 WebSocket 连接。这是协议设计决定的——它保障了安全性与语义明确性。把 HTML 文件托管在任意 Web 服务器（甚至 file:// 协议下部分浏览器也支持），即可完成端到端握手验证。

到这里，我们也就讲完了《正确发起WebSocket连接方法详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！