這裡範例是利用主機當socket

不想設定主機參數可以使用 pusher

修改env 

# .env
BROADCAST_DRIVER=pusher
PUSHER_APP_ID={PUSHER_APP_ID}
PUSHER_APP_KEY={PUSHER_APP_KEY}
PUSHER_APP_SECRET={PUSHER_APP_SECRET}

修改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
});

安裝套件

composer install
php artisan migrate
npm install
npm run dev

啟動websocket(預設port:6001)

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

範例畫面

github範本 :

 https://github.com/cc711612/chat_room

範本 :

 https://chat.usongrat.tw

參考文獻:

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

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