一起來實現單使用者登入 —— 完成監聽

前端實時顯示推送訊息

上一節我們已經實現了訊息的推送，現在需要前端來實時接收並顯示給使用者，本節也是教程的最後一節，馬上就要完成了，加油。

我們開始吧！

安裝依賴

前端依賴元件： laravel-echo，pusher-js
執行命令：

npm install laravel-echo pusher-js --save

編寫元件

我們來編寫一個提示框，用來提醒使用者
在 resources/js/components 資料夾新建一個 OutmanAlert.vue

<template>
    <div class="container" v-if="alerting">
        <div class="col-md-8">
            <div class="alert alert-danger" role="alert">
                您的賬號已在別處登入！
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            alerting: true // 通過 alerting 變數來控制元件顯示隱藏
        }
    },
    mounted() {
        console.log('Component mounted.')
    }
}
</script>

將這個元件註冊，開啟 resources/js/app.js

window.Vue = require('vue').default;

...

Vue.component('outman-alert', require('./components/OutmanAlert.vue').default);

引用這個元件，開啟 resources/views/layouts/app.blade.php

<main class="py-4">
    <outman-alert></outman-alert>
    @yield('content')
</main>

先來編譯一下，看看顯示是否正常

npm run watch

新增前端監聽

元件已經正常工作了，下面我們來新增監聽。
首先開啟 .env 檔案，更改 BROADCAST_DRIVER

... 
DB_PASSWORD=

BROADCAST_DRIVER=pusher
...

接著開啟 resources/js/bootstrap.js，開啟底部的註釋

import Echo from 'laravel-echo';

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '321321', // 此處與 .env PUSHER_APP_KEY 相同
    wsHost: window.location.hostname,
    wsPort: 6001,
    forceTLS: false,
    disableStats: true,
});

最後回到 OutmanAlert.vue 元件，新增事件監聽

<script>
export default {
    props: [
        'id'
    ],
    data() {
        return {
            alerting: false
        }
    },
    mounted() {
        window.Echo.channel('outman-user-' + this.id).listen('UserAuthenticatedEvent', () => {
            this.alerting = true
            setTimeout(() => {
                window.location = '/login'
            }, 3000)
        })
    }
}
</script>

在元件載入後，監聽 outman-user-user_id 頻道，如果有訊息傳送過來，把 alerting 變數修改為 true，並等待 3 秒後跳轉登入地址。
但是 vue 沒辦法讀取到 user_id，我們需要在 blade 模板中傳遞給它。

回到引用它的檔案 resources/views/layout/app.blade.php

<main class="py-4">
    @if(auth()->check())
        <outman-alert id="{{auth()->id()}}"></outman-alert>
    @endif
    @yield('content')
</main>

至此，所有功能已經完成了，執行編譯

npm run dev

如果遇到以下錯誤無須理會，pusher 的自檢，但是我們已經將它的訊息轉發給本地的 websocket 服務了。

Notifications are disabled
Reason: DisabledForApplication Please make sure that the app id is set correctly.
Command Line: d:\laragon\www\single-user-login\node_modules\node-notifier\vendor\snoreToast\snoretoast-x64.exe -appID "Laravel Mix" -pipeName \\.\pipe\notifierPipe-a7662603-67a6-45de-9ef2-aa40181d3f1a -p d:\laragon\www\single-user-login\node_modules\laravel-mix\icons\laravel.png -m "Build successful" -t "Laravel Mix"

開啟瀏覽器測試一下：

至此，單使用者登入功能就全部完成了，原始碼地址

第一次寫這種教程，有不足之處還請指出，後續我還會繼續寫一篇 websocket 通訊進階教程，歡迎關注。

最後感謝 Codinget 老師 這是他的原創，我只是學習記錄。

大家可以關注他的：
B站：space.bilibili.com/108698873
網站: www.coding10.com/
公眾號：Coding10

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