H5-12.22web-worker(续)及web socket

、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

布局代码

js代码

js代码

修改

四、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

打开菜单搜索cmd

找到命令行

创建服务端php文件

打开命令行 服务端php文件

这样就建好了本地服务端

六、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），表示已关闭连接。

一首好听的轻柔你的歌曲
http://music.163.com/#/song?id=437292675