Web

实现单聊消息收发(不含 UI)

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

网易云信 IM 即时通讯服务提供一整套即时通讯基础能力,助您快速实现多样化的即时通讯场景。

本文主要介绍通过集成 NetEase IM SDK(NIM SDK)并调用 API,快速实现单聊消息收发功能。

前提条件

实现流程

流程概览

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

uml diagram

步骤 1:集成 SDK

SDK 以 npm 包的形式提供,请前往 nim-web-sdk-ng 获取 npm 包。

  1. 执行以下命令安装 npm 包。
npm install nim-web-sdk-ng@latest
  1. 引入 IM 功能模块 SDK。
开发需求
环境
引入 SDK
IM 功能 浏览器 import NIMSDK from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK'
IM 功能 uniapp import NIMSDK from 'nim-web-sdk-ng/dist/NIM_UNIAPP_SDK'

步骤 2:初始化 SDK

将 NIM SDK 集成到客户端后,需要先完成 NIM 实例的初始化才能使用其他功能。

本文主要介绍 NIM_BROWSER_SDK 的初始化。示例代码如下:

const nim = new NIMSDK({
  appkey: 'YOUR_APPKEY',  // 应用的 App Key
  account: 'YOUR_ACCID', // 获取到的 IM 账号
  token: 'YOUR_TOKEN',   // 获取到的 token
  debugLevel: 'debug',  // 日志级别
});

以上提供了一个简化的初始化示例,更多 NIM 实例的初始化说明,参见初始化并登录 IM

步骤 3:登录 IM

登录前,需要监听 msg 事件。同时,您也可以监听其他事件,具体事件类型,请参见IMEventInterface。示例代码如下:

// 事件声明
  const eventList = [
    'msg',//接收消息事件
  ]
  nim.on('msg', function(msg) { console.log('Receive msg: ', msg) })

SDK 相关事件必须在 connect(登录)前声明才会生效,声明方式可以参考初始化中 eventList 中的内容。

监听完成后,登录 SDK。示例代码如下:

await nim.connect();

登录完成后,SDK 会发起同步操作,比如向服务端同步漫游消息,离线消息,好友关系等。同步的过程中会触发 syncdone 事件。您可以通过初始化的 NIMOtherOptions 中的 SyncOptions 来控制同步的内容。

步骤 4:单聊消息收发

本节以用户 A 和用户 B 的消息交互为例,介绍快速实现单聊消息收发的流程。

  1. 用户 A 向用户 B 发送消息。

目前 IM Web Elite SDK 支持多种消息类型,包括文本消息、图片消息、语音消息、视频消息、文件消息、地理位置消息、提示消息、通知消息以及自定义消息。具体请参见消息收发。 这里主要以发送文本消息为例,示例代码如下:

jsawait nim.msg.sendTextMsg({
  "scene": "p2p",
  "to": "ACCOUNT_ID",//消息接收者账户ID
  "body": "this is a text",
  "onSendBefore": function(msg) {
    console.log('Get msg before send', msg)
  }
})

SDK 通过调用 sendTextMsg 方法实现消息发送功能。

  1. 监听接口根据实际情况触发接收消息事件,用户 B 收到文本消息。

  2. (可选)用户登出/销毁实例。

js// 断开
await nim.disconnect()

setTimeout(function() {
  // 断开后仍旧可以 connect 成功
  await nim.connect()

  // 销毁后就无法再次 connect 建立长连接,需要再次 new 一个实例。
  await nim.destroy()
}, 5000)

后续步骤

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

常见问题

  • 执行 npm 命令安装 SDK 失败,出现以下报错信息。

download.png

出现该问题是由用户侧环境导致,请按照提示执行 npm fundnpm audit fix即可。

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