使用laravel-websockets 構建實時應用(一)

91hero發表於2021-02-11
LaravelWeb

在學習laravel+websocket的時候經常會遇到下面幾個術語

  • 廣播(broadcast)
  • laravel-echo
  • laravel-echo-server
  • laravel-websockets
  • pusher
  • socket.io

剛開始有點懵逼 、我就只想用個websocket功能為啥這麼麻煩..

技術選型

後端選擇 laravel-websockets
前端選擇 laravel-echo

(後端)安裝和配置laravel-weboskcets

1.安裝擴充套件包

composer require beyondcode/laravel-websockets

2.釋出擴充套件包配置檔案及遷移檔案

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"

3.執行資料庫遷移檔案

php artisan migrate

4.釋出laravel-websockets配置檔案

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

5.安裝pusher的php擴充套件包(laravel-websockets的api完全相容pusher,這裡需要安裝)

composer require pusher/pusher-php-server "~3.0"

6.修改.env檔案中廣播程式的驅動為pusher

BROADCAST_DRIVER=pusher

7.設定config/broadcasting.php中pusher配置

  • 預設情況下,Laravel應用程式廣播到WebSocket伺服器時，是將事件資訊傳送到官方Pusher伺服器。但是由於Laravel WebSockets包附帶了自己的Pusher API實現，因此我們需要告訴Laravel將事件傳送到我們自己的伺服器。
          'pusher' => [
          'driver' => 'pusher',
          'key' => env('PUSHER_APP_KEY'),
          'secret' => env('PUSHER_APP_SECRET'),
          'app_id' => env('PUSHER_APP_ID'),
          'options' => [
              'cluster' => env('PUSHER_APP_CLUSTER'),
              'encrypted' => true,
              'host' => '127.0.0.1',
              'port' => 6001,
              'scheme' => 'http'
          ],
      ],

8.配置websockets應用config/websockets.php

  • 一般情況下預設即可

前端laravel-echo配置使用

  • 安裝laravel-echo和pusher-js依賴
    yarn add laravel-echo
yarn add pusher-js
  • 新建laravel-echo-setup.js檔案
    import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
  broadcaster: 'pusher',
  key: 'abc123', // 這裡隨便填，跟.env檔案裡面一致即可
  wsHost: window.location.hostname,
  wsPort: 6001,
  forceTLS: false,
  disableStats: true,
})
  • main.js中引入laravel-echo-setup.js
    import '@/helpers/laravel-echo-setup'
  • 讓前端專案跑起來
    yarn serve
  • 開啟websocket服務
    php artisan websockets:serve
  • 在chrome除錯工具裡面看ws日誌
    使用laravel-websockets 構建實時應用(一)
  • 檢視laravel-websockets 日誌

使用laravel-websockets 構建實時應用(一)

  • 至此,前端使用laravel-echo跟後端laravel-websockets已經互通了.
  • 下一篇文章介紹廣播
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章