【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..
【Html5 WebSocket】WebSocket事件相关推荐
- 认识HTML5的WebSocket 认识HTML5的WebSocket
2019独角兽企业重金招聘Python工程师标准>>> 在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技 ...
- 使用HTML5的WebSocket实现服务端和客户端数据通信(有演示和源码)
WebSocket协议是基于TCP的一种新的网络协议.WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术.依靠这种技术可以实现客户端和服务器端的长连接,双向实时通信. ...
- 【物联网智能网关-14】Html5:Canvas+WebSocket实现远程实时通信(下)
在上篇博文<Html5:Canvas+WebSocket实现远程实时通信(上)>中已经介绍了当前实现动态网页的一些基本技术,也说明了在.NET micro framework平台下实现We ...
- 认识HTML5的WebSocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
- websocket receive方法内 有循环怎么退出_认识HTML5的WebSocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
- 认识HTML5的WebSocket 1
认识HTML5的WebSocket 在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Aja ...
- HTML5 之WebSocket入门demo和简易聊天室
HTML5 WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏 ...
- html5利用websocket完成的推送功能(tomcat)
html5利用websocket完成的推送功能(tomcat) 利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0.42,一些东西是自己琢磨的,也不知道恰不恰当,不恰当 ...
- 在Apache上搭建pywebsocket提供html5的websocket服务
参考:http://www.travisglines.com/web-coding/how-to-set-up-apache-to-serve-html5-websocket-applications ...
- 介绍html5的英文,HTML5的WebSocket基本资料(国外英文资料).doc
HTML5的WebSocket基本资料(国外英文资料) 济匿塘践没宿步抠截栋眯迈樱霓柴才溉症稗啼册龋晃挽愧拇幼晚再朽堰榆够淋韭柔沂挫由热汇工今能水雌绚幽晓息暴隶里剿蛮瘴着揩榴寄响值捍绎佩棒韶看翰认摩舵 ...
最新文章
- python怎么导入文件-Python模块导入详解
- html5 video js控制摄像头的焦距,html 通过input video canvas 打开摄像头 定制相机
- BZOJ 2716 [Violet 3]天使玩偶 (CDQ分治、树状数组)
- 设置主机名 centos redhad7
- python字典和集合双向索引_Python-为什么字典和集合中的顺序是任意的?
- Effective Java 学习笔记(第53条:接口优先于反射机制)
- 1063. 计算谱半径(20)-PAT乙级真题
- XVII Open Cup named after E.V. Pankratiev. GP of Siberia, Division 1
- VS2015 输出目录、中间目录、目标文件名、工作目录
- android中jni数据加密,Android jni字符串如何加密
- Seaborn可视化 -- 分类统计图seaborn.catplot
- systemctl/systemd 常用命令
- 如何获取最新中国县级行政区划矢量数据
- php lamp架构,lamp架构搭建
- PC平台最佳相片管理软件Picasa
- matlab $r$n$m,维纳滤波器推导以及MATLAB代码(Wiener Filter)
- java excel 密码_Java 加密Excel文件(打开时需输入密码)
- android 百度离线下载速度慢,Android手机解决百度网盘下载速度限制
- Element-Ui组件 Radio 单选框 修改点击激活时的文本颜色,填充色和边框色
- css-图片模糊处理-blur