使用 Vercel V0 进行快速原型设计
Vercel V0 是一种 AI 驱动的 UI 生成工具，允许快速聊天应用程序原型设计。我们将使用它来创建应用程序用户界面的基础。
- 访问 Vercel V0 网站。
- 为类似 WhatsApp Web 的聊天 UI 或您选择的任何 UI 提供提示。
- 查看生成的 UI - 它可能并不完美，但它是一个坚实的基础。
- 复制生成的代码以在我们的 Cursor AI 项目中使用。
设置您的 Next.js 项目
下面我们将设置我们的项目结果并集成必要的依赖项，让Cursor AI帮我们。
Cursor AI提示词
初始化一个新的 Next.js 项目，并安装必要的依赖项。
基于以下代码（粘贴从Vercel V0 生成的代码）创建一个带有聊天界面的应用主页。
在 Next.js 项目中初始化 shadcn-ui。初始化 CometChat 以进行实时消息传递
利用 CometChat SDK 的强大功能为聊天应用程序启用实时消息传递功能。
注册一个 CometChat 帐户并创建一个新应用程序，以获取您的 App ID、区域和身份验证密钥。Cursor 将创建一个带有环境变量的新文件，只需从您的 CometChat 应用程序中更新实际的 APP ID 和区域即可。
Cursor AI提示词
在 Next.js 应用程序中初始化 CometChat。
为 CometChat 的凭据设置环境变量。
在主应用程序文件中实现 CometChat 的初始化。CometChat初始化代码
let appID = "APP_ID";
let region = "APP_REGION";
let appSetting = new CometChat.AppSettingsBuilder()
.subscribePresenceForAllUsers()
.setRegion(region)
.autoEstablishSocketConnection(true)
.build();
CometChat.init(appID, appSetting).then(
() => {
console.log("Initialization completed successfully");
},
(error) => {
console.log("Initialization failed with error:", error);
}
);使用 CometChat 实现用户身份验证
现在，我们将使用 CometChat 实现用户身份验证。这将在用户登录时对新用户进行 CometChat 身份验证。我们还将在登录过程中添加一些错误处理。
Cursor AI提示词
使用 CometChat 软件开发工具包（SDK）实现用户身份验证和登录。
创建一个使用 CometChat.login () 方法的登录函数。
处理登录成功及出现错误的情况。CometChat登陆代码
var UID = "cometchat-uid-1";
var authKey = "AUTH_KEY";
CometChat.getLoggedinUser().then(
(user) => {
if (!user) {
CometChat.login(UID, authKey).then(
(user) => {
console.log("Login Successful:", { user });
},
(error) => {
console.log("Login failed with exception:", { error });
}
);
}
},
(error) => {
console.log("Some Error Occured", { error });
}
);创建动态用户列表和消息历史记录
使用用户列表填充聊天 UI 并实施消息历史记录检索，展示我们的 AI 生成的前端与 CometChat 强大的后端之间的无缝集成。
- 获取用户列表
- 获取所选用户的消息历史记录
- 实施 UI 组件以显示用户列表和消息历史记录。
Cursor AI提示词
使用 CometChat 软件开发工具包（SDK）实现获取用户列表的功能。
创建用于检索所选用户消息历史记录的函数。
设计用于显示用户列表和消息历史记录的用户界面组件。
let UID = "UID";
let limit = 30;
let messagesRequest = new CometChat.MessagesRequestBuilder()
.setUID(UID)
.setLimit(limit)
.build();
messagesRequest.fetchPrevious().then(
messages => {
console.log("Message list fetched:", messages);
}, error => {
console.log("Message fetching failed with error:", error);
}
); 添加实时消息发送功能
主要包括：
- 创建用于发送消息的函数
- 添加自动滚动功能以保持最新消息的视图
Cursor AI提示词
使用 CometChat 软件开发工具包（SDK）实现消息发送功能。
添加自动滚动功能，以便始终能看到最新消息。
Send message code:
let receiverID = "UID";
let messageText = "Hello world!";
let receiverType = CometChat.RECEIVER_TYPE.USER;
let textMessage = new CometChat.TextMessage(
receiverID,
messageText,
receiverType
);
CometChat.sendMessage(textMessage).then(
(message) => {
console.log("Message sent successfully:", message);
},
(error) => {
console.log("Message sending failed with error:", error);
}
);启用实时消息接收
最后，让我们添加实时消息接收来完成聊天应用程序的核心功能。
- 为传入消息设置侦听器
- 收到新消息时实时更新 UI。
Cursor AI提示词
使用 CometChat 软件开发工具包（SDK）实现实时消息监听器。
当接收到新消息时实时更新用户界面。
let listenerID: string = "UNIQUE_LISTENER_ID";
CometChat.addMessageListener(
listenerID,
new CometChat.MessageListener({
onTextMessageReceived: (textMessage: CometChat.TextMessage) => {
console.log("Text message received successfully", textMessage);
},
onMediaMessageReceived: (mediaMessage: CometChat.MediaMessage) => {
console.log("Media message received successfully", mediaMessage);
},
onCustomMessageReceived: (customMessage: CometChat.CustomMessage) => {
console.log("Custom message received successfully", customMessage);
}
})
);测试 AI 驱动的聊天应用程序
为了确保我们的 AI 辅助开发过程能够生成功能齐全的聊天应用程序，让我们在多个用户中对其进行测试。
- 修改您的登录组件以通过 URL 参数接受用户 ID：
在两个不同的浏览器或窗口中打开应用程序，具有不同的用户 ID：- 在用户之间发送消息以验证实时功能。
