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

最新推荐文章于 2024-01-16 16:06:25 发布

mus_木司

最新推荐文章于 2024-01-16 16:06:25 发布

阅读量306

点赞数

分类专栏：前端前端面试文章标签： html5

原文链接：https://my.oschina.net/u/2274721/blog/419772

版权

前端同时被 2 个专栏收录

68 篇文章 2 订阅

订阅专栏

前端面试

60 篇文章 6 订阅

订阅专栏

转载：https://my.oschina.net/u/2274721/blog/419772
个人认为HTML5最吸引人的两大功能， web socket 和 worker为构建高效能的web应用提供了新的参考方案。

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

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

Web Socket

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

HTTP握手+TCP数据传输：

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

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

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

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

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

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

数据传输过程

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

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

和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");