怎么使用laravel-websockets实现广播系统
本篇内容介绍了“怎么使用laravel-websockets实现广播系统”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创建项目
在 Apache24\htdocs 或者类似的地方运行下面的命令：
composer create-project laravel/laravel bc
在项目路径中运行以下命令：
php artisan serve
注意运行完上面的命令当前命令行窗口一般就不能运行命令了，需要重启一个命令行窗口。想要在继续在当前命令行窗口运行命令除非配合后台运行的命令。
配置数据库信息
在配置数据库之前需要创建一个数据库，我用的是 test。不过就算不创建在 migrate 的时候也会提示创建。这个差点就忘了，因为之前一直没有删除这个数据库。
.env
DB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306DB_DATABASE=testDB_USERNAME=rootDB_PASSWORD=1234
注意要填你的数据库的实际的信息，别照抄我的配置。
安装服务器端包 beyondcode/laravel-websockets
在项目路径中运行以下命令：
composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"php artisan migrate
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"
安装 pusher
在项目路径中运行以下命令：
composer require pusher/pusher-php-server
配置 Laravel WebSockets
.env
BROADCAST_DRIVER=pusherPUSHER_APP_ID=12345PUSHER_APP_KEY=ABCDEFGPUSHER_APP_SECRET=HIJKLMNOPPUSHER_HOST=127.0.0.1PUSHER_PORT=6001PUSHER_SCHEME=httpPUSHER_APP_CLUSTER=mt1
运行 Laravel WebSockets 服务器
在项目路径中运行以下命令：
php artisan websockets:serve
这个也是运行之后当前命令行窗口就不能输入命令了。
之后在浏览器地址栏输入 127.0.0.1:8000/laravel-websockets 就能看前面的操作是否成功了。如果你不是通过“php artisan serve”运行的服务器的话可能端口会不一样。点击那个 Connect 按钮如果在 Events 下面出现一些东西应该就是阶段性成功了。注意这个网页在没那个啥的情况下打开是非常慢的，至少在我这里很慢。因为里面有个 js 库的下载速度很慢。注意下面的改 blade 模板的行为是可选的！另外我不知道下面的那个 cdn 有没有问题，毕竟好像不是大厂的 cdn。如果你嫌慢又不想那个啥的话可以将 vendor\beyondcode\laravel-websockets\resources\views\dashboard.blade.php 中的
<script src="https://www.yisu.com/link/19e0c9edc141240b5de750fa83ba1bed"></script>
换成
<script src="https://cdn.bootcdn.net/ajax/libs/plotly.js/2.17.0/plotly.min.js"></script>
我是通过用 VS Code 搜索功能直接搜索 cdn.plot.ly/plotly-latest.min.js 搜出来这个文件的。另外是在火狐的开发者工具的网络中发现这个 js 库加载速度慢的。另外这种直接改这种地方的文件应该是不太优雅。
创建事件
在项目路径中运行以下命令：
php artisan make:event NewTrade
app\Events\NewTrade.php
<?php
namespace App\Events;use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class NewTrade implements ShouldBroadcast{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $trade;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct($trade)
{
$this->trade = $trade;
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new Channel('trades');
}}
在项目路径中运行以下命令：
php artisan tinker
运行这条命令后会启动 Laravel 的交互式解释器，我理解就是输入一些语句可以直接执行。另外还有一些其他的实用的命令。这个也是运行之后当前命令行窗口就不能输入正常的系统命令了，但是这个命令行窗口之后要输入 php 语句。顺便说一下，VS Code 里的终端在 tinker 里没法 Ctrl + V，但是右键是粘贴的功能。
然后在上面的执行过 php artisan tinker 的那个命令行窗口运行以下命令：
event (new \App\Events\NewTrade('test'))
之后就能在上面提到的那个 127.0.0.1:8000/laravel-websockets 页面看到发出的消息了。能看到的话就说明阶段性成功了。
安装客户端包 laravel-echo
在项目路径中运行以下命令：
npm installnpm install --save-dev laravel-echo pusher-js
resources\js\bootstrap.js
import Echo from 'laravel-echo';import Pusher from 'pusher-js';window.Pusher = Pusher;window.Echo = new Echo({
broadcaster: 'pusher',
key: import.meta.env.VITE_PUSHER_APP_KEY,
wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
enabledTransports: ['ws', 'wss'],
cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,});
注意这里只是取消注释了那个文件中的那些东西，并在结尾添加了一行“cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,”。
在项目路径中运行以下命令：
npm run dev
这个也是运行之后当前命令行窗口就不能输入命令了。
添加客户端脚本
在文件
resources\views\welcome.blade.php
的 head 标签的结尾添加以下代码：
@vite('resources/js/app.js') <script>
window.onload = function(){
Echo.channel('trades')
.listen('NewTrade', (e) => {
console.log(e.trade);
});
};
</script>
</head>
注意这里改了两处，一个是导入 app.js 的方法换了。另外套了一层 window.onload。
然后在浏览器的地址栏输入 127.0.0.1:8000/ 启动开发者工具并切换到控制台标签页。然后再在前面运行过 php artisan tinker 的那个命令行窗口中执行以下命令：
event (new \App\Events\NewTrade('test'))
最后切换到前面提到的开发者工具中的控制台标签页，应该能看到一条“test”消息。能看到就说明最终成功了。
“怎么使用laravel-websockets实现广播系统”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注蜗牛博客网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论