• WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)


    WebSocket 解析与应用

    本文内容正在完善中(2022.08)…

    jcLee95 的个人博客
    邮箱 :291148484@163.com
    CSDN 主页https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
    本文地址https://blog.csdn.net/qq_28550263/article/details/126098752

    文本介绍了 什么是 WebSockets (包括 WebSockets 的起源和 WebSockets 的概念),以及 WebSockets 的应用(包括如何搭建 WebSockets 服务端,如何在 Web 客户端中使用 WebSockets,以及如何在 小程序 中、Flutterdart语言)中使用 WebSockets。 )


    目 录

    1. 概述

    2. Web 客户端

    3. 小程序

    4. Flutter 中使用 WebSocket

    5. 服务端:编写 WebSocket 服务器

    参考资料


    1. 概述

    1.1 WebSockets 的概念

    WebSockets 是一种用于在用户的浏览器和服务器之间打开 交互式通信会话的技术。使用其对应 API,可以向服务器 发送消息接收事件驱动的响应,而无需通过轮询服务器的方式以获得响应。

    1.2 历史起源

    Client-Server 模型中 Client 指的是客户端,Server 指的是服务器。服务器负责数据的管理,客户机负责完成与用户的交互任务。浏览器(Broser)是最常见的一种客户端了,在此基础上的 Broser-Server 模型上发展起来的 HTTP 协议,服务端往往永远是被动等待的,这也就意味着一般情况下只有客户端才能主动地向服务端发起通信。然而在实现某些功能的时候,我们又希望服务端同样能够向客户端主动地发送信息,比如在一个客户端请求页面后,服务端能够定时地向客户端更新推送的消息。
    传统上网站为了实现推送这样的功能,采用的是轮询的方式。所谓轮询,指是在特定的的时间间隔(如每1秒)由客户端(浏览器)对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
    而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信,但依然需要反复发出请求。而且在Comet中,普遍采用的长链接,也会消耗服务器资源。

    2. Web 客户端

    2.1 WebSocket 对象

    WebSocket 对象用于连接 WebSocket 服务器的主要接口,之后可以在这个连接上发送 和接受数据。该对象的构造函数语法格式为:

    var aWebSocket = new WebSocket(url [, protocols]);
    
    • 1

    其参数描述如下:

    参数描述
    url要连接的 URL,这应该是 WebSocket 服务器将响应的 URL。
    protocols可选,一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议,这样单个服务器可以实现多个 WebSocket 子协议(例如,您可能希望一台服务器能够根据指定的协议(protocol)处理不同类型的交互)。如果不指定协议字符串,则假定为空字符串。

    2.1.1 WebSocket 对象的常量 和属性

    常量

    常量
    WebSocket.CONNECTING0
    WebSocket.OPEN1
    WebSocket.CLOSING2
    WebSocket.CLOSED3

    属性

    属性描述只读
    WebSocket.binaryType使用二进制的数据类型连接。
    WebSocket.bufferedAmount未发送至服务器的字节数。
    WebSocket.extensions服务器选择的扩展。
    WebSocket.onclose用于指定连接关闭后的回调函数。
    WebSocket.onerror用于指定连接失败后的回调函数。
    WebSocket.onmessage用于指定当从服务器接受到信息时的回调函数。
    WebSocket.onopen用于指定连接成功后的回调函数。
    WebSocket.protocol服务器选择的下属协议。
    WebSocket.readyState当前的链接状态。
    WebSocket.urlWebSocket 的绝对路径。

    2.1.2 WebSocket 对象的方法

    方法描述
    WebSocket.close([code[, reason]])关闭当前链接。
    WebSocket.send(data)对要传输的数据进行排队。

    2.1.2.1 close() 方法

    该方法用于关闭 WebSocket 连接或连接尝试(如果有的话)。 如果连接已经关闭,则此方法不执行任何操作。其语法格式为:

    WebSocket.close();
    
    • 1

    2.1.2.2 send() 方法

    该方法将需要通过 WebSocket 链接传输至服务器的数据排入队列,并根据所需要传输的 data bytes 的大小来增加 bufferedAmount 的值 。若数据无法传输(例如数据需要缓存而缓冲区已满)时,套接字会自行关闭。其语法格式为:

    WebSocket.send(data);
    
    • 1
    参数

    其唯一参数 data 表示用于传输至服务器的数据。它必须是以下类型之一:

    data 值描述
    USVString表示文本字符串。
    USVString 对应 unicode 标量值的所有可能序列的集合。在 JavaScript 中返回时, USVString 映射到 String 。它通常仅用于执行文本处理的 API,需要一串 unicode 标量值才能进行操作。
    字符串将以 UTF-8 格式添加到缓冲区,并且 bufferedAmount 将加上该字符串以 UTF-8 格式编码时的字节数的值。
    ArrayBufferArrayBuffer 是一个字节数组,用来表示通用的、固定长度的原始二进制数据缓冲区。
    你可以使用一有类型的数组对象发送底层二进制数据;其二进制数据内存将被缓存于缓冲区,bufferedAmount 将加上所需字节数的值。
    BlobBlob 对象表示一个不可变、原始数据的类文件对象。
    它的数据可以按文本或二进制的格式进行读取。Blob 类型将队列 blob 中的原始数据以二进制中传输。 bufferedAmount 将加上原始数据的字节数的值。
    ArrayBufferView您可以以二进制帧的形式发送任何 JavaScript 类数组对象 ,其二进制数据内容将被队列于缓冲区中。值 bufferedAmount 将加上必要字节数的值。
    异常
    异常描述
    INVALID_STATE_ERR当前连接处于 OPEN 状态。
    SYNTAX_ERR数据是一个包含未配对代理 (unpaired surrogates) 的字符串。

    2.1.3 WebSocket 事件

    使用 WebSocket 对象的 addEventListener() 方法或将一个事件监听器赋值给本接口的 oneventname 属性,来监听 WebSocket 事件。WebSocket 中有以下事件:

    事件触发条件主动触发
    close当一个 WebSocket 连接被关闭时触发。也可以通过 onclose 属性来设置。
    error当一个 WebSocket 连接因错误而关闭时触发,例如无法发送数据时。也可以通过 onerror 属性来设置。
    message当通过 WebSocket 收到数据时触发。也可以通过 onmessage 属性来设置。
    open当一个 WebSocket 连接成功时触发。也可以通过 onopen 属性来设置。

    在本小节中的案例中,socket 变量是一个通过 new WebSocket 创建的 WebSocket 连接实例:

    // 创建一个 WebSocket 连接
    const socket = new WebSocket('ws://localhost:8080');
    
    • 1
    • 2

    2.1.3.1 关闭事件

    (1)事件描述

    关闭事件使用"close"字符串表示,它当一个 WebSocket 连接被关闭时触发。
    例如:

    socket.addEventListener('close', function (event) {
      console.log('WebSocket is closed now. ');
    });
    
    • 1
    • 2
    • 3
    (2)onclose 属性

    WebSocket.onclose 属性返回一个事件监听器,这个事件监听器将在 WebSocket 连接的readyState 变为 CLOSED时被调用,它接收一个名字为“close”的 CloseEvent 事件。其语法格式为:

    WebSocket.onclose = function(event) {
      console.log("WebSocket is closed now.");
    };
    
    • 1
    • 2
    • 3

    2.1.3.2 错误事件

    (1)事件描述

    当 websocket 的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时,一个 错误事件(error event)将被引发。

    例如:

    // 监听可能发生的错误
    socket.addEventListener('error', function (event) {
      console.log('WebSocket error: ', event);
    });
    
    • 1
    • 2
    • 3
    • 4
    (2)onerror 属性

    在 WebSocket.onerror 属性中,你可以定义一个发生错误时执行的回调函数,此事件的事件名为"error"。该属性的语法格式为:

    WebSocket.onerror = function(event) {
      console.error("WebSocket error observed:", event);
    };
    
    • 1
    • 2
    • 3

    2.1.3.3 消息事件

    (1)事件描述

    message 事件会在 WebSocket 接收到新消息时被触发。例如:

    socket.addEventListener('message', function (event) {
        console.log('Message from server ', event.data);
    });
    
    • 1
    • 2
    • 3
    (2)onmessage 属性

    WebSocket.onmessage 属性是一个当收到来自服务器的消息时被调用的 event handler。它由一个MessageEvent调用。

    参考:2.2.2 MessageEvent 对象

    其语法格式为:

    socket.onmessage = function(event) {
      console.debug("WebSocket message received:", event);
    };
    
    • 1
    • 2
    • 3

    2.1.3.4 连接打开事件

    (1)事件描述

    例如:

    // 监听连接打开
    socket.addEventListener('open', function (event) {
        socket.send('Hello Server!');
    });
    
    • 1
    • 2
    • 3
    • 4
    (2)onopen 属性

    WebSocket.onopen属性定义一个事件处理程序,当WebSocket 的连接状态readyState 变为1时调用;这意味着当前连接已经准备好发送和接受数据。这个事件处理程序通过 事件(建立连接时)触发。其语法格式为:

    aWebSocket.onopen = function(event) {
      console.log("WebSocket is open now.");
    };
    
    • 1
    • 2
    • 3

    2.2 相关的几个对象介绍

    2.2.1 CloseEvent 对象

    连接关闭时 WebSocket 对象发送的事件。

    2.2.2 MessageEvent 对象

    当从服务器获取到消息的时候 WebSocket 对象触发的事件。WebSocket 接口的 onmessage 属性就是MessageEvent 对象所能代表一段被目标对象接收的消息之一。

    通过事件触发的动作被定义为一个函数,该函数作为相关 message事件 ,比如使用 WebSocket 接口的 onmessage 处理器这样的事件处理器。

    该对象的构造函数MessageEvent()的语法格式为:

    MessageEvent(type, init);
    
    • 1

    其中参数:

    参数描述
    type要创建的 MessageEvent 的类型。这可能是 XXX 中的一个
    init是一个可以包含以下属性的 dictionary 对象:
    • data】: 您希望包含在 MessageEvent 中的数据。这可以是任何数据类型,如果没有指定,则默认为 null。
    • origin】: USVString 表示消息发送源。如果没有指定,则默认为空字符串 (“”)。
    • lastEventId】: DOMString 表示事件的唯一 ID。如果没有指定,则默认为空字符串 (“”)。
    • source: MessageEventSource (可以是 WindowProxy, MessagePort, 或 ServiceWorker 对象) 表示消息发送对象。如果没有设置,则默认为 null。
    • ports】: MessagePort 对象数组,表示正在通过的消息通道关联的端口 (在适当的情况下,例如在通道消息传递或向共享工作者发送消息时)。如果没有指定,则默认为空数组 ([])。

    2.3 编写 WebSocket 客户端应用

    2.3.1 编写一个客户端应用的过程

    ①创建 WebSocket 对象 => ②向服务器发送数据 => ③接收服务器发送的消息 => ④关闭连接

    2.3.2 创建 WebSocket 对象

    例如:

    var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
    
    • 1

    如果你想建立一个支持协议可选的连接,你可以指定协议的列表:

    var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
    
    • 1

    http 还是 https?

    • 一旦连接建立了(也就是说 readyState 是 OPEN), exampleSocket.protocol 就会告诉你服务器选择了哪个协议。
    • 上面的例子中 ws 替代了 http,同样地 wss 也会替代 https。 建立 WebSocket 链接有赖于 HTTP Upgrade mechanism, 所以当我们使用 ws://www.example.com或者 wss://www.example.com来访问 HTTP 服务器的时候协议会隐式地升级。
    • 注意,与HTTP不同的是,Websocket 需要先创建连接,这就使得其成为一种有状态的协议,之后通信时可以省略部分状态信息。

    3. 小程序

    3.1 微信小程序中使用 WebSocket

    3.1.1 WebSocket 接口

    微信小程序提供了以下 WebSocket 接口函数供我们使用:

    接口函数描述
    wx.sendSocketMessage(Object object)通过 WebSocket 连接 发送数据
    wx.onSocketOpen(function callback)监听 WebSocket 连接 打开事件
    wx.onSocketMessage(function callback)监听 WebSocket 接受到服务器的消息事件
    wx.onSocketError(function callback)监听 WebSocket 错误事件
    wx.onSocketClose(function callback)监听 WebSocket 连接关闭事件
    wx.connectSocket(Object object)创建一个 WebSocket 连接。
    wx.closeSocket(Object object)关闭 WebSocket 连接。

    3.1.2 SocketTask

    SocketTask 即 WebSocket 任务,它可通过 wx.connectSocket() 接口创建返回。在微信小程序中推荐使用 SocketTask 的方式去管理 webSocket 链接,每一条链路的生命周期都更加可控。该接口提供了以下方法供我们使用:

    接口函数描述
    SocketTask.send(Object object)通过 WebSocket 连接发送数据
    SocketTask.close(Object object)关闭 WebSocket 连接
    SocketTask.onOpen(function callback)监听 WebSocket 连接打开事件
    SocketTask.onClose(function callback)监听 WebSocket 连接关闭事件
    SocketTask.onError(function callback)监听 WebSocket 错误事件
    SocketTask.onMessage(function callback)监听 WebSocket 接受到服务器的消息事件

    3.2 字节小程序中使用 WebSocket

    3.2.1 connectSocket 方法

    3.2.2 SocketTask

    通过 tt.connectSocket 获取的 WebSocket 任务实例。

    属性名类型说明最低支持版本
    readyStatenumber | undefined表示 Socket 连接状态 code; 若由于参数错误导致未创建连接, 则 | 为 undefined1.0.0
    CONNECTING0表示 Socket 正在连接1.0.0
    OPEN1表示 Socket 连接已经打开1.0.0
    CLOSING2表示 Socket 连接关闭中1.0.0
    CLOSED3表示 Socket 连接已关闭1.0.0
    方法描述最低版本
    send通过 WebSocket 连接发送数据1.0.0
    close关闭 WebSocket 连接1.0.0
    onOpen监听 WebSocket 连接服务器成功的事件1.0.0
    onClose监听 WebSocket 与服务器的连接断开的事件1.0.0
    onMessage监听 WebSocket 接收到服务器发送信息的事件1.0.0
    onError监听 WebSocket 发生错误的事件1.0.0

    3.3 支付宝小程序中使用 WebSocket

    方法描述
    my.connectSocket用于创建一个 WebSocket 的连接。
    my.closeSocket关闭 WebSocket 连接的 API。
    my.offSocketClose取消监听 WebSocket 关闭事件的 API
    my.offSocketOpen取消监听 WebSocket 连接打开事件的 API。
    my.offSocketError取消监听 WebSocket 错误事件的 API。
    my.onSocketClose监听 WebSocket 关闭事件的 API。
    my.onSocketError监听 WebSocket 错误事件的 API。
    my.onSocketMessage监听 WebSocket 接受到服务器的消息事件的 API。
    my.onSocketOpen监听 WebSocket 连接打开事件的 API。
    my.sendSocketMessage通过 WebSocket 连接发送数据,需要先使用 my.connectSocket 建立连接,在调用 my.onSocketOpen

    4. Flutter 中使用 WebSocket

    4.1 概述

    dart语言中使用 WebSocket 和在 JavaScript使用 WebSocket 是很类似的。 要在 Web 应用程序中使用 WebSocket,首先创建一个 WebSocket 对象,将 WebSocket URL 作为参数传递给构造函数。例如:

    var socket = new WebSocket('ws://127.0.0.1:1337/ws');
    
    • 1

    然后,你可以使用 send 方法在 WebSocket 实例上发送数据,例如:

    if (socket != null && socket.readyState == WebSocket.OPEN) {
      socket.send(data);
    } else {
      print('WebSocket not connected, message $data not sent');
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    javascript中的WebSocket实例上,我们使用onmessage属性,表示一个当收到来自服务器的消息时被调用的 event handler,就像这样:

    // javascript 中,详见本文 2.1.3.3节:消息事件
    socket.onmessage = function(event) {
      console.debug("WebSocket message received:", event);
    };
    
    • 1
    • 2
    • 3
    • 4

    dart 语言中也是类似,要在 WebSocket 上接收数据,请为消息事件注册一个侦听器。:

    // dart 语言中
    socket.onMessage.listen((MessageEvent e) {
      receivedData(e.data);
    });
    
    • 1
    • 2
    • 3
    • 4

    4.2 WebSocket类

    4.2.1 WebSocket 类的构造器

    WebSocket 类构造器的语法格式为:

    WebSocket(
        String url,
        [Object? protocols]
    )
    
    • 1
    • 2
    • 3
    • 4

    4.2.2 WebSocket 类的常量

    JavaScript 中的WebSocket类一样,dart 的WebSocket 类也提供了一些常量:

    常量
    CONNECTING0
    OPEN1
    CLOSING2
    CLOSED3

    4.2.3 WebSocket 属性

    属性类型读写描述inherited
    binaryTypeString?读 / 写使用二进制的数据类型连接。
    bufferedAmountint?只读未发送至服务器的字节数。
    extensionsString?只读服务器选择的扩展。
    onCloseStream只读由此WebSocket处理的关闭事件流。
    onErrorStream只读此WebSocket处理的错误事件流。
    onMessageStream只读由此WebSocket处理的消息事件流。
    onOpenStream只读由此WebSocket处理的打开事件流。
    protocolString?只读一个协议字符串,这些字符串用于指定子协议,这样单个服务器可以实现多个 WebSocket 子协议(例如,您可能希望一台服务器能够根据指定的协议(protocol)处理不同类型的交互)。如果不指定协议字符串,则假定为空字符串。
    readyStateint只读当前的链接状态
    urlString?只读WebSocket 的绝对路径
    runtimeTypeType只读对象运行时类型的表示形式。
    hashCodeint只读此对象的哈希代码。[…]
    onEvents只读对于事件流来说,这是一个易于使用的访问器,只应在显式访问器不可用时使用。

    4.2.4 WebSocket 方法

    方法名返回类型描述是否是继承的
    addEventListener(String type, EventListener? listener, [bool? useCapture])void添加事件监听器是,从EventTarget类继承
    removeEventListener(String type, EventListener? listener, [bool? useCapture])void移除事件监听器是,从EventTarget类继承
    dispatchEvent(Event event)bool是,从EventTarget类继承
    noSuchMethod(Invocation invocation)dynamic当访问不存在的方法或属性时调用。是,从Object继承
    toString()String此对象的字符串表示形式。是,从Object继承
    close([int? code, String? reason])void关闭当前链接。
    send(dynamic data)void通过此连接向服务器传输数据。
    sendBlob(Blob data)void通过此连接向服务器传输数据。
    sendByteBuffer(ByteBuffer data)void通过此连接向服务器传输数据。
    sendString(String data)void通过此连接向服务器传输数据。
    sendTypedData(TypedData data)void通过此连接向服务器传输数据。

    4.3 相关对象的补充

    4.3.1 EventTarget

    它支持事件的所有浏览器对象的基类,使用它的 on 属性添加和移除编译时类型检查和更简洁的API的事件。有些类似于 JavaScript 中的MessageEvent 对象(参考本文 2.2.2 节)

    该类有以下属性:

    属性类型描述只读inherited
    hashCodeint此对象的哈希代码。
    runtimeTypeType对象运行时类型的表示形式。
    onEvents对于事件流来说,这是一个易于使用的访问器,只应在显式访问器不可用时使用。

    5. 服务端:编写 WebSocket 服务器


    参考资料

    [1] mozilla.MDN 文档
    [2] 陈云贵、高旭.微信小程序开发从入门到实战.清华大学出版社
    [3] Tencent.微信小程序文档
    [4] Alipay.支付宝小程序文档
    [5] bytedance.字节小程序文档

  • 相关阅读:
    windows/ubuntu怎么修改hosts文件
    为什么需要在微服务中使用链路追踪?Spring Cloud 可以选择哪些微服务链路追踪方案?
    css定义变量 --**
    【深度学习】解析Vision Transformer (ViT): 从基础到实现与训练
    Android 10.0 Camera2退出时屏幕旋转为横屏
    Systrace 线程 CPU 运行状态分析技巧 - Running 篇
    shell关于目录和文件的一些操作
    我做了一个简易P图(参数图)分析软件
    odoo17 web.assets_web.min.js 赏析
    Layui实现之登陆页面&&实现扩展模块
  • 原文地址:https://blog.csdn.net/qq_28550263/article/details/126098752