IM 即时通讯
Web
产品介绍
简介
主要功能
产品优势
海外数据中心
IM平滑迁移方案
接口及业务限制
功能介绍
帐号集成与登录
基础消息功能
群组功能
聊天室功能
聊天室标签功能
多端登录与互踢策略
质量数据监控台
体验 Demo
下载 SDK 与 Demo 源码
更新日志
IM UIKit 更新日志
NIM SDK 开发版更新日志
NIM SDK 稳定版更新日志
快速开始
跑通 IM Demo 源码
实现 IM 文本消息收发(不含 UI)
含 UI 集成
什么是 IM UIKit
IM UIKit 功能概览
快速集成 IM UIKit
非React框架集成 IM UIKit
组件导入
初始化
全局上下文
登录相关
实现消息收发及界面自定义
集成会话列表界面
集成会话消息界面
集成用户资料组件
集成通讯录界面
集成搜索组件
非 React 框架自定义渲染
主题样式设置
语言设置
初始化(兼容 NIM SDK)
不含 UI 集成
集成 SDK
浏览器环境集成
Node.js集成
初始化与登录相关
初始化与登录 IM
IM 连接相关
多端登录与互踢
消息相关
消息概述
消息收发
消息配置选项
广播消息收发
消息已读回执
消息撤回
消息重发与转发
本地消息
通知消息
群通知消息
超大群通知消息
历史消息
最近会话
用户资料托管
好友关系托管
用户关系托管
在线状态订阅
群组功能
群组概述
群组管理
群成员管理
群消息管理
超大群功能
系统通知
系统通知概述
内置系统通知管理
内置系统通知未读数
自定义系统通知收发
开通聊天室功能
聊天室
反垃圾(内容审核)
域名高可用
融合存储方案
扩展功能
工具方法
最佳实践
聊天室重要消息投递
API参考
SDK API (Web)
IM UIKit Store API
状态码
IM 控制台指南
创建应用
注册 IM 账号
升级服务
开通聊天室功能
配置应用客户端标识
常见问题
FAQ
服务协议

浏览器环境集成

更新时间: 2023/02/14 10:09:32

网易云信 IM SDK(NetEase Instant Messaging SDK,NIM SDK(JavaScript) ) 为 PC 端 Web 应用、移动端 Web 应用,以及 Node.js、微信小程序等跨平台应用,提供完善的即时通信功能开发能力,屏蔽其内部复杂细节,对外提供较为简洁的 API 接口,方便您快速集成即时通信功能。

本文介绍如何快速将 NIM SDK 集成到您的浏览器项目中。

微信小程序 SDK 仍处于 Beta 阶段,如有需要,可联系商务经理或技术支持获取 SDK 和相应的集成文档。

开发环境要求

请确保您的开发环境满足如下要求:

  • IE 9+、Edge、Chrome 58+、 Safari 10+、Firefox 54+ 等主流桌面版浏览器。
  • iPhone 5s 以上机型(操作系统 iOS 8.0+)的 Safari 浏览器及其内置微信浏览器。
  • 主流机型 Android 5+ 系统的 Chrome 浏览器及其内置微信浏览器。
  • NIM SDK v5.0.0 以下版本兼容IE 8,v5.0.0 及以上版本需使用 IE 9+ 。
  • 如使用 IE 浏览器,需要将项目部署在 HTTPS 环境下才能连接到云信服务器。上述其他浏览器可以在 HTTP 或 HTTPS 环境下连接到云信服务器。

集成 SDK

方式1: npm 集成(推荐)

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

    npm install @yxim/nim-web-sdk@latest
    

    SDK 所包含的三个文件的说明如下:

    dist/SDK
    ├── NIM_Web_Chatroom.js       提供聊天室功能,浏览器适配版(UMD 格式)
    ├── NIM_Web_NIM.js       提供 IM 功能,包括单聊、会话和群聊等,但不包含聊天室。浏览器适配版(UMD 格式)
    ├── NIM_Web_SDK.js       提供 IM 功能和聊天室功能的集成包,浏览器适配版(UMD 格式)
    
  2. 在代码中通过 import/require 引入您所需的 SDK 文件。

    具体如何根据业务需求选择 SDK 文件及相关注意事项,请参见下文的SDK 文件选择


    SDK 在工程中的调用示例:

    // 使用默认引入路径时,引入的是dist/SDK/NIM_Web_SDK.js。该入口包含 NIM 和 Chatroom 两个对象
    // 入口文件的区别请参考下文的"SDK文件选择"
    import SDK from '@yxim/nim-web-sdk'
    const nim = SDK.NIM.getInstance({
      // ...
    })
    
    // 如果只使用NIM,也可以只引入dist/SDK/NIM_Web_NIM
    import NIM from '@yxim/nim-web-sdk/dist/SDK/NIM_Web_NIM.js'
    const nim = NIM.getInstance({
      // ...
    })
    

    如果选用 webpack 或 babel 来打包,那么请使用 exclude 将 SDK 文件排除,避免 babel 二次打包引起的错误。

    对应的 Webpack 配置:

    // Webpack 参考配置
      module: {
        rules: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: '/node_modules/@yxim/nim-web-sdk',
            query: {
              presets: [
                // ...
              ],
              // ...
            }
            // ...
          },
          // ...
        ],
        // ...
      }
    

方式2:script 集成

  1. 前往云信 SDK 下载中心下载最新版 SDK。

    SDK 下载中心默认只提供最新版 SDK。如需其他版本,请联系商务经理或技术支持获取。

  2. 解压 SDK。SDK 解压后可得到以下三个文件(配图仅以 v9.8.0 为例):

    NIMwebSDK下载后的文件.png

    三个文件的说明如下:

    ├── NIM_Web_Chatroom.js       提供聊天室功能,浏览器适配版(UMD 格式)
    ├── NIM_Web_NIM.js       提供 IM 功能,包括单聊、会话和群聊等,但不包含聊天室。浏览器适配版(UMD 格式)
    ├── NIM_Web_SDK.js       提供 IM 功能和聊天室功能的集成包,浏览器适配版(UMD 格式)
    
  3. 将所需的 SDK 文件,传入script标签的src中即可。在下文中使用 window 对象属性即可获取对 SDK 的引用。

    具体如何根据业务需求选择 SDK 文件及相关注意事项,请参见下文的SDK 文件选择


    <!-- 例如 -->
    <script src="NIM_Web_SDK_vx.x.x.js">
    <script>
      var nim = SDK.NIM.getInstance({
        // ...
      })
    </script>
    

SDK文件选择

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

业务需求 需引入的模块 初始化方法
仅需常规 IM (单聊、群聊等) NIM_Web_NIM_vX.X.X.js 通过NIM.getInstance方法初始化 IM 实例
仅需聊天室 NIM_Web_Chatroom_vX.X.X.js 通过Chatroom.getInstance方法初始化聊天室实例
常规 IM 和聊天室都需要 NIM_Web_SDK_vX.X.X.js

引入 SDK 文件时,请勿同时引入以下两种文件组合

  • NIM_Web_SDK_vX.X.X.jsNIM_Web_Chatroom_v.X.X.X.js
  • NIM_Web_SDK_vX.X.X.jsNIM_Web_NIM_vX.X.X.js

后续步骤

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

相关信息

Demo 参考

云信在 Github 上提供了开源的 IM Demo(React / Vue),为您后续的 IM 集成提供参考。

SDK 使用须知

实例调用方式

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

  // 引入SDK类的引用以后,获取SDK对象实例
  var nim = SDK.NIM.getInstance({
    debug: true,
    appKey: appKey,
    account: account,
    token: token,
    // ...
  });

以发送点对点消息为例:

  var msg = nim.sendText({
    scene: 'p2p',
    to: account,
    text: 'hello',
    done: function sendMsgDone (error, msg) {
      // ...
    }
  });

事件通知方式

NIM SDK 通过两种方式通知上层 API 调用结果:回调(callback)和委托 (delegate),两种方式都只在主线程触发

  • 一般回调接口直接反映在相应接口的 done 参数上,调用时设置即可
  • 委托则需要您在合适时机,在初始化异步监听函数上进行处理。
  // 委托通知示例
  var nim = NIM.getInstance({
    // ... 此处省略其他配置
    onmsg: function (msg) {
      // 此处为委托消息事件,消息发送成功后,成功消息也在此处处理
    }
  });


  // 回调通知示例
  var msg = nim.sendText({
    scene: 'p2p',
    to: account,
    text: 'hello',
    done: function sendMsgDone (error, msg) {
      // 此处为回调消息事件,仅仅通知开发者,消息是否发送成功
    }
  });
此文档是否对你有帮助?
有帮助
我要吐槽
  • 开发环境要求
  • 集成 SDK
  • 方式1: npm 集成(推荐)
  • 方式2:script 集成
  • SDK文件选择
  • 后续步骤
  • 相关信息
  • Demo 参考
  • SDK 使用须知
  • 实例调用方式
  • 事件通知方式