【ai精翻】使用 Laravel 11、Vue 3 和 Pinia 构建实时聊天应用程序

您将学到什么

• 了解如何将 Laravel 与 Reverb 集成以构建实时应用程序
• 了解如何使用 Whisper 显示用户输入事件并实现客户端到客户端的通信
• 了解如何使用在线频道显示每个房间的在线用户
• 了解如何使用 Intersection Observer API 自动加载之前的聊天消息
• 使用 Pinia 学习状态管理
• 了解如何使用 flexbox 技巧让消息在滚动时保持滚动到视图中
• 了解如何从后端监听广播事件并做出相应的反应
• 了解如何监听用户离开或加入活动，以及如何从在线用户列表中添加/删除他们

要求

• 需要具备 PHP/Laravel 和 VueJS 的初级知识

描述

利用Laravel Reverb的强大功能，让我们使用 Laravel 11 和 VueJS 与 InertiaJS 构建一个实时多房间聊天应用程序，并引入 Pinia 进行状态管理。

我们将介绍：

• 使用 Intersection Observer API 在用户滚动到聊天界面顶部时自动加载之前的聊天消息
• 了解如何使用在线频道显示每个房间的在线用户
• 了解如何使用 Laravel Echo 实现客户端到客户端的通信，以显示谁在输入并相应地显示输入指示器
• 了解如何使用 Flexbox 技巧让消息在滚动时保持滚动到视图中
• 学习 Laravel 中的数据库播种技术
• 了解如何在 Laravel 中使用 API 资源
• 了解如何显示格式更好的日期和时间
• 了解如何从后端监听广播事件并做出相应的反应
• 我们还将学习如何监听用户离开或加入活动以及如何从在线用户列表中添加/删除他们
• 所有这些状态都将在客户端使用 Pinia 进行管理

在本课程结束时，您将构建一个功能丰富的实时聊天应用程序，展示您对前端和后端技术的理解，非常适合任何有抱负的开发人员，希望提高他们在动态 Web 应用程序开发方面的技能。

本课程适合哪些人？

• 想要使用 InertiaJS、Vue 3 和 Reverb 构建实时应用程序的 Laravel 开发人员