单人登录 - 搭建websocket服务器，为网站添加实时通信的能力

广播事件的时候呢，应该把 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 的内容，似乎是理解了一些：