一起来实现单用户登录 —— 完成监听
前端实时显示推送消息
上一节我们已经实现了消息的推送,现在需要前端来实时接收并显示给用户,本节也是教程的最后一节,马上就要完成了,加油。
我们开始吧!
安装依赖
前端依赖组件: 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: 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"
打开浏览器测试一下:
至此,单用户登录功能就全部完成了,源码地址
第一次写这种教程,有不足之处还请指出,后续我还会继续写一篇 websocket 通信进阶教程,欢迎关注。
最后感谢 Codinget 老师 这是他的原创,我只是学习记录。
大家可以关注他的:
B站:space.bilibili.com/108698873
网站: www.coding10.com/
公众号:Coding10
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: