NFH.009 - Web Worker与Web Socket

---

12.22学习经验分享#

Bruce_Zhu于2016.12.23

---

一、Web Worker

1. Web Worker是 运行在后台的javascript,也就是说worker其实就是就一个js文件对象，worker可以让他所包含的js代码运行在后台

2. 特点：

   1）充分利用多核CPU的优势
   2）对多线程支持非常好
   3）不会影响页面的性能
   4）不能访问web页面和DOM API
   5）所有的主流浏览器均支持web worker,除了Internet Explorer

   BOM+DOM+ECMAScipt

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

1. 对于任何程序来说，能够实现数据存储是必备功能之一，并且在需要的时候能够提供数据。但在过去的Web客户端，没有能够支持数据存储的有效机制，cookie曾用来在客户端存储少量信息，但受其性质所限，cookie只能存储一些短的字符串

2. 在HTML5中提供了Web存储API，它是在cookie之上的增强。这个API允许我们在用户的硬盘上存储数据，并在日后使用这些数据。

3. API可以分成两个部分：

   1）信息必须且只在会话过程中使用—sessionStorage

   当浏览器窗口关闭时，数据全部丢失

   2）信息必须长期保存且由用户决定时长—localStorage

   关闭浏览器窗口时，数据继续使用

   数据只能由用户删除

三、sessionStorage

1. sessionStorage这部分API就像是会话cookie的替代。

2. cookie以及sessionStorage都是在特定的时间段内保持数据可用。但cookie使用浏览器作为引用，而sessionStorage使用单个窗口作为引用，这就意味着，窗口关闭之后，sessionStorage就不能再使用。

3. 方法

1）设置数据
   
   setItem(key,value)

   key - 作为存储数据的唯一标识
   value - 存储的数据内容(number/string)

2) 根据标识获取数据

   var value = getItem(key);
   
3) 删除指定标识的数据

    removeItem(key);

4）将存储系统的所有数据删除

    clear()

5）根据索引值返回key

     var key = key(index);

3. 属性

   返回当前存储系统的数据个数

   length

四、localStorage

1. 提供的属性和方法与sessionstorage一致

2. storage事件

   实现多个窗口之间共享数据内容

   问题：

   数据安全性低
   目前除Safari浏览器支持该事件，其他浏览器不支持

五、Web socket

1. 网络协议

   客户端与服务端进行通信的协议

   HTTP协议 - 目前互联网中最广泛的协议
   SOCKET协议 - 应用于实时即时通信

2. HTTP协议的问题

   1）无状态

   本次客户端的请求,服务器端不知道客户端的上次请求

   2）短连接

   指通讯双方有数据交互时，就建立一个连接，数据发送完成后，则断开此连接，即每次连接只完成一项业务的发送。

3. web Socket

   实现了用HTTP不容易实现的服务器端的数据推送等智能通讯技术

4. Web Socket的特点

   1）这个连接是实时的，也是永久的
   2）服务端可以主动推送消息
   3）服务端不需要轮询客户端的请求
   4）服务器端与客户端之间通信无需重新建立连接

5. 使用WorkerMan,设置socket客户端

   1）设置php环境变量

   2）下载并解压workerMan

   http://www.workerman.net/workerman
   
   workerMan学习文档
   
   http://doc3.workerman.net/getting-started/simple-example.html
   

   3）在任意位置创建http_test.php文件，并将课件中的start.text文件中内容复制到该文件中（位置任意，能引用到Workerman文件中的Autoloader.php即可

   4. 运行上建的文件，启动workerMan

      执行workerMan

六、Web socket的使用

1. 调用 WebSocket 对象的构造器来建立与服务器之间的通信连接

   var webSocket = new WebSocket (“ws://127.0.0.1: 8005/socket”) ;

   请求地址(url)不能再是http://开头,Web Sockets的请求头(url的开头)

   ws:// - Web Socket的缩写
   wss:// - 表示加密协议

2. 使用 WebSocket 对象的 send() 方法对服务器发送数据

   webSocket.send (“data”);

   send() 方法只能发送文本数据。,使用JSON对象把任何JavaScript,对象转换称文本数据后进行发送。

3. 通过WebSocket对象的close() 方法来关闭socket，切断通信连接：

   webSocket.close( ) ;

4. 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 ){
       
   }
   

5. 通过读取 readyState 的属性值来获取 WebSocket 对象的状态。

   CONNECTING（数字值为0），表示正在连接。
   OPEN（数字值为1），表示已建立连接。
   CLOSING（数字值为2），表示正在关闭连接。
   CLOSED（数字值为2），表示已关闭连接。