付费课程, 订阅后即可观看

Laravel 单人登录

6 集视频
33分钟

本期Laravel视频教程我们安装一下websocket服务器,为网站添加实时通信的能力,我们为用户登录事件添加广播的功能,这样的话当用户登出时候,就可以实时收到后台发送过来的消息,用户就知道自己的账号是否除了问题,我们使用vue创建一个警告通知框

国营 2019.08.23 01:13

广播事件的时候呢,应该把 toOthers() 加上,这样就只会通知到其他的人

MArtian 2021.12.13 13:48

这里有个比较重要的点,老师没有讲到,也可能是年头比较久远了,当时还不需要这样做。 我的框架版本是 8.6,Laravel 已经将 pusher 作为默认的消息推送。 这里需要注意的有 2 点:

1. laravel-websocket 包的兼容问题, Laravel 8 默认集成的 pusher 版本是5.0,但是 laravel-socket 的最新版本以然停留在 1.12,虽然开发团队依然在维护,不过都是测试版,至今还没有一个兼容 pusher 5.0 以上的版本,所以需要将 pusher 降级到 3.0,laravel-websocket 还依赖 guzzlehttp/psr7,不过版本只兼容到 1.5,所以我们也需要降级。 ``` "guzzlehttp/psr7": "^1.5", "beyondcode/laravel-websockets": "^1.12.0", "pusher/pusher-php-server": "~3.0" ``` 直接把这个粘贴到 composer.json 文件,然后执行

``` composer update ```

2. 需要配置一下 config/broadcasting.php 文件,将 websockets 通信转发到我们自己的服务器,否则默认请求的是 pusher 的接口

``` 'pusher' => [ 'driver' => 'pusher', 'key' => env('PUSHER_APP_KEY'), 'secret' => env('PUSHER_APP_SECRET'), 'app_id' => env('PUSHER_APP_ID'), 'options' => [ 'cluster' => env('PUSHER_APP_CLUSTER'), 'encrypted' => true, 'host' => '127.0.0.1', 'port' => 6001, 'scheme' => 'http' ], ], ```

国营 2021.12.14 01:17

非常好的补充,的确是时间有些久了,世界已经变了,我下来也去实验一下新版本

向前 2024.01.11 06:41

我用的是 Laravel 10.38.2 的版本:PHP8.2的,出了很多的小问题:


1. 首先是安装:下面这个命令会报错,还是 php 版本的问题:

composer require beyondcode/laravel-websockets

需要修改为:(自己解决依赖冲突)

composer require beyondcode/laravel-websockets -W


2. 现在编译使用的是 Vite ,之前的是 Laravel Mix ,这个不影响,.env 文件中, VITE_PUSHER_* 相关的配置,还是基于 PUSHER_* 的


3. 然后就是我使用的是 Blade 模版,基于 Bootstrap 的 Laravel UI 登录脚手架,视频上用的是 Vue 的。

前端 Echo 监听代码如下,使用 window.Echo.listen 报这个错:

Coding10

使用  Echo.listen 报这个错:

CODING10

我的 home.balde.php 的 Js 代码如下:

CODING10

然后网上搜索了一下,问题在 script 标签需要增加  type="module" 属性,加上后就可以了,window.Echo.listen 和 Echo.listen 都不报错。参考地址: https://laracasts.com/discuss/channels/laravel/uncaught-referenceerror-echo-is-not-defined 

CODING10


4. 搜了搜 script 的 type="module" 的作用: https://juejin.cn/s/script%20type%20module 

Coding10

再结合看了看 Laravel 的 resources/js/bootstrap.js 的内容,似乎是理解了一些:

Coding10

首先 bootstrap.js 是通过 import 这种方式导入进来的,符合上面所说的模块之间的组合和复用。
然后 type="module" 自动支持异步加载,(仔细想了想,这个不是问题的作用点😅)

微信扫码登录