12.22学习经验分享#
Bruce_Zhu于2016.12.23
一、Web Worker
-
Web Worker是 运行在后台的javascript,也就是说worker其实就是就一个js文件对象，worker可以让他所包含的js代码运行在后台
-
特点：
1）充分利用多核CPU的优势
2）对多线程支持非常好
3）不会影响页面的性能
4）不能访问web页面和DOM API
5）所有的主流浏览器均支持web worker,除了Internet ExplorerBOM+DOM+ECMAScipt
-
Worker提供API
1）检测当前浏览器是否支持Worker
typeof(Worker) !== "undefined"
2）创建Worker文件
创建普通的 JS 文件，都可以用于 Web Worker 文件
3）创建Web Worker对象
var worker = new Worker("myTime.js"); 参数就是在第二步创建的js文件的路径4）worker事件
onmessage事件
用于监听 Web Worker 传递消息，通过回调函数接收传递的消息，通过回调函数的事件对象data 属性可以获取传递的消息postMessage()
w.postMessage( “worker success.” ); 通过postMessage() 方法传递消息内容w.terminate();
在HTML页面中，通过调用 Web Worker 对象的terminate( ) 方法终止 Web Worker。创建WebWorker对象
Worker对象onmessage事件，当执行postMessage事件时会触发
postMessage()方法
terminate()方法
二、Web存储API
-
对于任何程序来说，能够实现数据存储是必备功能之一，并且在需要的时候能够提供数据。但在过去的Web客户端，没有能够支持数据存储的有效机制，cookie曾用来在客户端存储少量信息，但受其性质所限，cookie只能存储一些短的字符串
-
在HTML5中提供了Web存储API，它是在cookie之上的增强。这个API允许我们在用户的硬盘上存储数据，并在日后使用这些数据。
-
API可以分成两个部分：
1）信息必须且只在会话过程中使用—sessionStorage
当浏览器窗口关闭时，数据全部丢失
2）信息必须长期保存且由用户决定时长—localStorage
关闭浏览器窗口时，数据继续使用
数据只能由用户删除
三、sessionStorage
-
sessionStorage这部分API就像是会话cookie的替代。
-
cookie以及sessionStorage都是在特定的时间段内保持数据可用。但cookie使用浏览器作为引用，而sessionStorage使用单个窗口作为引用，这就意味着，窗口关闭之后，sessionStorage就不能再使用。
-
方法
1）设置数据
setItem(key,value)
key - 作为存储数据的唯一标识
value - 存储的数据内容(number/string)
2) 根据标识获取数据
var value = getItem(key);
3) 删除指定标识的数据
removeItem(key);
4）将存储系统的所有数据删除
clear()
5）根据索引值返回key
var key = key(index);
-
属性
返回当前存储系统的数据个数
length
四、localStorage
-
提供的属性和方法与sessionstorage一致
-
storage事件
实现多个窗口之间共享数据内容
问题：
数据安全性低
目前除Safari浏览器支持该事件，其他浏览器不支持
五、Web socket
-
网络协议
客户端与服务端进行通信的协议
HTTP协议 - 目前互联网中最广泛的协议
SOCKET协议 - 应用于实时即时通信 -
HTTP协议的问题
1）无状态
本次客户端的请求,服务器端不知道客户端的上次请求
2）短连接
指通讯双方有数据交互时，就建立一个连接，数据发送完成后，则断开此连接，即每次连接只完成一项业务的发送。
-
web Socket
实现了用HTTP不容易实现的服务器端的数据推送等智能通讯技术
-
Web Socket的特点
1）这个连接是实时的，也是永久的
2）服务端可以主动推送消息
3）服务端不需要轮询客户端的请求
4）服务器端与客户端之间通信无需重新建立连接 -
使用WorkerMan,设置socket客户端
1）设置php环境变量
2）下载并解压workerMan
http://www.workerman.net/workerman workerMan学习文档 http://doc3.workerman.net/getting-started/simple-example.html3）在任意位置创建http_test.php文件，并将课件中的start.text文件中内容复制到该文件中（位置任意，能引用到Workerman文件中的Autoloader.php即可
-
运行上建的文件，启动workerMan
执行workerMan
-
六、Web socket的使用
-
调用 WebSocket 对象的构造器来建立与服务器之间的通信连接
var webSocket = new WebSocket (“ws://127.0.0.1: 8005/socket”) ;
请求地址(url)不能再是http://开头,Web Sockets的请求头(url的开头)
ws:// - Web Socket的缩写
wss:// - 表示加密协议 -
使用 WebSocket 对象的 send() 方法对服务器发送数据
webSocket.send (“data”);
send() 方法只能发送文本数据。,使用JSON对象把任何JavaScript,对象转换称文本数据后进行发送。
-
通过WebSocket对象的close() 方法来关闭socket，切断通信连接：
webSocket.close( ) ;
-
Web Socket事件
1）通过获取 onmessage事件来接收服务器传来的数据：
webSocket.onmessage = function( event ){ var data = event.data ; }2）通过获取 onopen 事件来监听 socket 的打开事件：
webSocket.onopen = function( event ){ }3）通过获取onclose事件来监听socket 的关闭事件：
webSocket.onclose = function( event ){ }4）通过onerror事件，监听客户端与服务器端连接出错
webSocket.onerror = function( event ){ } -
通过读取 readyState 的属性值来获取 WebSocket 对象的状态。
CONNECTING（数字值为0），表示正在连接。
OPEN（数字值为1），表示已建立连接。
CLOSING（数字值为2），表示正在关闭连接。
CLOSED（数字值为2），表示已关闭连接。
网友评论