1.我laravel-websockets 的开发环境
- Laravel 9.0
- Laravel WebSockets （最新版）
- Laravel Vite
2. 安装服务器端包 beyondcode/laravel-websockets
- 运行以下命令安装laravel-websockets
composer require beyondcode/laravel-websockets- 安装完后，发布 Laravel WebSockets 的配置文件
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"- 发布迁移文件
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"- 运行迁移以创建数据库表
php artisan migrate若安装失败，试试更新所有第三方库：composer update
3.安装pusher
composer require pusher/pusher-php-server4.配置 .env 文件，根据你自身情况填写。
PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1
此外，还需将 .env 文件中 ，BROADCAST_DRIVER 的值改为 pusher
BROADCAST_DRIVER=pusher5.开始创建通知事件，运行以下命令
php artisan make:event SimpleNoticeMessage具体代码如下：
<?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 SimpleNoticeMessage implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct($message)
{
$this->message = $message;
}
/**
* 获取事件应广播的频道.
* 频道应该是 Channel、PrivateChannel 或 PresenceChannel 的实例。 Channel 的实例代表任何用户都可以订阅的公共频道，而 PrivateChannels 和 PresenceChannels 代表需要 频道授权 的私人频道：
* 我的理解就是需要发送给谁
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new Channel('test');
}
/**
* 事件的广播名称。（事件名称）
* 可选
* 如果没定义事件名称，则在客户端监听事件的时候填写的是 类名，即SimpleNoticeMessage
* 如果定义了 则未 .server.admin.notice，注意最前面有个 .
* @return string
*/
public function broadcastAs()
{
return 'server.test.notice';
}
}
6.客户端安装 laravel-echo
npm install --save-dev laravel-echo pusher-js- 配置 resources\js\bootstrap.js 文件，在创建laravel 文件时有，取消注释就行，代码如下
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,
cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
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'],
});
- 页面脚本配置，在 resources\views\index.blade.php 文件 的 head 标签的结尾添加以下代码
@vite('resources/js/app.js')
<script>
window.onload = function(){
Echo.channel('test').listen('.server.test.notice', (e) => {
console.log(e.message);
});
}
</script>7.发送消息，新建控制器 testCl
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Events\SimpleNoticeMessage;
class testCl extends Controller{
public function sendMsg(Request $request){
SimpleNoticeMessage::dispatch("hello world");
return "发送成功";
}
}
8.启动项目，为以下命令各开一个终端运行
- php artisan serve 启动laravel 项目
- npm run dev 启动vite
- php artisan queue:work 启动队列
- php artisan websockets:serve 启动websockets 服务器
9.结束。
- 在页面访问 testCl 控制器空的sendMsg 方法，即可。
- 内部测试，新建一个终端窗口。运行 php artisan tinker ，在窗口中 输入 event (new \App\Events\SimpleNoticeMessage('hello world')) ，回车有，即可在前端控制中打印出 hellow world
- 调试面板，运行： 127.0.0.1:8000/laravel-websockets ，也可查看出的消息
