本篇文章給大家帶來了關于laravel 事件流的相關知識，其中主要介紹了什么是事件流，又如何在 laravel 中創建一個簡單的事件流，感興趣的朋友一起來看一下吧，希望對大家有幫助。
簡介
事件流為你提供了一種將事件發送到客戶端而無需重新加載頁面的方法。當對數據庫進行實時更改時，這對于更新用戶界面非常有用。
與使用 ajax 請求的傳統長輪詢不同，在傳統輪詢中，多個請求被發送到服務器，每次都建立新的連接，事件流在單個請求中實時發送到客戶端。
在本文中，我將向你展示如何在 Laravel 中創建一個簡單的事件流。
先決條件
在開始之前，你需要在機器上安裝 Laravel。
我將在這個演示中使用 DigitalOcean ubuntu Droplet 。如果你愿意，你可以使用我的會員代碼獲得免費 $100 DigitalOcean 積分來啟動你自己的服務器！
如果你還沒有，可以按照本教程中的步驟進行操作：
或者可以使用這個很棒的腳本進行安裝：
創建一個 Controller
讓我們從創建一個處理事件流的控制器開始。
使用以下命令：
這將在 ApphttpControllers 目錄中創建一個新控制器。
添加事件流方法
一旦我們創建了我們的控制器，我們需要向它添加 stream 方法。 該方法將用于發送事件流。
打開 EventStreamController.php 文件并添加以下代碼：
<?php namespace AppHttpControllers;use carbonCarbon;use AppModelsTrade;class StreamsController extends Controller{ /** * 事件流代碼 * * @return IlluminateHttpResponse */ public function stream(){ return response()->stream(function () { while (true) { echo "event: pingn"; $curDate = date(DATE_ISO8601); echo 'data: {"time": "' . $curDate . '"}'; echo "nn"; $trades = Trade::latest()->get(); echo 'data: {"total_trades":' . $trades->count() . '}' . "nn"; $latestTrades = Trade::with('user', 'stock')->latest()->first(); if ($latestTrades) { echo 'data: {"latest_trade_user":"' . $latestTrades->user->name . '", "latest_trade_stock":"' . $latestTrades->stock->symbol . '", "latest_trade_volume":"' . $latestTrades->volume . '", "latest_trade_price":"' . $latestTrades->stock->price . '", "latest_trade_type":"' . $latestTrades->type . '"}' . "nn"; } ob_flush(); flush(); // 如果客戶端中止連接，則中斷循環（關閉頁面） if (connection_aborted()) {break;} usleep(50000); // 50ms } }, 200, [ 'Cache-Control' => 'no-cache', 'Content-Type' => 'text/event-stream', ]); }}
這里要注意的主要事項是：
- 我們使用 response()->stream() 方法來創建事件流。
- 然后我們有一個無限循環，每隔50ms發送一次事件流。
- 如果客戶端中止連接，我們使用 ob_flush() 和 flush() 來發送事件流。
- 我們使用 sleep() 發送下一個事件之前等待50ms。
- 我們使用 connection_aborted() 來中斷循環，如果客戶端中止了連接。
- 我們使用 CarbonCarbon 類獲取當前日期。
- 我們使用 AppModelsTrade 模型獲取最新交易。這僅用于演示，你可以使用任何你想要的模型。
- 將 Content-Type 標頭設置為 text/event-stream 以告知瀏覽器響應是事件流。
啟用輸出緩沖
為了使上述代碼正常工作，我們需要在你的 PHP.ini 文件中啟用輸出緩沖。 這是通過將以下行添加到 php.ini 文件中完成的：
output_buffering = On
進行此更改后，可能需要重新加載 PHP-FPM 服務。 或者如果你使用的是 apache，則可以重新啟動 Apache。
添加路由
當請求 /stream 路由時，我們想調用 “stream` 方法。
路由將被添加到routes/web.php 文件中，如下所示：
use AppHttpControllersStreamsController;Route::get('/stream', [StreamsController::class, 'stream']);
使用前端的事件流
你可以使用 免費 $100 DigitalOcean 積分 之類的前端框架來處理事件流。 但是對于這個演示，我將使用純 JavaScript。
添加到 blade 模板中的 JavaScript 片段如下所示：
const eventSource = new EventSource('/stream');eventSource.onmessage = function(event) { const data = JSON.parse(event.data); if (data.time) { document.getElementById('time').innerHTML = data.time; } const newElement = document.createElement("li"); const eventList = document.getElementById("list"); newElement.textContent = "message: " + event.data; eventList.appendChild(newElement);}
要查看此操作，你可以嘗試以下演示！【相關推薦：免費 $100 DigitalOcean 積分】
演示項目
如果你想了解事件流是如何工作的，可以查看我創建的演示項目：
演示項目不僅顯示事件流，還具有簡單的前端儀表板，并使用 免費 $100 DigitalOcean 積分 作為流數據庫。
SSE vs WebSockets
事件流很棒且易于使用，但與 免費 $100 DigitalOcean 積分 等其他流協議相比，它也有一些優點和缺點。
例如，SSE 是單向的，這意味著一旦建立連接，服務器只會向客戶端發送數據，而客戶端不能將數據發送回服務器。
與長輪詢不同，使用 WebSockets，你只有一個與服務器的連接，類似于 SSE（服務器發送事件）。 連接是雙工的，這意味著你可以從服務器發送和接收數據。
如果想了解有關 SSE 和 WebSockets 之間差異的更多信息，請觀看 Martin Chaov 的精彩視頻：免費 $100 DigitalOcean 積分
結論
有關事件流的更多信息，請在此處查看 Mozilla 的此文檔：
在那里，你會找到對事件流及其工作方式的更深入的解釋。
有關 Materialise 的更多信息，請在此處觀看此視頻：免費 $100 DigitalOcean 積分
希望你喜歡這個教程！
