在 Web 开发中，实时通信是非常重要的，而 WebSocket 技术是实现实时通信的一种常用方式。但是 WebSocket 技术需要客户端和服务端同时支持，因此对于一些旧的浏览器或者服务端，我们需要使用其他的技术来实现实时通信。Server-Sent Events 就是一种可以在不支持 WebSocket 的环境下实现实时通信的技术。
本文将介绍如何在 Laravel 中实现 Server-Sent Events，以便在不支持 WebSocket 的环境下实现实时通信。
什么是 Server-Sent Events
Server-Sent Events 是一种实现服务器向客户端推送数据的技术。它是基于 HTTP 协议的一种技术，因此可以在不支持 WebSocket 的环境下使用。
Server-Sent Events 的工作原理是，客户端向服务器发送一个 HTTP 请求，服务器保持这个连接处于打开状态，并且在有新的数据时，向客户端发送数据。客户端可以通过 JavaScript 监听这个连接，从而实现实时接收数据。
Server-Sent Events 与 WebSocket 的区别在于，WebSocket 是一个全双工的协议，可以在客户端和服务器之间建立一个持久的连接，而 Server-Sent Events 只能在客户端和服务器之间建立一个单向的连接。
Laravel 中的 Server-Sent Events
在 Laravel 中实现 Server-Sent Events 可以使用 Symfony\Component\HttpFoundation\StreamedResponse 类。这个类可以让我们实现一个可以在数据可用时不断向客户端发送数据的响应。
以下是一个在 Laravel 中实现 Server-Sent Events 的示例代码：
// javascriptcn.com 代码示例
Route::get('/events', function () {
return new Symfony\Component\HttpFoundation\StreamedResponse(function () {
while (true) {
$data = // 从数据源获取数据
echo "data: $data\n\n";
ob_flush();
flush();
sleep(1);
}
}, 200, [
'Content-Type' => 'text/event-stream',
'Cache-Control' => 'no-cache',
'Connection' => 'keep-alive',
]);
});在这个示例中，我们使用了一个匿名函数作为响应的主体。在这个函数中，我们不断地从数据源获取数据，然后通过 echo 输出到响应中。在输出数据后，我们需要调用 ob_flush 和 flush 函数将数据发送到客户端。
我们还需要设置响应的头部，包括 Content-Type、Cache-Control 和 Connection。其中，Content-Type 必须设置为 text/event-stream，Cache-Control 必须设置为 no-cache，Connection 必须设置为 keep-alive，以便保持连接处于打开状态。
在客户端，我们可以使用 JavaScript 监听这个连接，从而实时接收数据。以下是一个在客户端中监听 Server-Sent Events 的示例代码：
let source = new EventSource('/events');
source.addEventListener('message', function (event) {
let data = event.data;
// 处理数据
});在这个示例中，我们使用 EventSource 类创建了一个监听 /events 这个连接的对象。当有新的数据到达时，message 事件会被触发，我们可以从 event.data 中获取数据，然后进行相应的处理。
总结
在不支持 WebSocket 的环境下，Server-Sent Events 是一种实现实时通信的技术。在 Laravel 中实现 Server-Sent Events 可以使用 Symfony\Component\HttpFoundation\StreamedResponse 类，通过不断地向客户端发送数据，从而实现实时通信。在客户端，我们可以使用 JavaScript 监听这个连接，从而实时接收数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6510030895b1f8cacd8aa99c