Web Socket、Web Worker、Service Worker

web socket

诞生背景

        前期，很多网站为了实现推送技术，使用轮询技术，即浏览器每隔一段时间向服务器发出HTTP请求，然后服务器返回最新的数据给客户端。但其也存在很明显的缺点：浏览器需要不断向服务器发出请求，然而HTTP请求与响应可能会包含比较长的头部，其中真正有效的数据可能只有很小一部分，会消耗很多带宽资源。为此，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并能够更实时的进行通信。

简介

        WebSocket是一种在单个TCP连接上进行全双工通信的协议，允许客户端和服务器端之间的实时数据交换，其位于OSI模型的应用层。与传统的HTTP请求相比，在WebSocket，只需要完成一次握手，两者就可创建持久性的连接。具有更低的延迟和更高的并发性，适用于实时通信场景。

主要优势和特点

1.实时性：允许服务器向客户端推送数据，实现实时通信

2.全双工通信：允许客户端和服务器同时发送或接受数据，实现真正的双向通信

3.较低的延迟：由于WebSocket在建立连接后保持长连接，减少了连接和关闭的开销，因此具有较低的延迟。

4.更少的数据传输：WebSocket使用二进制帧传输数据，相比HTTP的文本传输，数据传输更高效。且建立连接后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。

5.跨域支持：WebSocket支持跨域通信，不受同源策略限制

目前主流的Web浏览器都支持WebSocket，可放心使用。

使用

        在浏览器中使用WebSocket，必须先创建WebSocket对象，该对象提供了用于创建和管理WebSocket连接。一旦握手成功，客户端和服务器之间就建立了双向通信的通道，双方可以通过WebSocket对象的send()方法发送消息，通过onmessage事件接收消息。

//创建WebSocket对象，参数是WebSocket服务器的URL
const socket = new WebSocket("ws://example.com");

//监听WebSocket连接建立事件
socket.open = () => {
    console.log("WebSocket连接已建立")
}

//监听WebSocket消息事件
socket.onmessage = (event) => {
    const data = event.data
    console.log("接收消息："+data)
}

//监听WebSocket连接关闭事件
socket.onclose = () => {
    console.log("WebSocket连接已关闭")
}

//向服务器发送消息
socket.send("HELLO,WebSocket!")

Web Worker

        HTML5 Web Worker是一种浏览器提供的JavaScript多线程解决方案，它允许在后台运行独立于页面主线程的脚本，从而避免阻塞页面的交互和渲染。Web Worker可以用于执行计算密集型任务、处理大量数据、实现并行计算等，从而提升前端应用的性能和响应能力。

特点和用途

多线程：Web Worker运行在独立的线程中，不会阻塞主线程，因此可以并行处理任务，提高业务的响应性能。

独立环境：Web Worker运行在一个独立的全局上下文中，无法访问DOM、window、document等主线程的对象，确保不会影响页面的状态和结构

通信机制：Web Worker与主线程之间通过消息传递进行通信，可以发送和接收消息，实现数据交换。

长时间运行：Web Worker适用于长时间运行的计算任务，避免主线程被耗时操作阻塞

使用方法

//在主线程中创建Web Worker
const worker = new Worker('worker.js')

//主线程中监听Web Worker发送的消息
worker.onmessage = function(event){
    console.log('收到消息：',event.data)
}

//主线程中向Web Worker发送消息
worker。postMessage('发送消息成功')

在Web Worker脚本中处理消息

//Web Worker脚本中监听主线程发送的消息
self.onmessage = function(event){
    console.log('收到消息：',event.data)
    
    //在这里进行耗时的计算或处理
    //将结果发送回主线程
    self.postMessage('Hello')
}

Web Worker对旧版本的IE浏览器不兼容

Service Worker

概念和用法

        Service worker 是一个注册在指定源和路径下的事件驱动worker，采用JS文件的形式，控制关联的页面或者网站，拦截并修改访问和资源请求，粗粒度地缓存资源。

        Service Worker运行在worker上下文，因此无法访问DOM，不会造成阻塞，被设计为完全异步，因此同步的XHR和Web Storage不能在service worker中使用

        Service Worker只能由HTTPS承载

使用方法

if ('serviceWorker' in navigator) {
            //判断浏览器是否支持
            window.addEventListener('load', function () {
                // window在加载的时候来注册“sw.js”这个文件。这个文件就是serviceWorker
                navigator.serviceWorker.register('sw.js')
                    .then(registration => {
                        // 返回一个promise
                        console.log("成功！");
                        console.log(registration)
                    })
                    .catch(err => {
                        console.log("失败")
                        console.log(err)
                    })
            })
        }