WebSocket的事件触发机制

本文深入探讨了WebSocket API的工作原理,包括其事件驱动模型及四种关键事件(open、message、error、close)的处理方式。通过代码示例展示了如何监听和响应这些事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

WebSocket API是纯事件驱动的。应用程序代码监听WebSocket对象上的事件,以便处理输入数据和连接状态的改变。WebSocket协议也是事件驱动的。客户端应用程序不需要轮询服务器来得到更新的数据。消息和事件将在服务器发送它们的时候异步到达。

WebSocket编程遵循异步编程模式,也就是说,只要WebSocket连接打开,应用程序就简单地监听事件。客户端不需要主动轮询服务器得到更多的信息。要开始监听事件,只要为WebSocket对象添加回调函数。也可以使用addEventListener() DOM方法为WebSocket对象添加事件监听器。

WebSocket对象调度4个不同的事件:

 open

 message

 error

 close

和所有Web API一样,可以用on<事件名称>处理程序属性监听这些事件,也可以使用addEventListener();方法。

1. WebSocket事件:open

一旦服务器响应了WebSocket连接请求,open事件触发并建立一个连接。open事件对应的回调函数称作onopen。

代码清单2-4说明建立WebSocket连接时如何处理该事件。


 

到open事件触发时,协议握手已经完成,WebSocket已经准备好发送和接收数据。如果应用程序接收到一个open事件,那么 可以确定WebSocket服务器成功地处理了连接请求,并且同意与应用程序通信。

2. WebSocket事件:message

WebSocket消息包含来自服务器的数据。你也可能听说过组成WebSocket消息的WebSocket帧(Frame)。第3章将详细讨论消息和帧的概念。为了理解消息使用API的方式,WebSocket API只输出完整的消息,而不是WebSocket帧。message事件在接收到消息时触发,对应于该事件的回调函数是onmessage。

代码清单2-5展示了一个接收文本消息并显示消息内容的消息处理程序。


 

除了文本,WebSocket消息还可以处理二进制数据,这种数据作为Blob消息(见代码清单2-6)或者ArrayBuffer消息处理(见代码清单2-7)。因为设置WebSocket消息二进制数据类型的应用程序会影响二进制消息,所以必须在读取数据之前决定用于客户端二进制输入数据的类型。

 

3. WebSocket事件:error

error事件在响应意外故障的时候触发。与该事件对应的回调函数为onerror。错误还会导致WebSocket连接关闭。如果你接收一个error事件,可以预期很快就会触发close事件。close事件中的代码和原因有时候能告诉你错误的根源。error事件处理程序是调用服务器重连逻辑以及处理来自WebSocket对象的异常的最佳场所。代码清单2-8展示了监听error事件的一个例子。



 

4. WebSocket事件:close
close事件在WebSocket连接关闭时触发。对应于close事件的回调函数是onclose。一旦连接关闭,客户端和服务器不再能接收或者发送消息。

说明 WebSocket规范还定义了ping和pong帧,可以用于持续连接(keep-alive)、心跳、网络状态检测、延迟测量等,但是WebSocket API目前没有输出这些特性。尽管浏览器接受ping帧,但是不会触发对应WebSocket上的ping事件。相反,浏览器将自动响应pong帧。然而,浏览器实例化的ping如果在一段时间内没有得到pong应答,可能会触发连接的close事件。第8章将详细介绍WebSocket的ping和pong。

当调用close()方法终止与服务器的连接时,也会触发onclose事件处理程序,如代码清单2-9所示。


 

WebSocket close事件在连接关闭时触发,这可能有多种原因,比如连接失败或者成功的WebSocket关闭握手。WebSocket对象特性readyState反映了连接的状态(2为正在关闭,3为已关闭)。

close事件有3个有用的属性(property),可以用于错误处理和恢复:wasClean、code和error。wasClean属性是一个布尔属性,表示连接是否顺利关闭。如果WebSocket的关闭是对来自服务器的一个close帧的响应,则该属性为true。如果连接是因为其他原因(例如,因为底层TCP连接关闭)关闭,则该属性为false。code和reason属性表示服务器发送的关闭握手状态。这些属性和WebSocket.close()方法中的code和reason参数一致,我们将在本章后面详加介绍。在第3章中,我们将在讨论WebSocket协议时讨论关闭的代码和它们的含义。

说明 关于WebSocket事件的更多细节,参见WebSocket API规范:http://www.w3.org/TR/websockets/

### 事件触发机制的工作原理 在编程环境中,事件(event)是由特定动作引发的消息或信号。这些动作可能来自用户的输入(如鼠标点击、按键)、系统的变化(如窗口大小调整),或是其他类型的异步活动(如同网络通信)。每当这样的动作发生时,就会生成一个事件对象[^2]。 #### 发送者与接收者的角色定义 - **发送者(Sender)**:指发起事件的对象。例如,在图形界面应用中,用户单击按钮这一行为会使按钮成为发送者。 - **接收者(Receiver)**:负责监听并响应相应类型事件的一个或多个组件。接收者通常注册了针对某类事件的兴趣,并准备好了相应的处理器来执行必要的逻辑操作。 #### 事件流的过程描述 对于Web开发而言,DOM树结构内的节点能够作为潜在的事件源。当某个底层元素上的事件被激活后,它不仅会影响该元素本身,还会沿着文档层次向上传播至父级容器乃至整个页面顶部——这就是所谓的**冒泡阶段**;相反方向则称为**捕获阶段**。理解这两个阶段有助于优化性能和避免不必要的多重处理[^1]。 #### 获取事件详情的方法 为了使开发者能更好地掌控应用程序的行为模式,每次发生的事件都会携带丰富的上下文信息。这包括但不限于: - 触发事件的确切时间戳; - 导致其产生的原始目标及其属性特征; - 用户交互的具体坐标位置(适用于GUI场景下的鼠标的移动/点击等情形); - 更多定制化参数依据不同平台而定。 借助于JavaScript这类脚本语言编写网页端的应用程序时,可以通过访问`Event`接口实例获得上述提到的信息片段[^4]。 ```javascript document.getElementById('myButton').addEventListener('click', function(event){ console.log(`The event was triggered by ${event.target.tagName}`); }); ``` #### WebSocket连接中的特殊案例分析 在网络实时通讯领域里,WebSocket协议提供了一种全双工通道用于客户端和服务端之间高效的数据交换。当中有一个特别值得注意的地方在于初次握手成功之后所激发出来的`open`事件。此时意味着一条持久化的信道已经确立完毕,后续即可利用这条线路来进行消息推送等工作流程[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值