在前端开发中，实时通信是一个非常重要的需求。而实现实时通信最常见的方式是使用长轮询或 Websocket。但是，在某些情况下，这些方式并不适用。比如说，如果需要从后端实时推送数据给前端，但是前端只能发送请求而不能接收数据，那么长轮询和 Websocket 就无法满足需求了。这时，我们就可以使用 Server-sent Events 和 Web Workers 来实现多线程实时通信。
Server-sent Events
Server-sent Events 是一种 HTML5 提供的技术，可以让服务器向客户端推送数据。它基于 HTTP 协议，而且只支持单向通信（服务器推送数据给客户端）。客户端通过 EventSource 对象来接收服务器推送的数据。下面是一个使用 Server-sent Events 的简单示例：
const eventSource = new EventSource('/stream');
eventSource.onmessage = (event) => {
console.log(event.data);
};在这个示例中，我们创建了一个 EventSource 对象，并指定了服务器端的地址。当服务器向客户端推送数据时，客户端的 onmessage 回调函数就会被调用。我们可以在这个回调函数中处理服务器推送的数据。
在使用 Server-sent Events 时，服务器需要按照一定的格式推送数据。下面是一个推送数据的示例：
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.write('data: hello\n\n');在这个示例中，我们使用 res.write() 方法向客户端推送数据。需要注意的是，推送的数据必须按照一定的格式，包括 data、event 和 id 三个字段。其中，data 字段表示推送的数据，event 字段表示事件名称，id 字段表示事件的 ID。在默认情况下，event 和 id 字段可以省略。另外，每个推送的数据都必须以两个换行符结尾。
Web Workers
Web Workers 是一种 HTML5 提供的技术，可以让 JavaScript 运行在单独的线程中，从而实现多线程编程。Web Workers 可以在后台运行，不会阻塞主线程的执行。在实时通信中，我们可以使用 Web Workers 来处理接收到的数据，从而避免阻塞主线程。下面是一个使用 Web Workers 的简单示例：
const worker = new Worker('worker.js');
worker.onmessage = (event) => {
console.log(event.data);
};
worker.postMessage('hello');在这个示例中，我们创建了一个 Web Worker 对象，并指定了 worker.js 文件的地址。当 Web Worker 接收到数据时，客户端的 onmessage 回调函数就会被调用。我们可以在这个回调函数中处理接收到的数据。另外，我们可以使用 postMessage() 方法向 Web Worker 发送数据。
在 Web Worker 中，我们可以使用 importScripts() 方法引入其他脚本文件。这样，我们就可以在 Web Worker 中使用其他的 JavaScript 库。
实现多线程实时通信
现在，我们来看一下如何使用 Server-sent Events 和 Web Workers 来实现多线程实时通信。我们可以将服务器推送的数据作为 Web Worker 的输入数据，然后在 Web Worker 中处理数据，并将处理结果发送给主线程。下面是一个简单的示例：
-- -------------------- ---- ------- -- ---------- ----- ------ - --- -------------------- ---------------- - ------- -- - ------------------------ -- ----- ----------- - --- ----------------------- --------------------- - ------- -- - ------------------------------- -- -- --------- --------------------------------- -------------- - ------- -- - ----- ---- - ----------------------- ----- ------ - ------------------------------ ------------------------- --
在这个示例中，我们创建了一个 Web Worker 对象，并指定了 worker.js 文件的地址。当 Web Worker 接收到数据时，客户端的 onmessage 回调函数就会被调用。我们可以在这个回调函数中处理接收到的数据。另外，我们使用 EventSource 对象接收服务器推送的数据，并将数据发送给 Web Worker。在 Web Worker 中，我们使用 importScripts() 方法引入 some-library.js 文件，并使用 SomeLibrary.processData() 方法处理数据。最后，我们使用 postMessage() 方法将处理结果发送给主线程。
结论
使用 Server-sent Events 和 Web Workers 可以实现多线程实时通信，从而避免阻塞主线程。在实现实时通信时，我们需要注意服务器推送数据的格式，以及 Web Worker 的使用方式。另外，我们可以使用一些 JavaScript 库来帮助我们处理数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675d5c4fe1dcc5c0fa3bd425