【Html5 WebSocket】WebSocket事件

《HTML5 WebSocket权威指南》学习笔记&2

上一篇：【Html5 WebSocket】WebSocket构造函数

WebSocket事件

WebSocket编程遵循异步编程模式，只要WebSocket的连接已打开，应用程序就开始监听事件。客户端不需要主动轮询服务器获取更多信息。下面是WebSocket对象的四个不同的监听器：

• open
• message
• error
• close

上述四个事件同所有的Web API一样，可以通过on<事件名称>处理对象属性监听这些事件，也可以使用addEventListener()方法。

open消息

Open事件的触发在客户端与服务端之间的握手成功之后调用，可以在此事件里调用客户端发送数据给服务端等业务处理。下面是示例：

var ws = new WebSocket("ws://echo.websocket.org/echo",[]);

/*
open事件触发表明协议握手成功，WebSocket以及准备好接收和发送数据
*/
ws.onopen = function(e){
    console.log("start..");
    ws.send("Message send");//给服务端发送一条文本消息
}

上述页面加载后
开发者工具控制台会输出 start..

message消息

message消息在客户端接收到消息时触发，应用程序会给监听器传入消息内容以待处理。因为是在客户端API学习阶段，我们是使用echo.websocket.org作为服务端，所以这里要触发message消息，我们就需要先给服务端发送一条消息，服务端会把这条消息原样返回来，下面是示例：

var ws = new WebSocket("ws://echo.websocket.org/echo",[]);

/*
open事件触发表明协议握手成功，WebSocket以及准备好接收和发送数据
*/
ws.onopen = function(e){
    console.log("start..");
    ws.send("Message send");
}

/*
message消息在客户端接收到消息时触发
*/
ws.onmessage = function(e){
    console.log("message..");
    if(typeof e.data == "string"){
        console.log("String message recevied",e,e.data);
    }else{
        console.log("Other message recevied",e,e.data);
    }
    ws.close();
}

在控制台可以看输出结果

error消息

error消息在响应意外故障的时候触发，并且在这个消息触发后，close消息也随即会被触发，所以这个消息里最适用于连接重启等操作。为了触发这个消息（只是为了学习看看效果），我们首先得出错，出错的方式就是给服务端发一个它看不懂的协议，example，这样，连接就不会建立成功，error事件触发，下面是示例：

var ws = new WebSocket("ws://echo.websocket.org/echo",["example"]);

/*
close消息在关闭连接时触发
*/
ws.onclose = function(e){
    console.log("close",e);
}

close消息

close消息在关闭连接时触发，这里我们在连接建立好之后，就使用close方法关闭连接，从而可以触发close事件

var ws = new WebSocket("ws://echo.websocket.org/echo",[]);

/*
open事件触发表明协议握手成功，WebSocket以及准备好接收和发送数据
*/
ws.onopen = function(e){
    console.log("start..");
    ws.close();
}
/*
close消息在关闭连接时触发
*/
ws.onclose = function(e){
    console.log("close..");
}

在控制台可以看到输出
start..
close..