首页 > 文章 > 前端

浏览器如何使用WebSocket？

时间：2025-06-29 23:27:39 176浏览收藏

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《浏览器如何使用WebSocket？》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

WebSocket 是一种实现实时双向通信的协议，通过创建 WebSocket 对象、监听事件、发送和关闭连接实现交互；常见连接失败原因包括服务器地址错误、CORS限制、防火墙拦截、服务器不可用、协议版本不兼容、资源耗尽及证书问题；断线重连可通过监听 close 事件、设置指数退避重连间隔、限制最大重连次数及状态提示提升可靠性；身份验证可在连接建立前通过 URL 参数、HTTP 头部或子协议传递，也可在连接后发送认证消息，权限控制则基于角色、访问控制列表、令牌验证和中间件实现；相比 HTTP 的短连接、单向通信、高开销，WebSocket 支持长连接、双向通信、低开销，适用于实时聊天、游戏、交易等场景，而 HTTP 更适合静态资源请求。

WebSocket在浏览器端怎么用？

WebSocket 是一种在客户端和服务器之间建立持久连接的通信协议。在浏览器端使用 WebSocket，意味着你可以创建一个实时的、双向的数据流，而无需像传统的 HTTP 请求那样频繁地建立和关闭连接。它特别适合需要低延迟和高吞吐量的应用，比如在线游戏、实时聊天、股票交易等。

解决方案

创建 WebSocket 对象:
首先，你需要创建一个 WebSocket 对象。这通常在 JavaScript 中完成，通过 new WebSocket() 构造函数，传入 WebSocket 服务器的 URL。
```
const socket = new WebSocket('ws://your-websocket-server.com'); // 替换为你的 WebSocket 服务器地址
```
这里的 ws:// 协议类似于 HTTP 的 http://，而 wss:// 则是安全的 WebSocket 连接，类似于 HTTPS。

监听 WebSocket 事件:

WebSocket 对象会触发一系列事件，你需要监听这些事件来处理不同的情况。

open: 当连接成功建立时触发。

socket.onopen = () => {
    console.log('WebSocket 连接已建立');
    // 可以在这里发送初始化消息
    socket.send('你好，服务器！');
};

message: 当从服务器接收到消息时触发。

socket.onmessage = (event) => {
    console.log('收到消息：', event.data);
    // 处理接收到的消息
};

close: 当连接关闭时触发。

socket.onclose = (event) => {
    if (event.wasClean) {
        console.log(`连接已关闭，状态码：${event.code}，原因：${event.reason}`);
    } else {
        // 例如，服务器进程崩溃或网络不可用
        // 在这种情况下，event.code 通常为 1006
        console.error('连接异常关闭');
    }
};

error: 当发生错误时触发。

socket.onerror = (error) => {
    console.error('WebSocket 错误：', error);
};

发送数据:
使用 socket.send() 方法可以向服务器发送数据。数据可以是字符串、ArrayBuffer、Blob 等类型。
```
socket.send('这是一条消息'); // 发送字符串
```
关闭连接:
使用 socket.close() 方法可以关闭 WebSocket 连接。
```
socket.close();
```

WebSocket 连接失败的常见原因及排查方法

WebSocket 连接失败的原因有很多，从网络问题到服务器配置，都可能导致连接中断。

服务器地址错误: 检查 WebSocket 服务器的 URL 是否正确。一个常见的错误是协议类型不匹配，例如客户端尝试使用 ws:// 连接到只支持 wss:// 的服务器。
CORS 问题: 尽管 WebSocket 本身不直接受 CORS 限制，但在某些服务器配置下，如果服务器没有正确配置允许跨域连接，可能会导致连接失败。确保服务器允许来自你的域的 WebSocket 连接。
防火墙或代理问题: 防火墙或代理服务器可能会阻止 WebSocket 连接。检查你的网络配置，确保允许 WebSocket 流量通过。
服务器未启动或不可用: 确保 WebSocket 服务器正在运行，并且可以从客户端访问。可以使用 ping 命令或 telnet 命令来测试服务器的可访问性。
协议版本不兼容: 客户端和服务器可能使用不兼容的 WebSocket 协议版本。确保客户端和服务器都支持相同的协议版本。
服务器资源耗尽: 如果 WebSocket 服务器的资源（例如内存、CPU）耗尽，可能会导致连接失败。监控服务器资源使用情况，确保服务器有足够的资源来处理 WebSocket 连接。
证书问题（对于 wss://）: 如果使用 wss://，确保服务器的 SSL 证书是有效的，并且客户端信任该证书。自签名证书可能会导致连接失败，除非客户端显式信任该证书。

如何处理 WebSocket 断线重连？

WebSocket 连接可能会因为各种原因中断，例如网络不稳定、服务器重启等。为了提高应用的可靠性，需要实现断线重连机制。

监听 close 事件: 在 onclose 事件处理函数中，检测连接关闭的原因。如果连接不是由客户端主动关闭的，则尝试重新连接。
设置重连间隔: 为了避免立即发起大量重连请求，可以设置一个重连间隔。可以使用指数退避算法来逐渐增加重连间隔，例如第一次重连间隔为 1 秒，第二次为 2 秒，第三次为 4 秒，以此类推。
限制重连次数: 为了防止无限重连，可以设置一个最大重连次数。如果达到最大重连次数，则停止重连，并向用户显示错误信息。
状态指示: 在重连期间，向用户显示一个状态指示器，例如 "正在尝试重新连接..."。

代码示例:

const websocketURL = 'ws://your-websocket-server.com';
let socket;
let reconnectInterval = 1000; // 初始重连间隔为 1 秒
let maxReconnectAttempts = 10; // 最大重连次数
let reconnectAttempts = 0;

function connect() {
    socket = new WebSocket(websocketURL);

    socket.onopen = () => {
        console.log('WebSocket 连接已建立');
        reconnectAttempts = 0; // 重置重连次数
        reconnectInterval = 1000; // 重置重连间隔
        // 可以在这里发送初始化消息
        socket.send('你好，服务器！');
    };

    socket.onmessage = (event) => {
        console.log('收到消息：', event.data);
        // 处理接收到的消息
    };

    socket.onclose = (event) => {
        if (event.wasClean) {
            console.log(`连接已关闭，状态码：${event.code}，原因：${event.reason}`);
        } else {
            console.error('连接异常关闭');
            // 尝试重连
            if (reconnectAttempts < maxReconnectAttempts) {
                reconnectAttempts++;
                console.log(`尝试第 ${reconnectAttempts} 次重连，间隔 ${reconnectInterval} ms`);
                setTimeout(connect, reconnectInterval);
                reconnectInterval *= 2; // 指数退避
            } else {
                console.error('达到最大重连次数，停止重连');
                // 显示错误信息
            }
        }
    };

    socket.onerror = (error) => {
        console.error('WebSocket 错误：', error);
    };
}

connect(); // 初始连接

WebSocket 如何进行身份验证和权限控制？

身份验证和权限控制对于保护 WebSocket 连接至关重要。

在连接建立时进行身份验证:
- URL 查询参数: 将身份验证令牌作为 URL 查询参数传递给 WebSocket 服务器。
```
const token = 'your_auth_token';
const socket = new WebSocket(`ws://your-websocket-server.com?token=${token}`);
```
  服务器在建立连接时验证令牌。
- HTTP 头部: 在 WebSocket 握手时，可以发送自定义 HTTP 头部。
  由于浏览器对 WebSocket 握手头部控制有限，这种方法可能需要在服务器端进行特殊配置。
- 子协议协商: 使用 WebSocket 子协议协商机制来传递身份验证信息。
在连接建立后进行身份验证:
- 发送身份验证消息: 连接建立后，客户端立即向服务器发送一个包含身份验证信息的 JSON 消息。
```
socket.onopen = () => {
    const authMessage = {
        type: 'auth',
        token: 'your_auth_token'
    };
    socket.send(JSON.stringify(authMessage));
};
```
  服务器验证身份验证信息，并根据验证结果决定是否保持连接。
权限控制:
- 基于角色的访问控制 (RBAC): 根据用户的角色来授予不同的权限。例如，管理员可以执行所有操作，而普通用户只能执行有限的操作。
- 访问控制列表 (ACL): 为每个资源定义一个访问控制列表，指定哪些用户或角色可以访问该资源。
- 令牌验证: 使用 JWT (JSON Web Token) 等令牌来验证用户的身份和权限。服务器可以验证令牌的签名和声明，以确定用户是否有权执行特定操作。
- 中间件: 使用中间件来拦截 WebSocket 消息，并根据用户的权限来决定是否允许消息通过。

WebSocket 和 HTTP 的区别与适用场景

连接类型: HTTP 是无状态的、短连接协议，每次请求都需要建立新的连接。WebSocket 是有状态的、长连接协议，一旦建立连接，就可以保持连接状态，进行双向通信。
通信方式: HTTP 是单向的，客户端发起请求，服务器响应请求。WebSocket 是双向的，客户端和服务器可以随时向对方发送数据。
协议开销: HTTP 头部通常比较大，每次请求都需要发送大量的头部信息。WebSocket 头部比较小，可以减少网络传输的开销。
实时性: WebSocket 具有更好的实时性，可以实现实时推送、实时聊天等功能。HTTP 需要使用轮询或长轮询等技术来模拟实时性，效率较低。
适用场景:
- WebSocket: 实时聊天、在线游戏、股票交易、实时数据监控等需要低延迟和高吞吐量的应用。
- HTTP: 静态资源请求、页面浏览、文件下载等不需要实时性的应用。

选择 WebSocket 还是 HTTP 取决于具体的应用场景。如果需要实时性，WebSocket 是更好的选择。如果不需要实时性，HTTP 也可以满足需求。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

浏览器端