Web

实现圈组消息收发(不含 UI)

更新时间: 2024/03/15 16:12:31

圈组是网易云信 IM 即时通讯服务的全新能力,可用来帮助您快速构建“类Discord即时通讯社群”。本文介绍如何通过较少的代码集成 NetEase IM SDK(NIM SDK)并调用 API,在您的应用中实现圈组消息收发。

前提条件

实现流程

流程概览

实现圈组消息收发的流程,可分为下图所示的 4 大步骤。

下图可能因为网络问题无法正常展示。如遇到该问题,一般刷新页面即可正常展示。

uml diagram

步骤1: 集成 SDK

圈组功能基于 Web IM Elite 版本,并且以 npm 包形式提供。

  1. 请前往 nim-web-sdk-ng 下载 npm 包。

  2. 执行如下命令进行安装。

    > npm install nim-web-sdk-ng@latest
    
    > npm ls nim-web-sdk-ng
    └── nim-web-sdk-ng@0.4.0 
    
    • 请安装 0.4.0 及以上版本的 npm 包。
    • npm 包目前只支持浏览器环境使用。
  3. 执行如下命令,将圈组 SDK (QChat SDK)导入到您的 Web 应用项目。

    import QChatSDK from 'nim-web-sdk-ng/dist/QCHAT_BROWSER_SDK'
    

步骤2:初始化 SDK

创建并初始化 SDK 实例。示例代码如下:

具体初始化参数说明请参见初始化重要参数

const qchat = new QChatSDK({
    appkey: '{{YOUR_APP_KEY}}', // 传入您的App Key
    token: '{{YOUR_TOKEN}}', // 传入您的Token
    account: '{{YOUR_ACCOUNT}}', // 传入您的accid
    linkAddresses: ['{{YOUR_ADDRESSES}}'], // 传入圈组服务端连接地址
    debugLevel: 'debug' // 设置日志级别
})

步骤3:登录圈组

  1. 设置监听事件。

    • 发送方和接收方为 SDK 实例设置登录成功监听事件。示例代码如下:
    qchat.on('logined', function (loginResult) { console.log(`login done!! ${loginResult}`) })
    
    • 接收方为 SDK 实例设置消息接收监听事件。示例代码如下:
    qchat.on('message', function (msg) {console.log('receive a message', msg)})
    
  2. 调用login方法与圈组服务端建立连接并登录。

    示例代码如下:

    await qchat.login()
    

步骤4:实现圈组消息收发

本节以发送方与接收方的消息交互为例,介绍在不考虑用户权限控制的情况下,使用 SDK API 快速实现圈组文本消息收发的流程。

  1. 发送方调用createServer方法创建圈组服务器。为更加快速实现消息收发,创建时可将InviteMode设置为1(发送邀请后,不需要被邀请方同意,被邀请方立即加入服务器)。

    示例代码如下:

    const qchat = new QChat(options);
    qchat.qchatServer.createServer({
        "name": "Jason的健身天地", // 传入服务器名称
        ...
    })
    

    创建成功后,需记录服务器的 ID(serverId),后续步骤将需要传入serverId

  2. 发送方调用createChannel方法,调用时传入上一步中创建的圈组服务器的serverId,且将viewModeType分别设置为0message,从而在圈组服务器中创建一个消息类型的公开频道。

    示例代码如下:

    const qchat = new QChat(options);
    qchat.qchatChannel.createChannel({
    "serverId": "12345",
    "name": "1"
    })
    
    

    创建成功后,需记录频道的 ID(channelId),后续步骤将需要传入channelId

  3. 发送方调用inviteServerMembers方法,邀请接收方加入服务器。

    示例代码如下:

    const qchat = new QChat(options);
    await qchat.qchatServer.inviteServerMembers({
        "serverId": '123456',
        "accids":["123"]
    })
    
  4. 发送方调用sendMessage方法,调用时传入服务器与公开频道的ID,从而在公开频道中发送一条消息。

    示例代码如下:

    // text and @everyone message
    const msg = await qchat.qchatMsg.sendMessage({
    "serverId": "{{YOUR_SERVERID}}",
    "channelId": "{{YOUR_CHANNELID}}",
    "type": "text",
    "body": "This is a test message",
    "mentionAll": true
    })
    
    console.log(msg.msgIdServer)
    
    // text and @somebody message
    const msg1 = await qchat.qchatMsg.sendMessage({
    "serverId": "{{YOUR_SERVERID}}",
    "channelId": "{{YOUR_CHANNELID}}",
    "type": "text",
    "body": "This is a test message",
    "mentionAccids": ["accountId1", "accountId2"]
    })
    
    
  5. SDK 触发消息接收(message)事件回调,接收方通过该回调接收消息体(QChatMessage)。

后续步骤

为保障通信安全,如果您在调试环境中的使用的是云信控制台生成的测试用 IM 账号 和 token,请确保在后续的正式生产环境中,将其替换为通过 IM 服务端 API 生成的正式 IM 账号(accid)和 token

相关文档

此文档是否对你有帮助?
有帮助
去反馈
  • 前提条件
  • 实现流程
  • 流程概览
  • 步骤1: 集成 SDK
  • 步骤2:初始化 SDK
  • 步骤3:登录圈组
  • 步骤4:实现圈组消息收发
  • 后续步骤
  • 相关文档