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

发现宝藏

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


WebSocket 的概念

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

特点

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

WebSocket 的工作原理

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

握手过程
  1. 客户端发起 HTTP 请求 并添加 Upgrade 头,表明希望升级为 WebSocket。

    http 复制代码
    GET /chat HTTP/1.1
    Host: example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
    Sec-WebSocket-Version: 13
  2. 服务器响应请求并确认连接升级。

    http 复制代码
    HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
  3. 握手成功后,客户端和服务器可以通过 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 应用场景

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

总结

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

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

相关推荐
一只小透明啊啊啊啊2 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友3 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao3 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子4 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...4 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪4 小时前
函数组件和异步组件
前端·javascript·面试
淮北4944 小时前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友4 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei4 小时前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发
黄毛火烧雪下4 小时前
高效的项目构建和优化之前端构建工具
前端