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

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

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]);

其参数描述如下:

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

2.1.1 WebSocket 对象的常量 和属性

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

2.1.2 WebSocket 对象的方法

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

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

WebSocket.close();
2.1.2.2 send() 方法

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

WebSocket.send(data);
参数

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

data 值 描述
USVString 表示文本字符串。
USVString 对应 unicode 标量值的所有可能序列的集合。在 JavaScript 中返回时, USVString 映射到 String 。它通常仅用于执行文本处理的 API,需要一串 unicode 标量值才能进行操作。
字符串将以 UTF-8 格式添加到缓冲区,并且 bufferedAmount 将加上该字符串以 UTF-8 格式编码时的字节数的值。
ArrayBuffer ArrayBuffer 是一个字节数组,用来表示通用的、固定长度的原始二进制数据缓冲区。
你可以使用一有类型的数组对象发送底层二进制数据;其二进制数据内存将被缓存于缓冲区,bufferedAmount 将加上所需字节数的值。
Blob Blob 对象表示一个不可变、原始数据的类文件对象。
它的数据可以按文本或二进制的格式进行读取。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');
2.1.3.1 关闭事件
(1)事件描述

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

例如:

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

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

WebSocket.onclose = function(event) {
  console.log("WebSocket is closed now.");
};
2.1.3.2 错误事件
(1)事件描述

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

例如:

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

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

WebSocket.onerror = function(event) {
  console.error("WebSocket error observed:", event);
};
2.1.3.3 消息事件
(1)事件描述

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

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

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

参考:2.2.2 MessageEvent 对象

其语法格式为:

socket.onmessage = function(event) {
  console.debug("WebSocket message received:", event);
};
2.1.3.4 连接打开事件
(1)事件描述

例如:

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

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

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

2.2 相关的几个对象介绍

2.2.1 CloseEvent 对象

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

2.2.2 MessageEvent 对象

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

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

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

MessageEvent(type, init);

其中参数:

参数 描述
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");

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

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

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 任务实例。

属性名 类型 说明 最低支持版本
readyState number | undefined 表示 Socket 连接状态 code; 若由于参数错误导致未创建连接, 则 | 为 undefined 1.0.0
CONNECTING 0 表示 Socket 正在连接 1.0.0
OPEN 1 表示 Socket 连接已经打开 1.0.0
CLOSING 2 表示 Socket 连接关闭中 1.0.0
CLOSED 3 表示 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');

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

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

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

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

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

// dart 语言中
socket.onMessage.listen((MessageEvent e) {
  receivedData(e.data);
});

4.2 WebSocket类

4.2.1 WebSocket 类的构造器

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

WebSocket(
    String url,
    [Object? protocols]
)

4.2.2 WebSocket 类的常量

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

常量
CONNECTING 0
OPEN 1
CLOSING 2
CLOSED 3

4.2.3 WebSocket 属性

属性 类型 读写 描述 inherited
binaryType String? 读 / 写 使用二进制的数据类型连接。
bufferedAmount int? 只读 未发送至服务器的字节数。
extensions String? 只读 服务器选择的扩展。
onClose Stream<CloseEvent> 只读 由此WebSocket处理的关闭事件流。
onError Stream<Event> 只读 此WebSocket处理的错误事件流。
onMessage Stream<MessageEvent> 只读 由此WebSocket处理的消息事件流。
onOpen Stream<Event> 只读 由此WebSocket处理的打开事件流。
protocol String? 只读 一个协议字符串,这些字符串用于指定子协议,这样单个服务器可以实现多个 WebSocket 子协议(例如,您可能希望一台服务器能够根据指定的协议(protocol)处理不同类型的交互)。如果不指定协议字符串,则假定为空字符串。
readyState int 只读 当前的链接状态
url String? 只读 WebSocket 的绝对路径
runtimeType Type 只读 对象运行时类型的表示形式。
hashCode int 只读 此对象的哈希代码。[…]
on Events 只读 对于事件流来说,这是一个易于使用的访问器,只应在显式访问器不可用时使用。

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
hashCode int 此对象的哈希代码。
runtimeType Type 对象运行时类型的表示形式。
on Events 对于事件流来说,这是一个易于使用的访问器,只应在显式访问器不可用时使用。

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


参考资料

[1] mozilla.MDN 文档

[2] 陈云贵、高旭.微信小程序开发从入门到实战.清华大学出版社

[3] Tencent.微信小程序文档

[4] Alipay.支付宝小程序文档

[5] bytedance.字节小程序文档

目录
相关文章
|
7天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
15 1
|
7天前
|
前端开发 JavaScript vr&ar
前端新技术探索:WebAssembly、Web Components与WebVR/AR
【4月更文挑战第12天】WebAssembly、Web Components和WebVR/AR正重塑Web应用的未来。WebAssembly允许C/C++等语言在Web上高效运行,提供接近原生的性能,如游戏引擎。Web Components通过Custom Elements和Shadow DOM实现可复用的自定义UI组件,提升模块化开发。WebVR/AR(现WebXR)则让VR/AR体验无需额外应用,直接在浏览器中实现。掌握这些技术对前端开发者至关重要。
14 3
|
13天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
13天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
10天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
10天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
10天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
10天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
10天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
10天前
|
小程序 前端开发 API
小程序全栈开发中的RESTful API设计
【4月更文挑战第12天】本文探讨了小程序全栈开发中的RESTful API设计,旨在帮助开发者理解和掌握相关技术。RESTful API基于REST架构风格,利用HTTP协议进行数据交互,遵循URI、客户端-服务器架构、无状态通信、标准HTTP方法和资源表述等原则。在小程序开发中,通过资源建模、设计API接口、定义资源表述及实现接口,实现前后端高效分离,提升开发效率和代码质量。小程序前端利用微信API与后端交互,确保数据流通。掌握这些实践将优化小程序全栈开发。

推荐镜像

更多