我laravel-echo
用来收听我的 laravel WebSocket 频道。
我将此添加到我的app.js
:
import Echo from 'laravel-echo'
/*..........*/
window.Pusher = require('pusher-js')
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'appKey',
wsHost: window.location.hostname,
wsPort: 6001,
forceTLS: false,
disableStats: true
})
我有一个名为WebsocketMeasurements
:
<?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;
Use App\Measurement;
class WebsocketMeasurements implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $measurement;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct(Measurement $measurement)
{
$this->measurement = $measurement;
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new Channel ('measurement.created');
}
}
我将此添加到我的dashboard.vue
文件中:
mounted () {
window.Echo.channel('measurement.created').listen('WebsocketMeasurements', (e) => {
console.log(e)
})
},
当我尝试在 /laravel-websockets 触发测试事件时,没有任何反应。我填写以下数据: Channel: measurement.created
Event: WebsocketMeasurements`` Data:
{"data": null}`
我期望发生的是{"data": null}
在控制台中接收,但那里没有任何记录。
通风口确实作为 api 消息显示在 laravel-websockets 的事件列表中,其中包含以下详细信息:
Channel: measurement.created, Event: WebsocketMeasurements
我还尝试在我的仪表板 vue 中创建Channel
一个PrivateChannel
并更改window.Echo.channel
为window.Echo.private
,这导致链接 /broadcaster/auth 出现 403 错误。
在开始之前,我在终端中执行了以下命令:
php artisan serve
npm run hot
php artisan queue:work
php artisan websockets:serve
php artisan queue:listen
我也尝试运行npm run watch
而不是热运行,这没有帮助。