The front end displays push messages in real time

In the previous section, we have implemented message push. Now we need the front end to receive and display messages to users in real time. This section is also the last section of the tutorial. It will be completed soon. Come on.

Let's start.

Installation dependency

Front end dependent components: laravel echo, pusher JS
Execute command:

npm install laravel-echo pusher-js --save

Write component

Let's write a prompt box to remind users
Create a new outmanalert in the resources/js/components folder vue

<template>
    <div class="container" v-if="alerting">
        <div class="col-md-8">
            <div class="alert alert-danger" role="alert">
                Your account has been logged in elsewhere!
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            alerting: true // Control the display and hiding of components through the alerting variable
        }
    },
    mounted() {
        console.log('Component mounted.')
    }
}
</script>

Register this component and open resources / JS / APP js

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

...

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

Refer to this component and open resources / views / layouts / APP blade. php

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

First compile it to see if the display is normal

npm run watch

Add front-end listening

The component has been working normally. Let's add listening.
Open it first env file, changing BROADCAST_DRIVER

... 
DB_PASSWORD=

BROADCAST_DRIVER=pusher
...

Then open resources / JS / bootstrap JS, open the comment at the bottom

import Echo from 'laravel-echo';

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '321321', // Here and env PUSHER_ APP_ Same key
    wsHost: window.location.hostname,
    wsPort: 6001,
    forceTLS: false,
    disableStats: true,
});

Finally, back to outmanalert Vue component, add event listening

<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>

After the component is loaded, listen for outman user user_ ID channel. If a message is sent, change the alerting variable to true and wait for 3 seconds to jump to the login address.
But vue can't read user_id, we need to pass it in the blade template.

Go back to the file resources / views / layout / APP blade. php

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

At this point, all functions have been completed and compilation is performed

npm run dev

If you encounter the following errors, ignore pusher's self-test, but we have forwarded its message to the local websocket service.

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"

Open the browser to test:

So far, the single user login function has been completed. This is the first time to write this tutorial. Please point out the shortcomings. In the future, I will continue to write an advanced tutorial on websocket communication. Welcome to pay attention.

Finally, thank Mr. Codinget This is his original. I'm just learning records.

You can pay attention to his:
Station B: space.bilibili.com/108698873
Website: www.coding10.com/
Official account: Coding10