HTML5 Web Socket和Web Worker的区别以及使用方法

一、WEB SOCKET

1、Web Socket是一种协议、本质上和http、tcp一样、协议是用来说明数据是如何传输的,写过一个小的在线聊天使用了socket.io、之后总结这个项目

2、Web Socket的前缀有两种：（1）ws:// 不是加密的、 (2)wss:// 是加密的

3、客户端和服务端进行Web Socket交互的方式也可以理解为“http握手 tcp数据传输”的方式

（1）浏览器（支持Websocket的浏览器）像HTTP一样、发起一个请求、然后等待服务端的响应

（2）服务器返回握手响应、告诉浏览器请将后续的数据按照websocket制定的数据格式传过来

（3）浏览器和服务器的socket连接不中断、此时这个连接和http不同的是它是双工的了

（4）浏览器和服务器有任何需要传递的数据的时候使用这个长连接进行数据传递

注

HTTP握手：是因为浏览器和服务器在建立长连接的握手过程是按照HTTP1.1的协议发送的、有Request、Request Header、 Response、 Response Header、但是不同的是Header里面的字段是有特定含义的

TCP传输: 主要体现在建立长连接后、浏览器是可以给服务器发送数据、服务器也可以给浏览器发送请求的、当然它的数据格式并不是自己定义的、是在要传输的数据外层有ws协议规定的外层包的

4、数据传输过程:websocket的数据传输形式是：frame、比如会将一条消息分为几个frame、按照先后顺序传输出去、这样做会有几个好处

（1）大数据的传输可以分片传输、不用考虑到数据大小导致的长度标志位不足够的情况

（2）和http的chunk一样、可以边生成数据边传递消息、即提高传输效率

5、客户端使用Web Socket的语法：JavaScript、服务端：多种web框架支持

二、WEB WORKER

1、当在 HTML 页面中执行脚本时、页面的状态是不可响应的、直到脚本已完成、而Web Worker 是运行在后台的 JavaScript、独立于其他脚本、不会影响页面的性能、您可以继续做任何愿意做的事情：点击、选取内容等等、而此时 Web Worker 在后台运行

除了DOM操作之外、理论上任何JS脚本任务都可放入worker中执行；语法上的限制、则是不能跨域访问JS、worker常用于需要消耗大量时间和CPU资源的复杂计算、以换来前台用户操作的友好型；换句话说、从用户体验上看、提高了服务性能

2、Web Worker使用：(当我们创建 Web Worker 对象后、它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止）

（1）通过向 Web Worker 添加一个 "onmessage" 事件监听器来获取接受到的消息

（2）发送消息：postMessage()

（3）终止 Web Worker、并释放浏览器/计算机资源: terminate()

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com