1.我laravel-websockets 的開發環境
- Laravel 9.0
- Laravel WebSockets?（最新版）
- Laravel Vite
2. 安裝服務器端包 beyondcode/laravel-websockets
- 運行以下命令安裝laravel-websockets
composer require beyondcode/laravel-websockets- 安裝完后，發布 Laravel WebSockets 的配置文件
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"- ?發布遷移文件
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"- 運行遷移以創建數據庫表?
php artisan migrate?若安裝失敗，試試更新所有第三方庫：composer update
?3.安裝pusher
composer require pusher/pusher-php-server?4.配置 .env 文件，根據你自身情況填寫。
PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1?此外，還需將 .env 文件中 ，BROADCAST_DRIVER 的值改為 pusher
BROADCAST_DRIVER=pusher?5.開始創建通知事件，運行以下命令
php artisan make:event SimpleNoticeMessage?具體代碼如下：
<?phpnamespace App\Events;use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;class SimpleNoticeMessage implements ShouldBroadcast
{use Dispatchable, InteractsWithSockets, SerializesModels;public $message;/*** Create a new event instance.** @return void*/public function __construct($message){$this->message = $message;}/*** 獲取事件應廣播的頻道.* 頻道應該是 Channel、PrivateChannel 或 PresenceChannel 的實例。 Channel 的實例代表任何用戶都可以訂閱的公共頻道，而 PrivateChannels 和 PresenceChannels 代表需要 頻道授權 的私人頻道：* 我的理解就是需要發送給誰** @return \Illuminate\Broadcasting\Channel|array*/public function broadcastOn(){return new Channel('test');}/*** 事件的廣播名稱。（事件名稱）* 可選* 如果沒定義事件名稱，則在客戶端監聽事件的時候填寫的是 類名，即SimpleNoticeMessage* 如果定義了 則未 .server.admin.notice，注意最前面有個 .* @return string*/public function broadcastAs(){return 'server.test.notice';}
}
6.客戶端安裝?laravel-echo
npm install --save-dev laravel-echo pusher-js- 配置?resources\js\bootstrap.js 文件，在創建laravel 文件時有，取消注釋就行，代碼如下
import Echo from 'laravel-echo';import Pusher from 'pusher-js';
window.Pusher = Pusher;window.Echo = new Echo({broadcaster: 'pusher',key: import.meta.env.VITE_PUSHER_APP_KEY,cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',enabledTransports: ['ws', 'wss'],
});
- ?頁面腳本配置，在 resources\views\index.blade.php? 文件 的 head 標簽的結尾添加以下代碼
@vite('resources/js/app.js')
<script>window.onload = function(){Echo.channel('test').listen('.server.test.notice', (e) => {console.log(e.message);});}</script>?7.發送消息，新建控制器 testCl
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Events\SimpleNoticeMessage;class testCl extends Controller{public function sendMsg(Request $request){SimpleNoticeMessage::dispatch("hello world");return "發送成功";}
}?8.啟動項目，為以下命令各開一個終端運行
- php artisan serve? ?啟動laravel 項目
- npm run dev 啟動vite
- php artisan queue:work 啟動隊列
- php artisan websockets:serve 啟動websockets 服務器
?9.結束。
- 在頁面訪問?testCl 控制器空的sendMsg 方法，即可。
- 內部測試，新建一個終端窗口。運行?php artisan tinker ，在窗口中 輸入?event (new \App\Events\SimpleNoticeMessage('hello world')) ，回車有，即可在前端控制中打印出 hellow world
- 調試面板，運行： 127.0.0.1:8000/laravel-websockets ，也可查看出的消息
)
