Web Socket和Web Worker都是h5新特性的新技术，那么它们到底是什么，有什么作用，有什么区别呢？本文将对Web Socket和Web Worker做一个清晰的介绍，可帮助小白快速上手和理解。
一、Web Socket介绍
Web Socket是一种网络通信协议，用于实现客户端和服务器之间的双向通信。如果说是使用HTTP请求的话，必须要客户端先向服务器发送请求，服务器才能返回数据，而且一条请求只会返回一条数据，一一对应。与传统的HTTP请求-响应模式不同，Web Socket允许服务器主动向客户端发送数据，而不需要客户端首先发起请求，可以由此实现简单的聊天机器人的功能。
Web Socket协议在握手阶段使用HTTP协议，然后通过HTTP升级头将连接协议从HTTP升级为WebSocket。一旦握手成功，客户端和服务器之间的连接将保持打开状态，可以在连接上双向传输数据。
Web Socket协议具有以下特点：
- 双向通信：客户端和服务器可以在任何时间点上互相发送数据，而不需要依赖于请求-响应模式。
- 实时性：由于连接保持打开状态，服务器可以立即将数据推送到客户端，实现实时通信。
- 较低的开销：Web Socket使用较少的网络流量和较低的延迟，因为它减少了HTTP协议中的握手和请求头的开销。
- 跨域支持：与传统的Ajax请求不同，Web Socket协议允许在不同域之间进行跨域通信。
Web Socket的使用可以分为客户端和服务器端两部分，需要在客户端和服务器端做相应的配置
客户端：
- 创建WebSocket对象：在客户端代码中，你需要创建一个WebSocket对象来建立与服务器的连接。可以使用JavaScript提供的WebSocket API，如在浏览器中使用**
new WebSocket(url)** 来创建Web Socket对象。- 监听事件：WebSocket对象提供了几个事件，用于处理与服务器的连接状态和接收消息。常见的事件包括**
onopen（连接建立时触发）、onmessage（接收到服务器发送的消息时触发）、onclose（连接关闭时触发）和onerror**（发生错误时触发）。你可以为这些事件绑定相应的处理函数。- 发送消息：使用WebSocket对象的**
send()** 方法可以向服务器发送消息。你可以将需要发送的数据作为参数传递给**send()** 方法。
// 创建WebSocket对象
const socket = new WebSocket(url);
socket.onopen = function() {
console.log('WebSocket连接已建立');
// 可以在连接建立后发送消息
socket.send('Hello Server!');
};
socket.onmessage = function(event) {
console.log('接收到服务器发送的消息:', event.data);
};
socket.onclose = function() {
console.log('WebSocket连接已关闭');
};
socket.onerror = function(error) {
console.error('WebSocket发生错误:', error);
};
服务器端
- 处理WebSocket连接：在服务器端，你需要监听WebSocket连接请求并进行处理。不同的编程语言和框架提供了不同的WebSocket库和API，你可以选择适合你的环境的方式来处理WebSocket连接请求。
- 处理消息和发送消息：一旦与客户端建立了WebSocket连接，服务器可以接收来自客户端的消息，并进行相应的处理。服务器也可以使用WebSocket连接向客户端发送消息。
以node.js为例子进行后端代码展示
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('WebSocket连接已建立');
ws.on('message', function incoming(message) {
console.log('接收到客户端发送的消息:', message);
// 处理接收到的消息，并向客户端发送响应
ws.send('收到你的消息了！');
});
ws.on('close', function() {
console.log('WebSocket连接已关闭');
});
});
二、Web Worker介绍
Web Worker是HTML5引入的一项技术，它允许在浏览器中创建多线程环境，将一些耗时的计算任务放在后台线程中执行，以避免阻塞主线程，提高页面的响应性和性能。
这里其实涉及到了javascript的事件循环机制Event Loop，因为javascript是一门单线程语言，Event Loop就是为了其不被阻塞而设定的一种机制。
setTimeout(function(){
console.log(111)
},1000)
console.log(1) // 打印结果为1 111
这个执行结果应该很多小伙伴都知道了，如果有小伙伴不知道的可以参考下Event Loop的机制。(篇幅不够这里就不展开说了)
那么如果是这种情况呢，111还会打印吗？
setTimeout(function(){
console.log(111)
},1000)
while(true){
// 任意代码块
}
答案是不会打印，因为写了一个死循环，从而导致定时器一直被阻塞，永远无法打印。如果说想实现1秒后打印，那么就可以用到Web Worker啦。
// 创建一个新的Web Worker
var worker = new Worker('worker.js');
// 监听Web Worker的消息
worker.onmessage = function(event) {
console.log(event.data);
};
// 向Web Worker发送消息
worker.postMessage('start');
// 在worker.js文件中的代码：
self.onmessage = function(event) {
if (event.data === 'start') {
setTimeout(function(){
self.postMessage(111);
}, 1000);
}
};
Web Worker具有以下特点和用途：
- 多线程环境：Web Worker在浏览器中创建了一个独立的线程环境，与主线程（通常是UI线程）相互独立运行。这样可以使得主线程不受耗时任务的影响，保持页面的流畅性和响应性。
- 后台执行：Web Worker用于执行一些耗时的计算、数据处理或其他需要大量CPU资源的任务。这些任务通常在后台线程中执行，不会阻塞用户界面的更新和交互。
- 无法直接访问DOM：Web Worker在独立的线程中运行，因此无法直接访问页面的DOM结构，也不能更新UI。这是为了保证线程安全和避免竞争条件。
- 事件通信机制：Web Worker通过事件机制与主线程通信。主线程可以向Web Worker发送消息，Web Worker通过监听
message事件来接收消息并进行相应的处理。同样，Web Worker也可以向主线程发送消息。
需要注意的是，Web Worker之间是相互独立的，它们之间不能直接通信。如果需要多个Web Worker之间的通信，可以借助主线程作为中介来实现。
Web Worker的使用场景包括但不限于：
- 复杂的计算：例如图像处理、数据分析等。
- 大规模数据处理：例如排序、搜索等。
- 后台数据加载和处理：例如异步加载和处理数据，以保持用户界面的响应性。
- 实时数据更新和计算：例如实时绘图、实时数据更新等。
通过使用Web Worker，开发人员可以利用浏览器的多线程能力，将一些耗时的任务从主线程中分离出来，提高页面的性能和用户体验。
三、总结
WebSocket和Web Worker是两种不同的技术，用于在Web应用程序中实现不同的功能。
下面是WebSocket和Web Worker的区别：
- 功能和用途：WebSocket用于实现实时通信和双向通信，允许在客户端和服务器之间进行实时数据传输。它适用于需要实时性和即时通信的应用。而Web Worker用于在后台运行脚本，独立于主线程，用于执行一些耗时的任务和计算密集型操作，从而提高应用程序的响应性。
- 线程模型：WebSocket运行在主线程中，它使用单个持久的连接进行通信。而Web Worker可以创建多个后台线程，在这些线程中执行任务，与主线程并行运行。Web Worker通过消息传递与主线程通信。
- 通信机制：WebSocket使用WebSocket协议进行通信，它建立在TCP上，提供了双向通信的能力。Web Worker通过消息传递与主线程通信，使用postMessage方法发送消息，通过监听onmessage事件接收消息。
- 应用场景：WebSocket适用于实时聊天、在线游戏、实时协作等需要实时通信的应用场景。Web Worker适用于执行一些耗时的操作，如图像处理、数据计算、文件解析等。
总的来说，WebSocket用于实现实时通信，而Web Worker用于在后台执行任务。它们在功能、线程模型和通信机制等方面有着不同的特点和应用场景。
如果该文章对你有帮助，不要忘记点个赞支持一下！
respect，若有不足，欢迎指出！
