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
• 訪問我們的網站

---