NextJS chat app

使用Next.js构建实时聊天应用程序，ABLY和VERCEL

实时示例：https：//next-js-chat-app.vercel.app

逐步指南：https：//ase.com/blog/realtime-chat-app-nextjs-vercel

这是一个使用ACHASS MESAGENG平台的Demo Chat应用程序。

描述

它证明了：

• 酒吧/子消息传递
• Ably的反应钩子
• 具有明智的身份验证

技术堆栈

该项目使用以下组件：

• Next.js是Vercel的React框架。它用于构建使用服务器端渲染，无服务器功能和无缝托管的静态Web应用程序。这是一个框架，可以将您已经拥有的React知识带入，并进行了一些结构和惯例。

• 非常适合实时的酒吧/子消息平台，配备一套集成服务，可以直接向最终用户提供完整的实时功能。

• Vercel是一个托管平台，从头到尾构建到Next.js应用程序，并使用它们的无服务器功能。

• React是一个用于构建用户界面的JavaScript库，其封装的组件可以管理自己的状态。

我们要建造什么？

应用程序的UI将在此演练中构建

我们将构建一个在浏览器中运行的实时聊天应用程序。它将在下一个。JScreate-next-app模板上构建，它将包含一个React组件，该组件将使用大量发送和接收消息。我们还将编写下一个。JS无服务器函数，该功能将用于连接到适当的功能。

当地建筑和运行

先决条件

为了构建和部署此应用程序，您将需要：

• 一个用于发送消息的帐户：免费免费创建一个帐户。
• 一个用于生产托管的Vercel帐户：免费与Vercel创建一个帐户。
• 节点16或更大：安装节点。

您还需要一个API键，可以通过ABLY SERVICE进行身份验证。要获取API密钥，一旦您创建了一个帐户：

1. 访问您的应用仪表板，然后单击“创建新应用”。
2. 给新应用程序一个名字。
3. 创建应用程序后，复制私有API密钥。保持安全性，这就是您将通过Ably Service进行身份验证的方式。

建立项目

1. 要在本地运行此项目，请拨打此存储库，并在包含您的API键的项目的根部创建一个名为.env的文件：

ABLY_API_KEY=your-ably-api-key:goes-here

2. 运行npm install 。
3. 运行npm run dev 。

Next.js开发服务器将旋转，您将看到一个演示聊天应用程序。

在Vercel上托管

我们将Vercel用作开发服务器并构建管道。

Deploy Next.js生产的最简单方法是使用Next.js的创建者的Vercel平台。 Vercel是一个多合一平台，具有支持静态和Jamstack部署和无服务器功能的全局CDN。 - next.js文档

为了将新的聊天应用程序部署到Vercel，您需要：

1. 创建一个GitHub帐户（如果您还没有）
2. 将您的应用推到GitHub存储库
3. 创建一个Vercel帐户
4. 创建一个新的Vercel应用程序，然后从GitHub存储库中导入您的应用程序。 （这将需要您授权Vercel使用您的GitHub帐户）
5. 将您的ABLY_API_KEY添加为环境变量
6. 观看您的应用程序部署
7. 访问您浏览器中新创建的URL！

自己做

有几种方法可以扩展：

添加消息历史记录

目前，此演示中没有聊天历史记录，您只会在加入聊天后会看到消息。您可以通过使用明显的倒带功能免费扩展此演示，最多可以免费提供两分钟的历史记录，或者有付费帐户，最多可长达48小时。

添加用户名

聊天消息没有任何用户名发送。可以扩展此演示以引入一个用户名输入框，并将当前的用户名添加到发送时。

该演示将随机生成的客户ID用作唯一标识符 - 这就是它可以检测到发送消息的“我”或“其他人”的方式。

更多信息

• 加入我们的Discord服务器
• 在Twitter上关注我们
• 使用我们的SDK
• 访问我们的网站

---