Laravel11 从0开发 Swoole-Reverb 扩展包（五） - Laravel Echo 介绍
前情提要上一节我们完整的梳理了整个通信过程，接下来我们需要来看前端的处理过程。
Laravel Echo
Laravel Echo 是一个 JavaScript 库，它让您可以轻松订阅频道并监听服务器端广播驱动程序广播的事件。您可以通过 NPM 包管理器安装 Echo。在此示例中，我们还将安装 pusher-js 包，因为 Reverb 使用 Pusher 协议进行 WebSocket 订阅、频道和消息
安装
npm install --save-dev laravel-echo pusher-js
yarn add --save-dev laravel-echo pusher-js安装 Echo 后，您就可以在应用程序的 JavaScript 中创建一个新的 Echo 实例。执行此操作的最佳位置是 Laravel 框架附带的 resources/js/bootstrap.js 文件的底部。默认情况下，此文件中已包含一个示例 Echo 配置 - 您只需取消注释并将广播器配置选项更新为 reverb：
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;
window.Echo = new Echo({
broadcaster: 'reverb',
key: import.meta.env.VITE_REVERB_APP_KEY,
wsHost: import.meta.env.VITE_REVERB_HOST,
wsPort: import.meta.env.VITE_REVERB_PORT,
wssPort: import.meta.env.VITE_REVERB_PORT,
forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
enabledTransports: ['ws', 'wss'],
});监听事件
安装并实例化 Laravel Echo 后，您就可以开始监听从 Laravel 应用程序广播的事件了。首先，使用 channel 方法检索通道实例，然后调用 listen 方法来监听指定的事件：：
Echo.channel(`orders.${this.order.id}`)
.listen('OrderShipmentStatusUpdated', (e) => {
console.log(e.order.name);
});如果您想在私有频道上监听事件，请改用私有方法。您可以继续链接调用 listen 方法以在单个频道上监听多个事件：
Echo.private(`orders.${this.order.id}`)
.listen(/* ... */)
.listen(/* ... */)
.listen(/* ... */);停止监听事件
如果您想在不离开频道的情况下停止监听给定事件，您可以使用 stopListening 方法：
Echo.private(`orders.${this.order.id}`)
.stopListening('OrderShipmentStatusUpdated')离开频道
要离开频道，您可以调用 Echo 实例上的 leaveChannel 方法：
Echo.leaveChannel(`orders.${this.order.id}`);如果你想离开一个频道以及其关联的私人频道和在线频道，你可以调用 leave 方法：
Echo.leave(`orders.${this.order.id}`);命名空间
您可能已经注意到，在上面的示例中，我们没有为事件类指定完整的 App\Events 命名空间。这是因为 Echo 会自动假定事件位于 App\Events 命名空间中。但是，您可以在实例化 Echo 时通过传递命名空间配置选项来配置根命名空间：
window.Echo = new Echo({
broadcaster: 'pusher',
// ...
namespace: 'App.Other.Namespace'
});或者，您可以在使用 Echo 订阅事件类时为其添加前缀 .。这样您就可以始终指定完全限定的类名：
Echo.channel('orders')
.listen('.Namespace\\Event\\Class', (e) => {
// ...
});Presence Channels
在线频道以私人频道的安全性为基础，同时还提供了了解频道订阅者的功能。这样可以轻松构建强大的协作应用程序功能，例如当其他用户正在查看同一页面时通知用户或列出聊天室的成员。
授权状态通道
所有在线频道也是私有频道；因此，用户必须获得授权才能访问它们。但是，在为在线频道定义授权回调时，如果用户被授权加入频道，则不会返回 true。相反，您应该返回有关用户的数据数组。
授权回调返回的数据将提供给 JavaScript 应用程序中的在线频道事件侦听器。如果用户未被授权加入在线频道，则应该返回 false 或 null：
use App\Models\User;
Broadcast::channel('chat.{roomId}', function (User $user, int $roomId) {
if ($user->canJoinRoom($roomId)) {
return ['id' => $user->id, 'name' => $user->name];
}
});连接在线频道
要加入状态频道，您可以使用 Echo 的 join 方法。join 方法将返回 PresenceChannel 实现，它除了公开 listen 方法外，还允许您订阅当前状态、加入和离开事件.
Echo.join(`chat.${roomId}`)
.here((users) => {
// ...
})
.joining((user) => {
console.log(user.name);
})
.leaving((user) => {
console.log(user.name);
})
.error((error) => {
console.error(error);
});成功加入频道后，将立即执行此处的回调，并将收到一个数组，其中包含当前订阅该频道的所有其他用户的用户信息。当新用户加入频道时，将执行加入方法，而当用户离开频道时，将执行离开方法。当身份验证端点返回除 200 以外的 HTTP 状态代码或解析返回的 JSON 时出现问题时，将执行错误方法。
向 Presence 频道广播
Presence 频道可以像公共或私人频道一样接收事件。使用聊天室的示例，我们可能希望将 NewMessage 事件广播到房间的 Presence 频道。为此，我们将从事件的 broadcastOn 方法返回 PresenceChannel 的一个实例：
/**
* Get the channels the event should broadcast on.
*
* @return array<int, \Illuminate\Broadcasting\Channel>
*/
public function broadcastOn(): array
{
return [
new PresenceChannel('chat.'.$this->message->room_id),
];
}与其他事件一样，您可以使用广播助手和 toOthers 方法来排除当前用户接收广播：
broadcast(new NewMessage($message));
broadcast(new NewMessage($message))->toOthers();与其他类型的事件一样，您可以使用 Echo 的 listen 方法监听发送到存在通道的事件：
Echo.join(`chat.${roomId}`)
.here(/* ... */)
.joining(/* ... */)
.leaving(/* ... */)
.listen('NewMessage', (e) => {
// ...
});客户端事件
有时您可能希望将事件广播给其他连接的客户端，而无需访问您的 Laravel 应用程序。这对于“输入”通知等情况特别有用，在这种情况下，您希望提醒应用程序的用户另一个用户正在给定的屏幕上输入消息。
要广播客户端事件，您可以使用 Echo 的 whisper 方法：
Echo.private(`chat.${roomId}`)
.whisper('typing', {
name: this.user.name
});要监听客户端事件，你可以使用 listenForWhisper 方法：
Echo.private(`chat.${roomId}`)
.listenForWhisper('typing', (e) => {
console.log(e.name);
});通知
通过将事件广播与通知配对，您的 JavaScript 应用程序可以在新通知发生时接收它们，而无需刷新页面。在开始之前，请务必阅读有关使用广播通知渠道的文档。
配置通知以使用广播渠道后，您可以使用 Echo 的通知方法监听广播事件。请记住，渠道名称应与接收通知的实体的类名匹配：
Echo.private(`App.Models.User.${userId}`)
.notification((notification) => {
console.log(notification.type);
});在此示例中，通过广播渠道发送到 App\Models\User 实例的所有通知都将由回调接收。App.Models.User.{id} 渠道的渠道授权回调包含在应用程序的 routes/channels.php 文件中。
以上内容翻译自laravel官方文档。
提供一个简单的页面案例
这个页面实现了广播事件监听、客户端发送，客户端监听等功能
<template>
<Head title="聊天"/>
联系人
{{ currentDate }}
{{ message.content }}
<button v-if="message.type === 'coupon'"
type="button"
@click="receiveCoupon">
领取
</button>
⚠️ {{ message.content }}
{{ message.author.charAt(0) }}
{{ message.author }}
{{ message.content }}
{{ formatMessageTime(message.timestamp) }}
{{ user.name.charAt(0) }}
<input
v-model="newMessage"
@keydown.enter="sendMessage"
placeholder="发送消息..."
/>
<button
@click="sendMessage"
v-if="canSend"
:
>
发送
</button>
</AuthenticatedLayout>
<footer >
Laravel{{ laravelVersion }}-PHP{{ phpVersion }}
</footer>
</template>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]