我在我的Web应用程序中使用Pusher。我的后端是用Laravel构建的
这是我的广播节目
class DrawOptionsChanged implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $options;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct($options)
{
$this->options = $options;
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new Channel('draw_options');
}
}
使用以下代码调用此函数:
event(new DrawOptionsChanged($data));
一切都在我的本地机器完美工作。但是在服务器中,客户端和laravel-webSocket url正在连接,但是在其中任何一个都没有接收到事件。
在broadcasting.php
'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'),
'useTLS' => false,
'encrypted' => false,
// 'host' => '162.214.125.121',
'host' => '127.0.0.1',
'port' => 6001,
'scheme' => 'http'
],
],
我注意到,事件正在通过websocket url进行广播,客户端也收到了。。。但从代码上看,他们不会被广播。。。在本地机器中,一切都能正常工作。。。
http://api.etakweet.com/laravel-websockets
客户端连接代码
this.pusher = new Pusher(environment.pusher.key, {
cluster: environment.pusher.cluster,
wsHost: '162.214.125.121',
// wsHost: '127.0.0.1',
wsPort: 6001,
encrypted: false,
forceTLS: false,
});
this.channel = this.pusher.subscribe('draw_options');
Pusher.log = (msg) => {
console.log(msg);
};
客户端绑定代码
this.pusherService.channel.bind('pusher:subscription_succeeded', function(members) {
console.log('successfully subscribed!');
});
this.pusherService.channel.bind('App\\Events\\DrawOptionsChanged', res => {
const data = res.options
this.major = data.major
this.degree = data.degree
this.gender = data.gender
if (data.generate == 1) {
this.getResult()
}
});
广播守则:
public function optionChanged(Request $request)
{
$major = $request->input('major');
$degree = $request->input('degree');
$gender = $request->input('gender');
$draw = $request->input('draw');
$generate = $request->input('generate');
$data = [
'major' => $major,
'draw' => $draw,
'gender' => $gender,
'degree' => $degree,
'generate' => $generate,
];
$drawData = Draw::where('id', $draw)->first();
$drawData->current_gender = $gender;
$drawData->current_qualification_type = $degree;
$drawData->current_major = $major;
$drawData->save();
try {
event(new DrawOptionsChanged($data));
} catch (\Exception $exception) {
$exception->getMessage();
}
return response()->json([
'message' => 'success'
]);
}
试试这个拉威尔回声https://www.npmjs.com/package/laravel-echo
Echo.channel("draw_options")
.listen("DrawOptionsChanged ",res => {
const data = res.options
this.major = data.major
this.degree = data.degree
this.gender = data.gender
if (data.generate == 1) {
this.getResult()
}
}
);