本篇介紹如何在 Laravel 框架中，利用Websocket抓取在線人數。

# 新增Project
laravel new {project}

修改env

# .env
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=online
PUSHER_APP_KEY=online
PUSHER_APP_SECRET=onlineonline

修改bootstarp.js

# /resources/js/bootstarp.js
import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
 broadcaster: 'pusher',
 encrypted: false,
 key: process.env.MIX_PUSHER_APP_KEY,
 cluster: process.env.MIX_PUSHER_APP_CLUSTER,
 wsHost: window.location.hostname,
 wsPort: 6001,
 forceTLS: false,
 disableStats: true
});

安裝套件

# cmd(安裝套件)
npm install
composer install
composer require pusher/pusher-php-server ^4.1
npm install --save laravel-echo pusher-js 
composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"
php artisan migrate
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

新增一個Middleware

因為會使用到Presence頻道，但它是屬於私人頻道，需要被授權才能連上。

於是我們建立一個Guest的Middleware去做認證。

amespace App\Http\Middleware;

use Closure;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Str;

class AuthenticateGuest
{
 /**
 * Handle an incoming request.
 *
 * @param \Illuminate\Http\Request $request
 * @param \Closure $next
 * @return mixed
 */
 public function handle(Request $request, Closure $next)
 {
 $fakeUser = new User();
 $fakeUser->virtual_client = true;
 $fakeUser->id = rand(100,1000);
 $fakeUser->name = Str::random('10');

 $request->merge(['user' => $fakeUser]);
 $request->setUserResolver(function () use ($fakeUser) {
 return $fakeUser;
 });
 return $next($request);
 }
}

修改Provider

channel的middleware在這邊設定成剛剛建立的authenticate-guest

# BroadcastServiceProvider
public function boot()
{
 Broadcast::routes(['middleware' => ['authenticate-guest']]);

 require base_path('routes/channels.php');
}

Kernel.php也要記得新增剛剛建立的authenticate-guest

# Kernel
 protected $routeMiddleware = [
 'auth' => \App\Http\Middleware\Authenticate::class,
 'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
 'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
 'can' => \Illuminate\Auth\Middleware\Authorize::class,
 'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
 'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
 'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
 'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
 'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
 'authenticate-guest' => \App\Http\Middleware\AuthenticateGuest::class,
];

啟動websocket(預設port:6001)

# 預設port:6001
php artisan websockets:serve
//php artisan websockets:serve --port=6001

範例畫面

github範本 :

https://github.com/cc711612/Online

範本 :

https://online.usongrat.tw/

參考文獻:

https://beyondco.de/docs/laravel-websockets/getting-started/introduction

https://learnku.com/docs/laravel/8.x/broadcasting/9388#presence-channels