实现聊天室消息收发
更新时间: 2024/08/22 17:21:31
聊天室是网易云信 IM 即时通讯服务中一种比群组更加开放、更加自由的组织形态,可帮助您实现真正意义上的大型聊天室,参与人数无上限,又可满足消息到达的实时性要求,主要应用于娱乐直播、教育直播等场景。
本文介绍如何通过较少的代码集成 NetEase IM SDK (以下简称 NIM SDK)并调用相关 API,在您的应用中实现聊天室消息收发。
使用前准备
-
已在云信控制台创建应用,获取 App Key。
-
已注册云信 IM 账号,获取云信 IM 账号和 token。
-
已调用服务端接口创建聊天室。
实现流程
流程概览
实现聊天室消息收发的流程,可分为下图所示的 5 步:
步骤1: 集成 NIM SDK
SDK 以 npm 包的形式提供,请前往 nim-web-sdk-ng 获取 npm 包。
- 执行以下命令安装 npm 包。
npm install nim-web-sdk-ng@">=10"
- 通过
import
或者require
引入入口模块。根据开发环境不同,你可以选择不同的产物。目前产物包括:
业务场景 | 需引入的模块 | 初始化方法 |
---|---|---|
IM 浏览器 | NIM_BROWSER_SDK | NIM.getInstance |
IM UniApp | NIM_UNIAPP_SDK | NIM.getInstance |
IM 小程序 | NIM_MINIAPP_SDK | NIM.getInstance |
Chatroom 浏览器 | CHATROOM_BROWSER_SDK | CHATROOM.newInstance |
Chatroom UniApp | CHATROOM_UNIAPP_SDK | CHATROOM.newInstance |
Chatroom 小程序 | CHATROOM_MINIAPP_SDK | CHATROOM.newInstance |
- 若开发环境为浏览器,你应该按照下面的路径引入:
import V2NIMChatroomClient from 'nim-web-sdk-ng/dist/v2/CHATROOM_BROWSER_SDK'
- 若开发环境为uni-app,请按照下面的路径引入:
import V2NIMChatroomClient from 'nim-web-sdk-ng/dist/v2/CHATROOM_UNIAPP_SDK'
- 若开发环境为小程序,由于小程序构建 npm 之后,只有默认路径文件才会被复制到 miniprogram_npm 中,而 NIM SDK 小程序包不是默认路径。因此,我们需要将 nim-web-sdk-ng/dist/v2 拷贝到项目的其他目录中,然后引入:
import V2NIMChatroomClient from '{相对路径}/CHATROOM_MINIAPP_SDK'
步骤2: 初始化 SDK
将 CHATROOM SDK 集成到客户端后,需要先完成 CHATROOM 实例的初始化才能使用其他功能。
本文主要介绍 CHATROOM_BROWSER_SDK
的初始化。示例代码如下:
const chatroom = V2NIMChatroomClient.newInstance({
appkey: "YOUR_APPKEY",
debugLevel: "debug"
})
以上提供了一个简化的初始化示例,更多 chatroom 实例的初始化说明,请参见初始化。
步骤3: 登录聊天室
-
发送方和接收方注册聊天室实例监听器,包括聊天室连接状态变更、进出聊天室、被踢出聊天室。
示例代码如下:
typescript
chatroom.on("onChatroomStatus", function (status: V2NIMChatroomStatus, err?: V2NIMError) {}) chatroom.on("onChatroomEntered", function () {}) chatroom.on("onChatroomExited", function (err?: V2NIMError) {}) chatroom.on("onChatroomKicked", function (kickedInfo: V2NIMChatroomKickedInfo) {})
-
在登录聊天室之前,需要先提前获取聊天室地址。可以通过以下两种方式获取:
-
若当前客户端已登录 IM,那么可以通过
getChatroomLinkAddress
方法获取指定聊天室的地址。示例代码如下:
typescript
const linkAddressArr = await nim.V2NIMLoginService.getChatroomLinkAddress()
-
若当前客户端未登录 IM,那么 SDK 无法获取聊天室服务器的地址,需要客户端向开发者应用服务器请求该地址,而应用服务器需要向网易云信服务器请求,然后将请求结果原路返回给客户端。具体请 参考获取聊天室地址 服务端 API。
-
发送方和接收方调用
enter
方法登录聊天室。示例代码如下:
typescript
try { await chatroom.enter('YOUR_ROOM_ID', { accountId: 'YOUR_ACCOUNT_ID', token: 'YOUR_TOKEN', linkProvider: function(roomId, account) { return ['linkAddress1', 'linkAddress2'] } }) } catch (err) { // TODO failed, check code // console.log(err.code) }
步骤5: 聊天室消息收发
NIM SDK 支持多种消息类型,包括文本消息、图片消息、语音消息、视频消息、文件消息、地理位置消息、提示消息、通知消息以及自定义消息。
本节以发送方与接收方的消息交互为例,介绍通过 NIM SDK 快速实现聊天室文本消息收发的流程。
其他类型消息收发相关详情,请参见聊天室消息管理。
-
接收方注册聊天室监听器,监听聊天室消息接收回调事件
onReceiveMessages
。示例代码如下:
typescript
chatroom.V2NIMChatroomService.on('onReceiveMessages', function (messages: V2NIMChatroomMessage[]){})
-
发送方调用
createTextMessage
方法,构建一条文本消息。并调用sendMessage
方法,发送已构建的文本消息。示例代码如下:
typescript
await chatroom.V2NIMChatroomService.sendMessage( message, // V2NIMSendChatroomMessageParams { locationInfo: {x: 0, y: 100, z: 0} }, progress: (percentage) => {console.log('上传进度: ' + percentage)} )
-
接收方通过
onReceiveMessages
回调收到聊天室消息。
后续步骤
为保障通信安全,如果您在调试环境中的使用的是云信控制台生成的测试用 IM 账号 和 Token,请确保在后续的正式生产环境中,将其替换为通过 IM 服务端 API 生成的正式 IM 账号(accid
)和 token
。