一起来实现单用户登录 —— 完成监听

一起来实现单用户登录 —— 完成监听

前端实时显示推送消息

上一节我们已经实现了消息的推送,现在需要前端来实时接收并显示给用户,本节也是教程的最后一节,马上就要完成了,加油。

我们开始吧!


安装依赖

前端依赖组件: laravel-echopusher-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

一起来实现单用户登录4


添加前端监听

组件已经正常工作了,下面我们来添加监听。
首先打开 .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: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    wsPort: 6001,
    forceTLS: false,
    disableStats: true,
});

process.env 可以直接读取到 .env 文件中的配置,最后回到 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"

打开浏览器测试一下:

一起来实现单用户登录4

至此,单用户登录功能就全部完成了,源码地址

第一次写这种教程,有不足之处还请指出,后续我还会继续写一篇 websocket 通信进阶教程,欢迎关注。


最后感谢 Codinget 老师 :sparkling_heart: 这是他的原创,我只是学习记录。

大家可以关注他的:
B站:space.bilibili.com/108698873
网站: www.coding10.com/
公众号:Coding10

本作品采用《CC 协议》,转载必须注明作者和本文链接
悲观者永远正确,乐观者永远前行。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 12

感谢分享,我去练习下 :see_no_evil: :+1:

2年前 评论
MArtian (楼主) 2年前
win (作者) 2年前
win (作者) 2年前
MArtian (楼主) 2年前
自由与温暖是遥不可及的梦想

单设备登录 有很好的案例了 已经

2年前 评论
MArtian (楼主) 2年前

请问如果是api 使用jwt token登录的 怎么实现呢

2年前 评论
MArtian (楼主) 2年前
QIN秦同学 2年前

给你推荐北风大佬的课程:
space.bilibili.com/1154479442/chan...

2年前 评论

万分感谢,对于我这种想学双向通信的新手来说太友好了!

11个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!