当前位置：首页 > article >正文

说一下你对 webScoket的了解，以及有哪些API

article 2025/1/31 8:27:30

发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

WebSocket 的概念

WebSocket 是一种在 客户端与服务器之间 全双工通信的协议，它在单个 TCP 连接上提供了双向实时通信的能力。WebSocket 克服了传统 HTTP 协议的缺陷，使客户端与服务器能够进行持续的通信，而不需要重复建立和关闭连接。

特点：

全双工通信：允许客户端与服务器同时发送和接收数据。
减少开销：相比 HTTP 轮询，不需要反复建立和断开连接。
实时性强：适用于需要实时数据交换的场景。
基于 TCP 协议：确保数据的可靠传输。

WebSocket 的工作原理

WebSocket 通过 HTTP 握手 来初始化连接，但一旦连接建立，就会升级为 WebSocket 协议。

握手过程

客户端发起 HTTP 请求 并添加 Upgrade 头，表明希望升级为 WebSocket。

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Version: 13

服务器响应请求并确认连接升级。

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

握手成功后，客户端和服务器可以通过 TCP 长连接 进行双向通信。

WebSocket API

WebSocket 提供了一组简单的 JavaScript API，可以用来建立和管理 WebSocket 连接。

1. 创建 WebSocket 连接

const socket = new WebSocket('ws://example.com/socket'); // 使用 ws:// 或 wss://

ws://：非加密连接。
wss://：加密连接（类似 HTTPS）。

2. WebSocket 事件

事件	描述	示例代码
`open`	连接建立成功时触发	`socket.onopen = () => console.log('连接成功');`
`message`	接收到消息时触发	`socket.onmessage = (event) => console.log(event.data);`
`error`	连接出现错误时触发	`socket.onerror = (error) => console.error(error);`
`close`	连接关闭时触发	`socket.onclose = () => console.log('连接已关闭');`

3. 发送消息

使用 send() 方法发送数据：

socket.onopen = () => {
    socket.send('Hello, Server!'); // 发送字符串
    socket.send(JSON.stringify({ type: 'greeting', text: 'Hello!' })); // 发送 JSON 数据
};

4. 关闭连接

使用 close() 方法主动关闭连接：

socket.close(); // 关闭连接

可以通过指定关闭代码和原因：

socket.close(1000, '正常关闭'); // 1000 表示正常关闭

WebSocket 示例

下面是一个简单的 WebSocket 通信示例：

HTML + JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket 示例</title>
</head>
<body>
    <h1>WebSocket 通信示例</h1>
    <button id="sendButton">发送消息</button>
    <div id="output"></div>

    <script>
        // 1. 创建 WebSocket 连接
        const socket = new WebSocket('wss://echo.websocket.org'); // 使用测试服务器

        // 2. 连接成功
        socket.onopen = () => {
            console.log('WebSocket 连接成功');
            document.getElementById('output').innerHTML += '<p>连接成功</p>';
        };

        // 3. 接收消息
        socket.onmessage = (event) => {
            console.log('收到消息：', event.data);
            document.getElementById('output').innerHTML += `<p>收到消息: ${event.data}</p>`;
        };

        // 4. 发送消息
        document.getElementById('sendButton').addEventListener('click', () => {
            const message = 'Hello, WebSocket!';
            socket.send(message);
            console.log('发送消息：', message);
            document.getElementById('output').innerHTML += `<p>发送消息: ${message}</p>`;
        });

        // 5. 关闭连接
        socket.onclose = () => {
            console.log('WebSocket 连接关闭');
            document.getElementById('output').innerHTML += '<p>连接关闭</p>';
        };

        // 6. 错误处理
        socket.onerror = (error) => {
            console.error('WebSocket 错误:', error);
        };
    </script>
</body>
</html>