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

发现宝藏

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

WebSocket 的概念

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

特点：

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

WebSocket 的工作原理

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

握手过程

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

http 复制代码

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

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

http 复制代码

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

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

WebSocket API

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

1. 创建 WebSocket 连接

javascript 复制代码

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() 方法发送数据：

javascript 复制代码

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

4. 关闭连接

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

javascript 复制代码

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

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

javascript 复制代码

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

WebSocket 示例

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

HTML + JavaScript 代码

html 复制代码

<!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>

WebSocket 应用场景

实时聊天：如在线客服、聊天室。
实时数据推送：如股票行情、天气更新。
在线协同编辑：如 Google Docs 的多人编辑功能。
实时游戏：如多人在线游戏中的状态同步。
IoT 数据传输：设备与服务器间进行实时数据通信。

总结

WebSocket 提供了高效的双向通信能力，适用于需要实时交互的场景。
使用简单的 API：open、message、close、error 等事件。
支持文本和二进制数据传输，可以与服务器轻松实现长连接。

在现代 Web 开发中，WebSocket 已成为实现实时通信的重要工具。