使用 livewire 向 Laravel 网站添加聊天系统

Question

我正在使用 laravel 8 和 livewire 开发一个项目，我已经到了必须向该项目添加聊天系统的部分。我本来打算使用 Livewire，但我听说，使用它有点冒险，您对此有何看法？如果这是真的，你的建议是什么

Answer 1

我本来可以发表评论，但我没有足够的声誉来发表评论，所以我在这里回复。
是的，你可以用Livewire制作一个聊天系统。
我强烈建议您观看 Laravel Daily 的有关 Laravel 问题的视频。
他用 Livewire 制作了一个关于聊天系统的视频。
这是链接：Laravel Livewire：简单的聊天室组件

Answer 2

有可能：

步骤1.

composer require pusher/pusher-php-server

步骤 2. 使用您的 Pusher 凭据更新您的 .env 文件。

PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_APP_CLUSTER=your-app-cluster

第 3 步：创建聊天组件

生成一个名为 Chat 的新 Livewire 组件。

php artisan make：livewire 聊天
打开新创建的 app/Http/Livewire/Chat.php 文件并更新 render 方法以返回视图 livewire.chat。

公共函数render() { 返回视图('livewire.chat'); }
创建 livewire/chat.blade.php 视图文件并添加以下代码：
```
 <input type="text" wire:model="newMessage" 
    wire:keydown.enter="sendMessage">
```
返回 Chat 组件类，定义 messages 和 newMessage 属性以及 sendMessage 方法。

公共$messages = []; 公共$newMessage;

公共函数sendMessage() { array_push($this->messages, $this->newMessage); $this->newMessage = ''; }

第 4 步：更新路线和布局

打开routes/web.php文件并添加以下路由来处理聊天组件。

路线::get('/chat', Chat::class);
创建一个名为 resources/views/layouts/app.blade.php 的新布局文件，其中包含以下内容：
聊天应用程序

第 5 步：广播聊天消息

修改
```
 sendMessagemethod in theChat
```
组件以使用Pusher广播消息。

公共函数sendMessage() { array_push($this->messages, $this->newMessage); $this->newMessage = '';
```
 event(new MessageSent($this->messages));
```
}
生成一个名为 MessageSent 的新事件。

php artisan make：事件消息发送
打开app/Events/MessageSent.php 文件并更新broadcastOn 方法以使用聊天频道。

公共函数broadcastOn() { 返回新频道（'聊天频道'）； }
打开app/Providers/EventServiceProvider.php文件，在$listen数组中注册MessageSent事件。

受保护的 $listen = [ 消息发送::类 => [ // ], ];

第6步：实时监听消息

更新App\Providers\BroadcastServiceProvider.php文件中的启动方法以使用Pusher广播器。

公共函数boot() { 广播::路由(['中间件' => ['web', 'auth']]);
```
 require base_path('routes/channels.php');
```
}
创建一个名为routes/channels.php的新通道文件并添加以下代码：

使用 Illuminate\Support\Facades\Broadcast;

广播::频道('聊天频道', function ($user) { 返回真； });
打开 resources/js/bootstrap.js 文件并取消注释 import Echo from 'laravel-echo' 和 window.Pusher 行，然后更新 Echo 实例以使用您的 Pusher 应用程序凭据。

从“laravel-echo”导入 Echo；

window.Pusher = require('pusher-js');

window.Echo = new Echo({ 广播公司：“推手”，密钥：process.env.MIX_PUSHER_APP_KEY，集群：process.env.MIX_PUSHER_APP_CLUSTER，加密：真 });
使用 Laravel Mix 编译资源。

npm 安装 && npm 运行开发

第 7 步：测试聊天应用程序

启动 Laravel 开发服务器。

php 工匠服务
在浏览器中访问http://localhost:8000/chat。
打开另一个浏览器窗口或私人/隐身窗口来模拟不同的用户。
在一个窗口中发送消息，并在另一个窗口中看到它们实时显示。

使用 livewire 向 Laravel 网站添加聊天系统

问题描述投票：0回答：2

2个回答

最新问题

使用 livewire 向 Laravel 网站添加聊天系统

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2