浏览器环境集成

更新时间: 2024/04/17 15:00:35

网易云信 IM SDK(NetEase Instant Messaging SDK,NIM SDK)为 Web 环境 SDK,提供完善的即时通信功能开发能力,屏蔽其内部复杂细节,对外提供较为简洁的 API 接口,方便您快速集成即时通信功能。

本文介绍如何快速将 NIM SDK 集成到你的 Web 项目中。

支持开发环境

IE 9+、Chrome 4+、Edge 12+、Firefox 11+、Safari 5+、uni-app、微信、阿里、百度、抖音小程序等。

集成 SDK

集成步骤

  1. 通过如下 npm 命令安装最新版 SDK。

    npm install nim-web-sdk-ng@">=10"
    

    SDK 所包含的文件如下:

    • dist/v1
      • CHATROOM_BROWSER_SDK 聊天室浏览器版本
      • CHATROOM_MINIAPP_SDK 聊天室小程序版本
      • CHATROOM_UNIAPP_SDK 聊天室UniApp版本
      • QCHAT_BROWSER_SDK QChat浏览器版本
    • dist/v2
      • CHATROOM_BROWSER_SDK 聊天室浏览器版本
      • CHATROOM_MINIAPP_SDK 聊天室小程序版本
      • CHATROOM_UNIAPP_SDK 聊天室UniApp版本
      • NIM_BROWSER_SDK IM浏览器版本
      • NIM_MINIAPP_SDK IM小程序版本
      • NIM_UNIAPP_SDK IM UniApp版本
  2. 通过 import 或者 require 引入入口模块。

// 引入 NIM SDK V10(通过默认入口引入)
import NIM from 'nim-web-sdk-ng'
// 引入 NIM SDK V10(通过文件路径引入,等效于默认入口)
import NIM from 'nim-web-sdk-ng/dist/v2/NIM_BROWSER_SDK'

SDK 文件选择

请根据下表的说明引入您所需的 SDK 文件。初始化不同 SDK 文件,需调用不同的 SDK API。

业务场景 需引入的模块 初始化方法
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

后续步骤

完成 SDK 集成后,需初始化登录 IM

相关信息

实例调用方式

集成 NIM SDK 后,所有 SDK 能力均通过 NIM SDK 单例调用,例如:

javascriptimport NIM from 'nim-web-sdk-ng'

const params1 = {
  "appkey": "YOUR_APPKEY",
  "debugLevel": "debug",
  "apiVersion": "v2"
}
const nim = window.NIM.getInstance(params1)
nim.V2NIMLoginService.on('onLoginStatus', function(arg1) {
  console.log('收到 V2NIMLoginService 模块的 onLoginStatus 事件', arg1)
})
await nim.V2NIMLoginService.login("YOUR_ACCOUNT", "YOUR_TOKEN")

以发送点对点消息为例:

javascriptconst message = nim.V2NIMMessageCreator.createTextMessage("hello")
const res = await nim.V2NIMMessageService.sendMessage(message, 'YOUR_ACCOUNT|1|RECEIVER_ACCOUNT')
此文档是否对你有帮助?
有帮助
去反馈
  • 支持开发环境
  • 集成 SDK
  • 集成步骤
  • SDK 文件选择
  • 后续步骤
  • 相关信息
  • 实例调用方式