我想触发一个事件到pusher私人频道，而我的服务器端语言是laravel我审查了很多资源，但是我没有找到涵盖服务器端和前侧终于得到了这个解决方案在第一步中：
export const SendChat = () => {
try {
var pusher = new Pusher('YOUR_APP_KEY', {
cluster: 'ap2',
forceTLS: true,
authTransport: 'jsonp',
authEndpoint: `${baseUrl}pusher/auth`,
});
var channel = pusher.subscribe('private-channel');
channel.bind('pusher:subscription_succeeded', function() {
var triggered = channel.trigger('client-EVENT_NAME', { 'message': 'Hi ....' });
console.log(triggered)
});
} catch (error) {
console.error(error);
}
}
并将其称为某个地方
<Button onClick={this.props.SendChat} waves='light' >Send</Button>
您必须在按钮帐户设置中启用客户端事件
login to your pusher account -> select the channel ->App Settings -> select Enable client events -> update
添加您的应用程序键，频道名称和事件名称之后，我们需要在服务器端授权这是示例Laravel代码首先在Web.php
中添加此路由Route::get('pusher/auth', 'PusherController@pusherAuth');
使PusherController.php这样：
public function pusherAuth()
{
$user = auth()->user();
if ($user) {
$pusher = new Pusher('auth_key', 'secret', 'app_id');
$auth= $pusher->socket_auth(Input::get('channel_name'), Input::get('socket_id'));
$callback = str_replace('\', '', $_GET['callback']);
header('Content-Type: application/javascript');
echo($callback . '(' . $auth . ');');
return;
}else {
header('', true, 403);
echo "Forbidden";
return;
}
}
测试它，您应该看到类似的东西
Pusher : State changed : connecting -> connected with new socket ID 3953.****556
Pusher : Event sent : {"event":"pusher:subscribe","data":{"auth":"83045ed1350e63c912f5:328fb78165d01f7d6ef3bb6d4a30e07c9c0ad0283751fc2c34d484d4fd744be2","channel":"private-chat"}}
Pusher : Event sent : {"event":"client-MessageSent","data":{"message":"Hi ...."},"channel":"private-chat"}
true
您正在使用哪种客户端语言并不重要。Angular，Vue，反应它们都是JS框架和库。而且，您可以考虑使用通用JS代码，您可以将其放置在所有3个应用中。
让我尝试根据我的知识给您一个详细的答案。
为了开始，您应该首先完成无需推送器的聊天方案。即：用户应该能够通过API从前端发送消息，并且应该存储在数据库中。
完成此操作后，很容易将推动器包括在流中。（简单地说，您必须广播一个事件，这将告知套接字服务器以向频道上的所有/其他用户广播消息）
对于Pusher身份验证，您无需明确创建路由和方法。一旦您在config/app.php内进行了无用的BroadcastServiceProvider。您可以运行：
php artisan route:list
，您会看到广播broadcasting/auth的路线。
您可以使用此路线进行身份验证。虽然，您可以在此之前进行少量更改，并在此之前进行预置/api。
进入广播CastserviceProvider.php，然后用以下方式替换启动方法：
public function boot()
{
Broadcast::routes(
[
'prefix' => 'api',
'as' => 'api.broadcasting.auth',
'middleware' => ['auth:sanctum'],
]
);
require base_path('routes/channels.php');
}
我假设您正在使用Laravel Sanctum进行身份验证。如果不是，您需要将身份验证中间件更改为提供商。
完成后，您可以使用此验证路线从前端进行身份验证。因此，我所做的工作是在ReactJs和构造函数中创建的服务，我创建了一个推动器实例：
this.pusher = new Pusher(PUSHER_APP_KEY, {
authEndpoint: 'http:localhost:8000/api/broadcasting/auth',
cluster: PUSHER_CLUSTER,
useTLS: true,
auth: {
headers: {
Authorization: 'Bearer ' + authHeader
}
}
});
您只需要实例化推动器一次，然后在整个应用程序中使用此实例。因此，这就是为什么我为Pusher创建了服务类。
如果您希望事情变得简单，则需要在使用Pusher的页面上执行此代码。页面加载后，您需要调用此代码。因此，您将要做：
let pusher = null;
useEffect(() => {
pusher = new Pusher(PUSHER_APP_KEY, {
authEndpoint: 'http:localhost:8000/api/broadcasting/auth',
cluster: PUSHER_CLUSTER,
useTLS: true,
auth: {
headers: {
Authorization: 'Bearer ' + authHeader
}
}
});
}, []);
因此，这样，我们在功能组件或页面中都有一个推动器的实例。
现在，我们需要订阅渠道。
使用推送器的实例，我们可以订阅频道。如果您遵循了同一页面上的使用效率方法，则在获取实例后，您可以订阅频道并使用此代码绑定到事件：
const channel = pusher.subscribe('private-chat.' + channelName)
，并且要绑定到一个事件，您可以做：
channel.bind('event.name', function(data) {
console.log(data);
});
确保替换＆quot＆quotname'和" event.name"分别使用您的频道和事件名称。
现在，一旦从后端广播，您就可以收听您的活动。
所以，您将从后端做这样的事情。您将有一种将消息存储在数据库中的方法，因此，假设代码为：
public function sendMessage (Request $request){
//.... Rest of the logic
$user = $request->user();
// Store the message
$chatMessage = $chat->messages()->create([
'message' => $message,
'sender_id' => $user->id
]);
broadcast(new NewMessage($user, $chatMessage))->toOthers();
//... Rest of the logic
}
此广播消息将在聊天中将此消息发送给其他用户。
我希望这个答案给您一个好主意和方向。
用于通过laravel上的推动器与Websocket合作，我建议使用Laravel Echo Echo进行React零件。以及在Config/Broadcasting.php设置的后端侧面的推动器配置。查看官方文档的更多详细信息Laravel如何在后端侧和前端侧使用Pusher。https://laravel.com/docs/8.x/broadcasting#pusher-channels