Laravel进阶系列笔记--(二十四)Laravel 广播-搭建自己的websockt服务器-5
作者：温新
时间：2021-07-31
hi，我是温新，一名PHPer
本系列采用Laravel8.x演示。
由于Pusher是在国外，连接非常不稳定，因此，来搭建一个属于自己的websockets服务器，体验飞一般的感觉。
使用Laravel-websockets搭建自己的websockets服务器。
第一步：安装
1）删除composer-lock.json文件
2）composer.json文件加入如下内容
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"require"</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"guzzlehttp/psr7"</span>: <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"^1.5"</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>
3）安装
composer install
4）安装
composer require beyondcode/laravel-websockets
第二步：生成相关文件
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">php</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">artisan</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">vendor</span>:<span style="box-sizing: border-box;color: rgb(0, 0, 0)">publish</span> </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 输入1</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">Which</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">provider</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">or</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">tag</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">'s files would you like to publish?:</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[0 ] Publish files from all providers and tags listed below</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[1 ] Provider: BeyondCode\LaravelWebSockets\WebSocketsServiceProvider</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[2 ] Provider: Facade\Ignition\IgnitionServiceProvider</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[3 ] Provider: Fideloper\Proxy\TrustedProxyServiceProvider</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[4 ] Provider: Fruitcake\Cors\CorsServiceProvider</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[5 ] Provider: Illuminate\Foundation\Providers\FoundationServiceProvider</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[6 ] Provider: Illuminate\Mail\MailServiceProvider</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[7 ] Provider: Illuminate\Notifications\NotificationServiceProvider</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[8 ] Provider: Illuminate\Pagination\PaginationServiceProvider</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[9 ] Provider: Laravel\Sail\SailServiceProvider</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[10] Provider: Laravel\Tinker\TinkerServiceProvider</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[11] Tag: config</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[12] Tag: cors</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[13] Tag: flare-config</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[14] Tag: ignition-config</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[15] Tag: laravel-errors</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[16] Tag: laravel-mail</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[17] Tag: laravel-notifications</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[18] Tag: laravel-pagination</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[19] Tag: migrations</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">[20] Tag: sail</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">> 1</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span>
第三步：生成迁移文件
php artisan migrate
第四步：启动服务器
php artisan websocket:serve
启动可以通过域名访问：http://你的域名/laravel-websockets进行访问。
第五步：修改广播配置文件
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// config/broadcasting.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 17, 17)">'pusher'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> [</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'options'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> [</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 新增如下内容</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'host'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'127.0.0.1'</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'port'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">6001</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'scheme'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'http'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> ],</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">],</span>
第六步：修改前端监听websocket服务器
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// resources/js/bootstrap.js</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">window</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">Echo</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">new</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Echo</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">broadcaster</span>: <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'pusher'</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">key</span>: <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'ef8d661555b6fdf9b528'</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">cluster</span>: <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'ap3'</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">wsHost</span>: <span style="box-sizing: border-box;color: rgb(0, 0, 0)">window</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">location</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">hostname</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">wsPort</span>: <span style="box-sizing: border-box;color: rgb(17, 102, 68)">6001</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">forceTLS</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">false</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">disableStats</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">true</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">});</span>
这样就修改成功啦^_^。
由于Pusher在国外，连接非常不稳定，在测试的过程很难确定为什么不成功。对于广播，我折腾了很多天。包括这两天的测试，都遇到了同样的问题，没有任何异常，广播也广播了出去，但是其它客户端就是收不到信息。
对于这次问题的解决，我仍旧不清楚怎么突然就解决了。我只操作如下：
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// Models/Topic.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">public</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">discussions</span>()</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">hasMany</span>(<span style="box-sizing: border-box;color: rgb(0, 0, 0)">Discussion</span>::<span style="box-sizing: border-box;color: rgb(119, 0, 136)">class</span>,<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'topic_id'</span>,<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'id'</span>)<span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">with</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'user'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 将上面的操作改为如下操作：</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">public</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">discussions</span>()</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$this</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">hasMany</span>(<span style="box-sizing: border-box;color: rgb(0, 0, 0)">Discussion</span>::<span style="box-sizing: border-box;color: rgb(119, 0, 136)">class</span>)<span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">with</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'user'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>
当我没有携带后面两个参数时，其它客户端竟然奇迹般的收到了私有广播的信息，在这里我进行了多次测试，又恢复到写好参数的情况，这次同样可以收到消息。
对于这个关联方法，我确定是没有定义错误的，为什么会出现这样的情况，我不太明白。如果你有兴趣，我可以提供源码，大家一起交流，找出问题。
我是温新
每天进步一点点，就一点点
请登录后再评论