码迷,mamicode.com
首页 > Web开发 > 详细

【Html5 WebSocket】WebSocket事件

时间:2015-05-29 15:52:30      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:websocket   html5   事件   

《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..

【Html5 WebSocket】WebSocket事件

标签:websocket   html5   事件   

原文地址:http://blog.csdn.net/zgljl2012/article/details/46235215

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!