WebSocket 事件

WebSocket 事件,WebSocket API是纯事件驱动的。应用程序代码监听WebSocket对象上的事件,以便处理输入数据和连接状态改变。

WebSocket协议也是事件驱动的,客户应用程序不需要轮序服务来得到更新的数据,消息和事件将在服务器发送它们的时候异步到达。

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

以下是 WebSocket 对象的相关事件

事件 事件处理程序 描述
open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接收服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 连接关闭时触发

WebSocket事件:open

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

示例代码

ws.onopen = function(e) {
    console.log("Geek-docs Connect open...");
};

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

WebSocket事件:message

WebSocket消息包含来自服务器的数据。你也可能听说过组成WebSocket消息的WebSocket帧(Frame)。

为了理解消息使用API的方式,WebSocket API只输出完整的消息,而不是WebSocket帧。message事件在接收到消息时触发,对应于该事件的回调函数onmessage。

示例:接收文本消息并显示消息内容

ws.onmessage = function(e) {
    if (typeof e.data === "string") {
        console.log("String message from geek-docs.com received", e, e.data);
    } else {
        console.log("Other message from geek-docs.com received", e, e.data);
    }
};

除了文本,WebSocket消息还可以处理二进制数据,这种数据作为Blob消息或ArrayBuffer消息。

Blob消息message事件处理程序示例


ws.binaryType = "blob"; ws.onmessage = function(e) { if (e.data instanceof Blob) { console.log("Blob message received", e.data); var blob = new Blob(e.data); } };

检查和处理ArrayBuffer消息的处理示例

ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
    if (e.data instanceof ArrayBuffer) {
        console.log("ArrayBuffer Message Received", e.data);
        var a = new Uint8Array(e.data);
    }
};

WebSocket事件:error

error事件在响应意外故障的时候触发,与该事件对应的回调函数为onerror。

错误还会导致WebSocket连接关闭。如果你接收一个error事件,可以预期很快就会发生close事件。

close事件中的代码和原因有时候能告诉你错误的根源,error事件处理程序是调用服务器重连逻辑以及处理来自WebSocket对象异常的最佳场所。

下面的示例展示监听error事件

ws.onerror = function(e) {
    console.log("WebSocket Error:", e);
    handleErrors(e);
};

WebSocket事件:close

close事件在WebSocket连接关闭时触发,对应于close事件的回调函数是onclose。

一旦连接关闭,客户端和服务器不再接收或者发送消息。

当调用close() 方法终止与服务器的连接时,也会触发onclose事件处理程序。

下面的示例代码展示close事件处理程序

ws.onclose = function(e) {
    console.log("Connectoin from geek-docs.com closed.", e);
};

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程