使用 Reverb 和 Vue 向 Laravel 添加实时聊天功能
最后更新于 经过 哈里什·库马尔
Laravel 是 Web 工匠最喜爱的 PHP 框架，现在又在其武器库中增加了一个强大的新工具：Reverb。在 Laravel 的官方软件包中，这个 WebSocket 服务器应用程序可让您无缝集成基于 Laravel 的应用程序中实时功能，从而将交互提升到一个全新的水平。
什么是 Laravel Reverb？
Reverb 充当基于 Laravel 的应用程序与其用户之间的中介。它基于 WebSockets 技术建立双向实时通信，允许网页在服务器上接收更新而无需完全刷新页面。这意味着您的用户可以更加动态、更灵敏地体验您的应用程序。
Laravel Reverb 的主要功能
疾速速度： 提供出色的实时信息性能，无任何延迟。
可扩展性： 与您的应用程序一起成长，以处理不断增加的用户流量。
无缝整合： 它与 Laravel 和 Laravel Echo 中添加的广播功能配合使用，使开发变得简单。
推送更新： 向客户推送更新、消息或事件，以便即时分享您的信息。
内置安全性： 数据加密与认证保障安全通信
将 Laravel Reverb 添加到你的聊天项目中
使用 Laravel Reverb，您可以构建动态聊天应用程序。消息会立即发布，让用户全面参与。以下是所涉及步骤的细分：
步骤 1：设置你的 Laravel 项目：
确保您已安装 Laravel 应用程序（建议使用 11 或更高版本）。
如果你是新手，请使用
composer create-project laravel/laravel your-chat-app-name。
步骤 2：安装并配置 Reverb：
通过运行以下命令安装 Laravel Reverb：
php
工匠
安装：广播安装 Reverb 后，你现在可以从
config/reverb.php
文件。要与 Reverb 建立连接，必须在客户端和服务器之间交换一组 Reverb“应用程序”凭据。这些凭据在服务器上配置，用于验证来自客户端的请求。您可以使用以下环境变量定义这些凭据：
广播驱动程序
=
混响REVERB_APP_ID
=
我的应用 IDREVERB_APP_KEY
=
我的应用密钥REVERB_APP_SECRET
=
我的应用秘密它还会自动创建
echo.js
在里面
resources/js
目录。
进口
回声
从
'laravel-echo'
;进口
推手
从
'pusher-js'
;窗口.推手
=
推杆；window.Echo
=
新的
回声
（{广播公司：
混响
,钥匙：
进口
。
元
.env.
VITE_REVERB_APP_KEY
,wsHost：
进口
。
元
.env.
VITE_REVERB_HOST
,wsPort：
进口
。
元
.env.
VITE_REVERB_PORT
？？
80
,wss端口：
进口
。
元
.env.
VITE_REVERB_PORT
？？
443
,forceTLS: (
进口
。
元
.env.
VITE_REVERB_SCHEME
？？
'https'
）
===
'https'
,启用传输：[
'ws'
,
'wss'
]，});按照 Laravel 文档了解特定于你的应用程序服务器的配置步骤 https://laravel.com/docs/11.x/reverb
步骤 3：运行服务器
您可以使用以下方式启动 Reverb 服务器
reverb:start
Artisan 命令：
php
工匠
混响：开始默认情况下，Reverb 服务器将在
0.0.0.0:8080
，这使得它可以从所有网络接口访问。
如果要设置特定主机或端口，可以使用
–host
和
–port
启动服务器时的选项。
php
工匠
混响：开始
--host=127.0.0.1
--port=9000您还可以定义
REVERB_SERVER_HOST
和
REVERB_SERVER_PORT
应用程序中的环境变量
.env
配置文件。
步骤 4：设置数据库
打开你的
.env
文件并调整设置以设置您的数据库。以下是使用 SQLite 的示例，以简化操作：
数据库连接
=
sqlite数据库
=
/path/to/database.sqlite您只需运行以下命令即可创建 SQLite 数据库：
触碰
/path/to/database.sqlite在本演示中，我们将创建五个预定义房间。让我们首先生成一个模型
ChatMessage
随着移民
chat_messages
桌子。
php
工匠
品牌：型号
聊天消息
--迁移为了简单起见，只为该模型创建名称属性并迁移它。
架构
::
创造
（
'聊天消息'
,
功能
（
蓝图
$table) {$表
->
ID
（）；$表
->
外国身份证
（
'receiver_id'
（英文）：$表
->
外国身份证
（
'sender_id'
（英文）：$表
->
文本
（
'文本'
（英文）：$表
->
时间戳
（）；});php
工匠
迁移现在，让我们在
ChatMessage
模型。打开
ChatMessage.php
存档于
app/Models
目录并进行如下更新：
命名空间
应用程序\模型
;使用
Illuminate\Database\Eloquent\Factories\HasFactory
;使用
照亮\数据库\雄辩\模型
;班级
聊天消息
延伸
模型{
使用
有工厂
;
受保护
$可填充
=
[
'sender_id'
,
'receiver_id'
,
'文本']；
民众
功能
发件人
（）{
返回
$this
->
属于
（
用户
：：班级
,
'sender_id'
（英文）：}
民众
功能
接收者
（）{
返回
$this
->
属于
（
用户
：：班级
,
'receiver_id'
（英文）：}}步骤 5：创建活动
为了处理消息的广播，我们将创建一个名为
MessageSent
.此事件将实现 Laravel 的
ShouldBroadcastNow
接口，允许通过 WebSocket 立即广播而无需排队。请按照以下步骤创建和设置事件：
在中创建一个新的 PHP 文件
App\Events目录并命名MessageSent.php。打开新创建的文件并添加以下代码：
命名空间
应用程序\事件
;使用
App\Models\ChatMessage
;使用
照亮\广播\与套接字交互
;使用
照明\广播\私人频道
;使用
阐明\合同\广播\现在应该广播
;使用
照亮\基金会\事件\可调度
;使用
Illuminate\Queue\SerializeModels
;班级
消息已发送
实现
应该立即广播{
使用
可调度
;
使用
与套接字交互
;
使用
序列化模型
;
/*** 创建一个新的事件实例。*/
民众
功能
__构造
（
民众
聊天消息
$message){
//}
/*** 获取事件应广播的频道。**
@返回
大批
<
整数
, \照亮\广播\频道>*/
民众
功能
广播开启
（）
:
大批{
返回
[
新的
私人频道
（
“聊天。{
$this
->
信息
->
接收器 ID
}”
),]；}}步骤 6：创建私人频道路由
这
channels.php
Laravel 应用程序中的文件在定义用于实时通信功能的广播频道方面起着至关重要的作用。
使用
照明\支持\立面\广播
;播送
::
渠道
（
'chat.{id}'
,
功能
($user, $id) {
返回
（
整数
) $user
->
ID
===
（
整数
) $id;});此代码定义了一个名为
chat.{id}
使用 Laravel 的
Broadcast
外观。私有通道根据用户身份验证和授权逻辑限制访问。
步骤 7：定义路线
1. 聊天室路线：
路线
::
得到
（
'/chat/{friend}'
,
功能
（
用户
$friend) {
返回
看法
（
'聊天'
，[
“朋友”
=>
朋友]);}）
->
中间件
（[
‘授权’
]）
->
姓名
（
'聊天'
（英文）：此路由负责渲染聊天界面。它接受一个动态参数
{friend}
代表用户的聊天伙伴。
3.获取聊天消息路线：
路线
::
得到
（
'/messages/{friend}'
,
功能
（
用户
$friend) {
返回
聊天消息
::
询问
（）
->
在哪里
（
功能
（$查询）
使用
($friend) {$查询
->
在哪里
（
'sender_id'
,
授權
（）
->
ID
（））
->
在哪里
（
'receiver_id'
，$friend
->
ID）;}）
->
或哪里
（
功能
（$查询）
使用
($friend) {$查询
->
在哪里
（
'sender_id'
，$friend
->
ID）
->
在哪里
（
'receiver_id'
,
授權
（）
->
ID
（））；}）
->
和
（[
'发送者'
,
'接收者'
]）
->
orderBy
（
'ID'
,
'升序'
）
->
得到
（）；}）
->
中间件
（[
‘授权’
]);此路由检索经过身份验证的用户与指定好友之间交换的聊天消息（
{friend}
）。该查询确保它检索到用户作为发送者或接收者的消息，包括对话的两个方向。
4.发送聊天消息路线：
路线
::
邮政
（
'/messages/{friend}'
,
功能
（
用户
$friend) {$消息
=
聊天消息
::
创造
（[
'sender_id'
=>
授權
（）
->
ID
（），
'receiver_id'
=>
朋友
->
ID，
'文本'
=>
要求
（）
->
输入
（
'信息'
）]);
播送
（
新的
消息已发送
（$消息））；
返回
$message;});创建消息后，它利用 Laravel 的广播功能
broadcast(new MessageSent($message))
。该线路通过 Reverb 将新创建的消息广播给所有连接的用户，从而实现实时聊天功能。
步骤 8：创建 Blade 视图
要呈现聊天界面，您需要创建一个 Blade 视图文件。创建一个名为
chat.blade.php
在里面
resources/views
目录并添加以下代码：
<
x-app-layout
><
x槽
姓名
=
“标题”
><
h2
班级
=
"text-xl font-semibold leading-tight text-gray-800"
>{{ $friend->name }}</
h2
></
x槽
><
div
班级
=
"py-12"
><
div
班级
=
"mx-auto max-w-7xl sm:px-6 lg:px-8"
><
div
班级
=
"overflow-hidden bg-white shadow-sm sm:rounded-lg"
><
div
班级
=
"p-6 bg-white border-b border-gray-200"
><
聊天组件
朋友
=
"{{ $friend }}"
:当前用户
=
"{{ auth()->user() }}"/></
div
></
div
></
div
></
div
></
x-app-layout
>这里的关键要素是
<chat-component :friend="{{ $friend }}" :current-user="{{ auth()->user() }}" />
.此行渲染一个名为的 Vue.js 组件
chat-component
。
步骤 8：创建聊天组件
<
模板
><
div
><
div
班级
=
"flex flex-col justify-end h-80"
><
div
参考
=
"messagesContainer"
班级
=
"p-4 overflow-y-auto max-h-fit"
><
div
v-for
=
“消息中的消息”
：钥匙
=
"message.id"
班级
=
"flex items-center mb-2"><
div
v-if
=
"message.sender_id === currentUser.id"
班级
=
"p-2 ml-auto text-white bg-blue-500 rounded-lg">{{ message.text }}</
div
><
div
v-其他
班级
=
"p-2 mr-auto bg-gray-200 rounded-lg"
>{{ message.text }}</
div
></
div
></
div
></
div
><
div
班级
=
"flex items-center"
><
输入
类型
=
“文本”
v模型
=
"newMessage"@keydown=
发送打字事件@keyup.enter=
“发送消息”
占位符
=
请输入消息……
班级
=
"flex-1 px-2 py-1 border rounded-lg"/><
按钮@点击=
“发送消息”
班级
=
"px-4 py-1 ml-2 text-white bg-blue-500 rounded-lg">发送</
按钮
></
div
><
小的
v-if
=
“isFriendTyping”
班级
=
"text-gray-700"
>{{ friend.name }} 正在输入...</
小的
></
div
></
模板
><
脚本
设置>import axios from "axios";import { nextTick, onMounted, ref, watch } from "vue";const props = defineProps({朋友：{类型：对象，必填：是，}，当前用户：{类型：对象，必填：是，}，});const messages = ref([]);const newMessage = ref("");const messagesContainer = ref(null);const isFriendTyping = ref(false);const isFriendTypingTimer = ref(null);手表（信息，() => {nextTick(() => {messagesContainer.value.scrollTo({顶部：messagesContainer.value.scrollHeight，行为：“平滑”，});});}，{ deep: true }（英文）：const sendMessage = () => {if (newMessage.value.trim() !== "") {axios.post(`/messages/${props.friend.id}`, {消息：newMessage.value，}）然后((response) => {messages.value.push(response.data);newMessage.value = "";});}};const sendTypingEvent = () => {Echo.private(`chat.${props.friend.id}`).whisper("正在输入", {用户ID：props.currentUser.id，});};onMounted(() => {axios.get(`/messages/${props.friend.id}`).then((response) => {console.log(response.data);messages.value = response.data;});Echo.private(`chat.${props.currentUser.id}`).listen("MessageSent", (response) => {messages.value.push(response.message);}）.listenForWhisper("typing", (response) => {isFriendTyping.value = response.userID === props.friend.id;if (isFriendTypingTimer.value) {清除超时（isFriendTypingTimer.value）；}isFriendTypingTimer.value = setTimeout(() => {isFriendTyping.value = false;}, 1000);});});</
脚本
>此 Vue.js 组件管理聊天界面的动态行为。它显示一个可滚动的消息列表，根据发送者（当前用户或朋友）采用不同的样式。它提供了一个用于撰写新消息的输入字段和一个用于发送消息的按钮。它利用
axios
用于发出 HTTP 请求来获取初始消息并发送新消息。
使用 Laravel Echo 实现实时功能：
它监听广播
MessageSent每当有新消息到达时，事件都会更新消息列表。它利用私人频道上的耳语将用户的打字活动通知聊天伙伴，并从朋友那里接收类似的通知。
步骤 9：运行项目
要运行 Laravel 项目，我们需要执行以下命令：
php
工匠
服务对于起始前端：
npm
跑步
开发运行混响：
php
工匠
混响：开始源代码
您可以在以下 GitHub 存储库中找到此 Laravel Reverb 聊天实现的源代码： https://github.com/qirolab/laravel-reverb-chat
通过利用 Laravel Reverb，开发人员可以确保他们的应用程序保持响应和动态，提供现代用户期望的实时更新和交互。祝您编码愉快！
