從 0 開始打造聊天室，搞定 Laravel 實時通訊 —— 配置與繫結

資料繫結

開啟 routes/web.php，註冊話題路由

Route::get('/topics', [\App\Http\Controllers\TopicController::class, 'index']);
Route::get('/topics/{topic}', [\App\Http\Controllers\TopicController::class, 'show']);

開啟 TopicController

public function show(Topic $topic)
{
    $topic->load('discussions'); // 載入 discussions 模型關係
    return view('topics.show', compact('topic'));
}

建立 blade 模板

我們要將 topics.show 路由返回的 topics 傳遞到 Topic.vue 元件。

新建檔案

touch resources/topics/show.blade.php

向 VUE 元件傳遞資料

@extends('layouts.app')
@section('content')
  <topic :topic="{{  $topic }}"></topic> // 為元件定義 topic 屬性
@endsection

建立前端元件

刪除 resources/js/components/ExampleComponent.js

新建 Topic.vue 前端 JS 檔案。

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <h3>{{topic.name}}</h3>
                <div v-for="discussion in this.discussions">
                    <h4> {{ discussion.user.name }} </h4>
                    <p>{{ discussion.body }}</p>
                </div>
                <hr>
                // 繫結 create() 函式，提交表單時觸發
                <form action="#" @submit.prevent="create">
                    <textarea name="30" cols="10" rows="5" v-model="talking" class="form-control"></textarea>
                    <button type="submit" class="btn btn-danger float-end mt-2">釋出</button>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['topic'],
        data(){
            return {
                discussions : this.topic.discussions,
                talking : '',
            }
        },
        methods : {
            create(){
                console.log(this.talking)
                this.talking = ''  // 每次觸發 create 之後，清空文字框輸入的值
            }
        }
    }
</script>

註冊元件 resources/js/app.js

Vue.component('topic', require('./components/Topic.vue').default);

程式碼量有點多，請仔細閱讀註釋。

現在開啟 your-project/topics/1 應該可以看到資料了

---

配置實時通訊

我們前面的準備工作已經做好了，現在來為我們的專案新增實時通訊的功能

首先開啟 .env，我們來配置一下 pusher

...  
DB_PASSWORD=
BROADCAST_DRIVER=pusher // 廣播驅動改為 Pusher

PUSHER_APP_ID=123123
PUSHER_APP_KEY=321321
PUSHER_APP_SECRET=secret
PUSHER_APP_CLUSTER=mt1

隨意填寫即可，Laravel 框架預設整合了 Pusher 三方服務，我們要使用 Laravel-websocket 把 Pusher 的三方服務轉發到我們本地的伺服器來處理。

安裝 composer 元件

開啟 composer.json

"require": {
        ...
        "guzzlehttp/psr7": "^1.5",
        "beyondcode/laravel-websockets": "^1.12.0",
        "pusher/pusher-php-server": "~3.0"
    },

執行

composer update

釋出 laravel-websockets

php artisan vendor:publish 

在列表裡選擇 BeyondCode\LaravelWebSockets\WebSocketsServiceProvider 對應的序號。

配置 Websocket

關於 websockets 的配置，可以在 config/websockets.php 裡找到
官方文件：點選這裡
你只需要知道它在哪裡即可，我們沒有需要定製的配置。

然後開啟 config/broadcasting.php，修改 pusher 傳送的請求地址為我們本地 ip 地址。

'connections' => [ 
        'pusher' => [
            ...
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'encrypted' => true,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http'
            ],
        ],

好了，元件安裝完成，執行命令啟動 websocket 服務

php artisan migrate // 先執行遷移
php artisan websockets:serve

開啟 your-project/laravel-websockets 可以看到控制檯，點選 Connect 可以看到所有的傳送訊息明細。

配置 Laravel-echo

開啟 resources/js/bootstrap.js

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    wsPort: 6001, // 保證與 Laravel-websocket 的監聽埠一致
    forceTLS: false,
    disableStats: true,
});

到此就差不多了，下一節我們來開始實現傳送實時訊息。

本作品採用《CC 協議》，轉載必須註明作者和本文連結