付费课程, 订阅后即可观看
单人登录 - 搭建websocket服务器,为网站添加实时通信的能力
本期Laravel视频教程我们安装一下websocket服务器,为网站添加实时通信的能力,我们为用户登录事件添加广播的功能,这样的话当用户登出时候,就可以实时收到后台发送过来的消息,用户就知道自己的账号是否除了问题,我们使用vue创建一个警告通知框
微信扫码登录
![](https://www.coding10.com/images/auth/default.png)
本期Laravel视频教程我们安装一下websocket服务器,为网站添加实时通信的能力,我们为用户登录事件添加广播的功能,这样的话当用户登出时候,就可以实时收到后台发送过来的消息,用户就知道自己的账号是否除了问题,我们使用vue创建一个警告通知框
广播事件的时候呢,应该把 toOthers() 加上,这样就只会通知到其他的人
这里有个比较重要的点,老师没有讲到,也可能是年头比较久远了,当时还不需要这样做。 我的框架版本是 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' ], ], ```
非常好的补充,的确是时间有些久了,世界已经变了,我下来也去实验一下新版本
我用的是 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 报这个错:
使用 Echo.listen 报这个错:
我的 home.balde.php 的 Js 代码如下:
然后网上搜索了一下,问题在 script 标签需要增加 type="module" 属性,加上后就可以了,window.Echo.listen 和 Echo.listen 都不报错。参考地址: https://laracasts.com/discuss/channels/laravel/uncaught-referenceerror-echo-is-not-defined
4. 搜了搜 script 的 type="module" 的作用: https://juejin.cn/s/script%20type%20module
再结合看了看 Laravel 的 resources/js/bootstrap.js 的内容,似乎是理解了一些: