一文带你搞定什么是WebSocket和WebWorker

最新推荐文章于 2024-03-06 18:12:43 发布

哥的冷酷

最新推荐文章于 2024-03-06 18:12:43 发布

阅读量1k

点赞数 6

文章标签： websocket 网络协议网络

本文链接：https://blog.csdn.net/zxc123401/article/details/131491466

版权

Web Socket和Web Worker都是h5新特性的新技术，那么它们到底是什么，有什么作用，有什么区别呢？本文将对Web Socket和Web Worker做一个清晰的介绍，可帮助小白快速上手和理解。

一、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，若有不足，欢迎指出！