一、原生支持
浏览器原生支持 WebSocket 协议,这使得开发者可以直接在 JavaScript 代码中使用 WebSocket 来建立与服务器的双向通信通道。
const socket = new WebSocket("ws://localhost:8080");socket.addEventListener("open", function (event) {console.log("WebSocket连接已打开");socket.send("你好,服务器!");});socket.addEventListener("message", function (event) {console.log("收到消息:", event.data);});socket.addEventListener("close", function (event) {console.log("WebSocket连接已关闭");});socket.addEventListener("error", function (event) {console.log("WebSocket出错:", event);});
二、跨域考虑
不过,当 WebSocket 请求涉及跨域时,浏览器会进行安全检查。与传统的 HTTP 请求跨域类似,需要服务器正确配置跨域头信息(如`Access-Control-Allow-Origin`等)来允许跨域的 WebSocket 连接。否则,浏览器可能会阻止 WebSocket 握手,导致连接失败。
例如:如果服务器没有正确配置跨域策略,在浏览器控制台可能会看到类似“WebSocket handshake: Unexpected response code: 403”的错误信息,表示 WebSocket 握手过程中出现问题,服务器返回了禁止访问(403)的状态码。