UDN-企业互联网技术人气社区

板块导航

浏览  : 2760
回复  : 2

[HTML5] html5的websockets全双工通信详解学习示例

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-16 12:14:47 | 显示全部楼层 |阅读模式
本帖最后由 友美C_cup 于 2015-8-3 14:01 编辑

目前实时Web应用的实现方式,大部分是围绕轮询和其他服务器端推送技术展开的,其中最著名的是Comet。Comet技术可以让服务器主动以异步方式向客户端推送数据。


使用轮询时,浏览器定期发送HTTP请求,并随即接收响应;使用长轮询时,浏览器向服务器发送一个请求,服务器会在一段时间内将其保持在打开状态;使用流解决方案时,浏览器会发送一个完整的HTTP请求,但服务器会发送并保持一个处于打开状态的响应,该响应持续更新并无限期处于打开状态。


上述的三个方法,在发送实时数据时都会涉及到HTTP请求和响应包头,且包含大量额外的、不必要的报头数据,会造成传输延迟。


一、解读HTML5 WebSockets


1、WebSocket握手


为了建立WebSocket通信,客户端和服务器在初始握手时,将HTTP协议升级到WebSocket协议。一旦连接建立成功,就可以在全双工模式下在客户端和服务器之间来回传送WebSocket消息。


注:在网络中,每个消息以0x00字节开头,以0xFF结尾,中间数据采用UTF-8编码格式。


2、WebSocket接口


除了对WebSocket协议的定义之外,还定义了用于JavaScript应用程序的WebSocket接口。


  1. interface WebSocket{
  2. readonly attribute DOMString URL;
  3. //就绪状态
  4. const unsigned short CONNECTING = 0;
  5. const unsigned short OPEN = 1;
  6. const unsigned short CLOSED = 2;
  7. readonly attribute unsigned short readyState;
  8. readonly attribute unsigned short bufferedAmount;
  9. //网络
  10. attribute Function onopen;
  11. attribute Function onmessage;
  12. attribute Function onclose;
  13. boolean send(in DOMSString data);
  14. void close();
  15. };
  16. WebSocket implements EventTarget;
复制代码

注意:ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。


二、HTML5 WebSockets API


本节讨论HTML5 WebSockets的使用方法


1、检测浏览器是否支持


通过window.WebSocket来判断浏览器是否支持。


2、API的基本用法


a. WebSocket对象的创建以及与WebSocket服务器的连接


  1. url = "ws://localhost:8080/echo";
  2. ws = new WebSocket(url);
复制代码

b. 添加事件监听器


WebSocket遵循异步编程模型,打开socket后,只需等待事件发生,而不需主动向服务器轮询,因此需要添加回调函数来监听事件。


WebSocket对象有三个事件:open、close和message。当连接建立时触发open事件,当收到消息时触发message事件,当WebSocket连接关闭时触发close事件。


  1. ws.onopen = function(){
  2. log("open");
  3. }
  4. ws.onmessage = function(){
  5. log(e.data);
  6. }
  7. ws.onclose = function(){
  8. log("closed");
  9. }
复制代码

c. 发送消息


当socket处于打开状态(即调用onopen监听程序之后,调用onclose监听程序之前),可以使用send方法发送消息。


ws.send("Hello World");


三、HTML5 WebSockets 应用示例


本节将结合前面讲述的Geolocation接口来创建一个直接在Web页面中计算距离的应用。


1、编写HTML文件


  1. <!DOCTYPE html></p><p><html></p><p> <head></p><p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></p><p> <title>HTML5 WebSocket / Geolocation 追踪器</title></p><p> <link rel="stylesheet" href="styles.css"></p><p> </head></p><p> <body onload="loadDemo()"></p><p> <h1>HTML5 WebSocket / Geolocation 追踪器</h1></p><p> <div><strong>Geolocation</strong>: <p id="geoStatus">你的浏览器不支持HTML5 Geolocation</p></div></p><p> <div><strong>WebSocket</strong>: <p id="socketStatus">你的浏览器不支持HTML5 Web Sockets</p></div></p><p> </body></p><p></html>
复制代码

2、添加WebSocket代码


  1. function loadDemo(){
  2. //确保浏览器支持WebSocket
  3. if(window.WebSocket){
  4. url = "ws://localhost:8080";//broadcast WebSocket服务器位置
  5. ws = new WebSocket(url);
  6. ws.onopen = function(){
  7. updateSocketStatus("连接已建立");
  8. }
  9. ws.onmessage = function(e){
  10. updateSocketeStatus("更新位置数据:" + dataReturned(e.data));
  11. }
  12. }
  13. }
复制代码

3、添加Geolocation代码


  1. var geo;
  2. if(navigator.geolocation){
  3. geo = navigator.geolocation;
  4. updateGeolocationStatus("浏览器支持HTML5 Geolocation");
  5. }</p><p>geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次</p><p>function updateLocation(position){
  6. var latitude = position.coords.latitude;
  7. var longitude = position.coords.longitude;
  8. var timestamp = position.timestamp;
  9. updateGeolocationStatus("位置更新时间:" + timestamp);
  10. var toSend = JSON.stringify([myId,latitude,longitude]);
  11. sendMyLocation(toSend);
  12. }
复制代码

4、合并所有内容


  1. <!DOCTYPE html></p><p><html></p><p> <head></p><p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></p><p> <title>HTML5 WebSocket / Geolocation 追踪器</title></p><p> <link rel="stylesheet" href="styles.css"></p><p> </head></p><p> <body onload="loadDemo()"></p><p> <h1>HTML5 WebSocket / Geolocation 追踪器</h1></p><p> <div><strong>Geolocation</strong>: <p id="geoStatus">你的浏览器不支持HTML5 Geolocation</p></div></p><p> <div><strong>WebSocket</strong>: <p id="socketStatus">你的浏览器不支持HTML5 Web Sockets</p></div></p><p> </body></p><p> <script></p><p> //WebSocket的引用</p><p> var ws;</p><p>
复制代码

相关帖子

发表于 2015-8-10 19:52:25 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

发表于 2015-9-24 23:34:34 | 显示全部楼层
不知道大家有没有注意到,html5和云的概念是对应有关联的性的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部