web socket and web worker 基础原理及使用

我的认为HTML5最吸引人的两大功能， web socket 和 worker为构建高效能的web应用提供了新的参考方案。

大致来讲，web socket提供更高效的传输协议，web worker提供多线程提升web应用计算效率。最近项目有用到，对应两个问题的解决，目前运行效果来看仍是很不错。

这里主要是总结这两个技术的基础原理，和经常使用API。备忘，也列举关键掌握点，入门和基础使用足以。

Web Socket

websocket是一种协议，本质上和http，tcp同样。协议是用来讲明数据是如何传输的。它的url前缀是ws:// 或者wss://，后者是加密的。客户端和服务端进行websocket交互的方式也有人理解为“HTTP握手+TCP数据传输”的方式。

HTTP握手+TCP数据传输：

1. 浏览器（支持Websocket的浏览器）像HTTP同样，发起一个请求，而后等待服务端的响应；

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

3. 浏览器和服务器的socket链接不中断，此时这个链接和http不一样的是它是双工的了；

4. 浏览器和服务器有任何须要传递的数据的时候使用这个长链接进行数据传递

这里说它是HTTP握手，是由于浏览器和服务器在创建长链接的握手过程是按照HTTP1.1的协议发送的，有Request，Request Header， Response， Response Header。可是不一样的是Header里面的字段是有特定含义的。

说它是TCP传输，主要体如今创建长链接后，浏览器是能够给服务器发送数据，服务器也能够给浏览器发送请求的。固然它的数据格式并非本身定义的，是在要传输的数据外层有ws协议规定的外层包的。

数据传输过程

websocket的数据传输是frame形式传输的，好比会将一条消息分为几个frame，按照前后顺序传输出去。这样作会有几个好处：

1. 大数据的传输能够分片传输，不用考虑到数据大小致使的长度标志位不足够的状况。

2. 和http的chunk同样，能够边生成数据边传递消息，即提升传输效率。

客户端API

下面是在客户端使用websocket的API，语法就是基础的javascript，很是简单。只有服务端的API，有多种web框架支持，好比play，能够自行搜索。

var socket;
 
$("#connect").click(function(event){
    socket = new WebSocket("ws://127.0.0.1:8999/getLog");
 
    socket.onopen = function(){
        console.log("Socket has been opened");
    }
 
    socket.onmessage = function(msg){
        console.log("get log: " ＋ msg.data);
    }
 
    socket.onclose = function() {
        alert("Socket has been closed");
    }
    
    socket.onerror = function() {
        console.log(“Web Socket Error!”);
    }
});
 
$("#send").click(function(event){
    socket.send("send from client");
});
 
$("#close").click(function(event){
    socket.close();
})

web worker

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

而web worker 是运行在后台的 JavaScript，独立于其余脚本，不会影响页面的性能。您能够继续作任何愿意作的事情：点击、选取内容等等，而此时 web worker 在后台运行。

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

API

worker的主线程和子线程间经过postMessage()来发送消息，经过向 web worker 添加一个 "onmessage" 事件监听器来获取接受到的消息。

当咱们建立 web worker 对象后，它会继续监听消息（即便在外部脚本完成以后）直到其被终止为止。如需终止 web worker，并释放浏览器/计算机资源，使用 terminate() 方法便可。

var worker =new Worker("worker_job.js"); //建立一个Worker对象并向它传递将在新线程中执行的脚本的URL

 worker.postMessage("hello world");     //向worker发送数据
 
 worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
 }

也能够经过添加事件监听器来处理message，在worker内部经过self.函数来和主线程通讯:

self.addEventListener('message', function(e) {
    var data = e.data;
    if(data == 'init')
        init();
    else
        ...
}, false);

self.postMessage("hello worker");