区别Web Socket、Web Worker和Service Worker

因为个人容易把相近的东西给搞混，比如题目中的三个（Web Socket、Web Worker和Service Worker），所以特写一篇文章出来区分一下，也是顺便锻炼一下自己。

---

• Web Socket
  Web Socket是基于TCP的一个全双工通信协议，HTML5的新特性。
  先了解一下之前通信协议弊端。以前，在客户端和浏览器之间通信时，只能是客户端发请求之后，服务器才有所应答。如果服务器有新数据的话，不能够主动地发送给客户端，只能是客户端进行：

  • 轮询：客户端不断发新请求给服务器，服务器应答一次之后就断开连接，这就需要不断发起新请求，新连接，造成资源的浪费；

  • 长轮询：客户端发送请求后，就挂在那里，等到服务器有新数据之后，返回新数据，连接关闭。弊端在于服务器需要hold住连接，造成资源浪费，并且客户端收到资源后需要发送新请求。

  而Web Socket的好处就是在于服务器可以主动发送资源给客户端，而且只需要一次连接就会是持久连接（这样资源消耗就会少一些）。有了Web Socket连接，服务器可以源源不断地发送数据给客户端，且不需要每次发数据都进行验证连接信息。具体的实现方法为：

  1. 客户端在首次发送请求时需要这么写报文：

     GET / HTTP/1.1
     Upgrade: websocket
     Connection: Upgrade
     Sec-WebSocket-Protocol: chat, superchat
     Host: example.com
     Origin: http://example.com
     Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
     Sec-WebSocket-Version: 13

     重点在于需要添加上面的粗体内容，Upgrade告诉服务器你想要创建一个websocket连接，然后Sec-WebSocket-Key中的一串字符串会发送到服务器端，服务器接收到之后，如果它支持WebSocket连接，那么它就会对其加上特殊字符串之后，进行编码，放入Sec-WebSocket-Accept中返回，代表自己是支持Web Socket的。而Sec-WebSocket-Protocol代表客户端希望采用的Web Socket协议，Sec-WebSocket-Version代表客户端采用的Web Socket版本号。

  2. 服务器端返回的报文如下：

     HTTP/1.1 101 Switching Protocols
     Upgrade: websocket
     Connection:Upgrade
     Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
     Sec-WebSocket-Protocol: chat
     Sec-WebSocket-Location: ws://example.com/

     这里需要注意的是Sec-WebSocket-Location，Web Socket连接创建之后，双方的通信URL不再是用http或者https开头，而是要用ws开头代表是Web Socket。

  Web Socket的内容大致是这些了，具体在应用中，可以用相应的模块，不需要这么麻烦地写报文

---

• Web Worker
  众所周知，JavaScript是单线程的，但是碰到一些计算密集型或者高延迟的任务时，会影响整个页面的运行。Web Worker就是在这个环境下诞生的，它也是HTML5的新特性之一。

  Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
  Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。
  引用自阮一峰老师的文章《Web Worker 使用教程》

这篇文章里不对Web Worker进行讲解（学艺不精）

---

• Service Worker
  Service Worker实际上是浏览器和服务器之间的代理服务器，它最大的特点是在页面中注册并安装成功后，运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的 HTTP 请求。
  Service Worker的目的在于离线缓存，转发请求和网络代理。它有自己的生命周期
  

  • 安装（installing）
    在浏览器加载运用了Service Worker的页面时，Service Worker的JS文件也会被下载下来，然后运行安装，下载相应缓存。安装完之后，就会激活Service Worker（Activated）

  • 激活（Activated）
    激活Service Worker之后，Service Worker开始控制页面后台，当你刷新页面或者发送新请求的时候，Service Worker会对请求进行拦截，然后进行相应的操作（一般是看是否命中缓存，如果命中，就直接返回缓存，不需要再发送请求）

  Service Worker在浏览器运行的时候，每隔一段时间，它会在后台尝试重新下载Service Worker的JS文件，只要新的JS文件和旧的有一点不相同，那么就会重新安装-激活。BTW，Service Worker也是Web Work的一种。

---

要说的大概就这么多啦，因为后两者都没有实际使用过，所以能写的不多，以后用过了会再补充的。希望对大家有所帮助，如果文章有什么错误或者不明白的地方，欢迎大家指出，共同进步~