WebSocket/WebWorker/WebStorage(HTML5的一些新特性)
2017-02-15 15:49
621 查看
WebSocket
protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duple)。一开始的握手需要借助HTTP请求完成。
现很多网站为了实现即时通讯,所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP
request,然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的有用数据可能只是一个很小的值,这样会占用很多的带宽。
在 WebSocket API,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即时服务带来了两大好处:
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器的推送,服务器不再被动的接收到浏览器的request之后才返回数据,而是在有新数据时就主动推送给浏览器。
在实现websocket连线过程中,需要通过浏览器发出websocket连线请求,然后服务器发出回应,这个过程通常称为“握手” (handshaking)。
WebWorker
是运行在后台的javascript,不会影响页面的性能。
在HTML页面中运行脚本时,页面状态是不可相应,直到脚本运行结束。如果使用了webworker,用户可以对页面进行点击,选取等,因为webworker运行在服务器,不会影响。
除了IE,所有浏览器都支持webworker。
WebStorage
可以在客户端存储数据,类似于HTML4的cookie,但比cookie更强大。
Web Storage又分为两种:
sessionStorage
localStorage
从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地,除非主动删除数据,否则数据是永远不会过期的;不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个方法:
保存数据:localStorage.setItem( key, value ); sessionStorage.setItem( key, value );
读取数据:localStorage.getItem( key ); sessionStorage.getItem( key );
删除单个数据:localStorage.removeItem( key ); sessionStorage.removeItem( key );
删除所有数据:localStorage.clear( ); sessionStorage.clear( );
得到某个索引的key:localStorage.key( index ); sessionStorage.key( index );
两个都有属性 length 表示key 的个数,也即 key 长度:
var keyLength1 = localStorage.length; var keyLength2 = sessionStorage.length;
如上,key 和 value 都必须为字符串,换言之,web Storage的API只能操作字符串。
参考:http://blog.csdn.net/shenzhennba/article/details/8480756
protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duple)。一开始的握手需要借助HTTP请求完成。
现很多网站为了实现即时通讯,所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP
request,然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的有用数据可能只是一个很小的值,这样会占用很多的带宽。
在 WebSocket API,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即时服务带来了两大好处:
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器的推送,服务器不再被动的接收到浏览器的request之后才返回数据,而是在有新数据时就主动推送给浏览器。
在实现websocket连线过程中,需要通过浏览器发出websocket连线请求,然后服务器发出回应,这个过程通常称为“握手” (handshaking)。
WebWorker
是运行在后台的javascript,不会影响页面的性能。
在HTML页面中运行脚本时,页面状态是不可相应,直到脚本运行结束。如果使用了webworker,用户可以对页面进行点击,选取等,因为webworker运行在服务器,不会影响。
除了IE,所有浏览器都支持webworker。
WebStorage
可以在客户端存储数据,类似于HTML4的cookie,但比cookie更强大。
Web Storage又分为两种:
sessionStorage
localStorage
从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地,除非主动删除数据,否则数据是永远不会过期的;不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个方法:
保存数据:localStorage.setItem( key, value ); sessionStorage.setItem( key, value );
读取数据:localStorage.getItem( key ); sessionStorage.getItem( key );
删除单个数据:localStorage.removeItem( key ); sessionStorage.removeItem( key );
删除所有数据:localStorage.clear( ); sessionStorage.clear( );
得到某个索引的key:localStorage.key( index ); sessionStorage.key( index );
两个都有属性 length 表示key 的个数,也即 key 长度:
var keyLength1 = localStorage.length; var keyLength2 = sessionStorage.length;
如上,key 和 value 都必须为字符串,换言之,web Storage的API只能操作字符串。
参考:http://blog.csdn.net/shenzhennba/article/details/8480756
相关文章推荐
- 2015-2016网页设计趋势分析 Web Design of Trends
- 基于Node.js + WebSocket打造即时聊天程序嗨聊
- 微信小程序 WebSocket详解及应用
- Spring整合WebSocket应用示例(上)
- 详解java WebSocket的实现以及Spring WebSocket
- HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
- Tomcat实现WebSocket的方法
- Java中websocket消息推送的实现代码
- 详解Tomcat7中WebSocket初探
- Websocket协议详解及简单实例代码
- 浅析nodejs实现Websocket的数据接收与发送
- Spring整合websocket整合应用示例(下)
- 基于html5和nodejs相结合实现websocket即使通讯
- 基于node实现websocket协议
- Android中使用WebSocket实现群聊和消息推送功能(不使用WebView)
- 基于Swoole实现PHP与websocket聊天室
- 详解PHP中websocket的使用方法
- php使用websocket示例详解
- php+html5基于websocket实现聊天室的方法
- php中使用websocket详解