Web/uni-app/小程序
更新时间: 2024/09/10 14:33:16
网易云信 IM SDK(NetEase Instant Messaging SDK,简称 NIM SDK)为 Web 应用开发者提供完善的即时通信功能开发能力,屏蔽其内部复杂细节,对外提供较为简洁的 API,方便您快速集成即时通信功能。
本文介绍如何快速将 NIM SDK 集成到您的 Web 项目中。
环境适配
NIM SDK 支持以下开发环境:
- 微软 IE(10+)
- 谷歌 Chrome(7+)
- 微软 Edge(12+)
- Mozilla Firefox(11+)
- 苹果 Safari(5+)
- DCloud uni-app
- 微信/支付宝/百度/抖音小程序
前提条件
对于 uni-app 和小程序而言,在开始集成前,请确保已在 微信公众平台 中进入小程序后台 > 开发 > 开发设置 > 服务器域名,将以下域名填入指定的 “request 合法域名” / “socket 合法域名” / “uploadFile 合法域名” / “downloadFile 合法域名” 中。
微信小程序必须使用该 lbs
地址: https://lbs.netease.im/lbs/wxwebconf.jsp
。
更多相关说明,请参见 配置服务器域名。
如果您需要在支付宝运行小程序,请在支付宝开发平台配置服务器域名。
配置分类 | 域名 | 说明 |
---|---|---|
request 合法域名 | https://lbs.netease.im | 请求 LBS 地址 |
https://wlnimsc0.netease.im | IM 必需 | |
https://wlnimsc0.netease.im:443 | IM 必需 | |
https://wlnimsc1.netease.im | 聊天室必需 | |
https://wlnimsc1.netease.im:443 | 聊天室必需 | |
https://statistic.live.126.net | 数据上报 | |
https://abt-online.netease.im | 用于 A/B Test | |
socket 合法域名 | wss://wlnimsc0.netease.im | IM 必需 |
wss://wlnimsc1.netease.im | 聊天室必需 | |
uploadFile 合法域名 | https://nos.netease.com https://fileup.chatnos.com https://oss.chatnos.com |
文件上传,如发送文件类消息 |
downloadFile合法域名 | https://nim-nosdn.netease.im https://nim.nosdn.127.net |
文件下载,如下载语音 |
集成 SDK
-
通过如下 npm 命令安装最新版 SDK。
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 -
若开发环境为浏览器,您应该按照下面的路径引入:
TypeScript
// 引入方式一:引入默认路径 import NIM from 'nim-web-sdk-ng' // 引入方式二:指定引入路径。该路径等效于默认路径 import NIM from 'nim-web-sdk-ng/dist/v2/NIM_BROWSER_SDK'
-
若开发环境为 uni-app,您应该按照下面的路径引入:
TypeScript
import NIM from 'nim-web-sdk-ng/dist/v2/NIM_UNIAPP_SDK'
-
若开发环境为小程序,由于小程序构建 npm 之后,只有默认路径文件才会被复制到 miniprogram_npm 中,而 IM SDK 小程序包不是默认路径。因此,您需要将
nim-web-sdk-ng/dist/v2
拷贝到项目的其它目录中,然后引入:TypeScript
import NIM from '{相对路径}/NIM_MINIAPP_SDK'
-
初始化实例
将 NIM SDK 集成到客户端后,您需要先完成 NIM 实例的初始化才能使用其他功能。
本文主要介绍 NIM_BROWSER_SDK
的初始化。示例代码如下:
-
浏览器环境,及运行在非小程序的 uni-app 环境,使用下面方式初始化:
TypeScript
const nim = NIM.getInstance({ appkey: "YOUR_APPKEY", debugLevel: "debug", apiVersion: "v2" })
-
小程序环境,及运行在小程序的 uni-app 环境,使用下面方式初始化。之所以小程序需要和非小程序区分,是因为小程序需要设置域名白名单,因此需要返回固定域名的 lbs 请求地址。
TypeScript
const nim = NIM.getInstance({ appkey: "YOUR_APPKEY", debugLevel: "debug", apiVersion: "v2" }, { V2NIMLoginServiceConfig: { "lbsUrls": [ "https://lbs.netease.im/lbs/wxwebconf.jsp" ], "linkUrl": "wlnimsc0.netease.im" } })
-
下面代码演示如何登录,以及通过
onLoginStatus
事件来监听登录状态变化。TypeScript
nim.V2NIMLoginService.on('onLoginStatus', function(arg1) { console.log('收到 V2NIMLoginService 模块的 onLoginStatus 事件', arg1) }) await nim.V2NIMLoginService.login("YOUR_ACCOUNT", "YOUR_TOKEN")
-
登录后,发送点对点消息。
TypeScript
const message = nim.V2NIMMessageCreator.createTextMessage("hello") const res = await nim.V2NIMMessageService.sendMessage(message, 'YOUR_ACCOUNT|1|RECEIVER_ACCOUNT')