这是本文档旧的修订版!
Web IM 集成介绍
搭建本地测试环境
搭建环境之前需要对环信提供的参考文档有个初步的了解,主要为以下形式,请根据下面的关键字选择源码参考
- 基于 react 开发的完整的实时 Demo ,关键字:至少 IE9 ,完整流程,webpack+react
1. 首先将本源码克隆到本地
$ git clone https://github.com/easemob/webim.git
2. 去官网安装NodeJS,建议4+
- 因为整套代码需要依赖于npm NodeJS 的包管理工具,安装 NodeJS 会默认安装 NPM 工具
3. 定位到 webim/demo 目录 在终端执行下面的命令,安装测试所需要的依赖模块
- 保证此过程没有 error 终止为成功,如果有错误中断,请保留错误日志并再次尝试,大多数情况是网络原因导致的无法连接而中断
npm i
4. 上述步骤成功后
# 启动测试环境
npm start (如果需要https 通过HTTPS=true npm start启动)
# 打包发布,发布后文件在 webim/demo/build 目录下
npm run build
5. 浏览器访问即可看到测试页面:
- https:https://localhost:3001/
集成
可以通过以下2种方式引用 Web SDK:
- 使用 NPM
- 将文件复制到本地,引用本地文件
NPM
Web SDK已发布到NPM。采用如下方法集成:
1. 通过 NPM 安装 Web SDK。
npm install easemob-websdk --save
2. 先 import ,再访问 Web IM 。
import websdk from "easemob-websdk"
注:该方式只引用了 Web SDK ,仍需在项目里配置 WebIMConfig 文件内的参数,用于实例化 websdk。
引用本地文件
1. 下载demo后,将 /demo/simpleDemo下的 webimSDK.js、EMedia_x1v1.js、EMedia_sdk-dev.js 拷贝到系统相应的目录下。
2.新版本中 WebIMConfig 文件只做参数定义方便实例化 SDK 时使用,仅与自己项目结构有关。详细使用可以查看 /demo/src/config/WebIM.js文件
3. 新建 html 文件并引入相关 js 脚本。
<script type='text/javascript' src='WebIMConfig.js'></script>
<script type='text/javascript' src='webimSDK.js'></script>
注意:Web SDK 向下兼容V1.1.2和V1.1.1。关于详细的引用文件和配置参数(WebIMConfig)的方法,请查看本页“兼容性”的内容。
配置
在 webim.config.js 文件内进行以下配置:
xmppURL: 'im-api.easemob.com', // xmpp Server地址,对于在console.easemob.com创建的appKey,固定为该值
apiURL: 'http://a1.easemob.com', // rest Server地址,对于在console.easemob.com创建的appkey,固定为该值
appkey: 'easemob-demo#chatdemoui', // App key
https : false, // 是否使用https
isHttpDNS: true, //防止DNS劫持从服务端获取XMPPUrl、restUrl
isMultiLoginSessions: false, // 是否开启多页面同步收消息,注意,需要先联系商务开通此功能
isAutoLogin: true, // 自动出席,(如设置为false,则表示离线,无法收消息,需要在登录成功后手动调用conn.setPresence()才可以收消息)
isDebug: false, // 打开调试,会自动打印log,在控制台的console中查看log
autoReconnectNumMax: 2, // 断线重连最大次数
autoReconnectInterval: 2, // 断线重连时间间隔
heartBeatWait: 4500, // 使用webrtc(视频聊天)时发送心跳包的时间间隔,单位ms
delivery: true, // 是否发送已读回执
注:建议 xmppURL、apiURL、https 三个参数统一,否则 IE9 以下会报拒绝访问的错误。
例:
- https: false
xmppURL: 'im-api.easemob.com',
apiURL: 'http://a1.easemob.com',
appkey: 'easemob-demo#chatdemoui',
https : false,
isMultiLoginSessions: false
isAutoLogin: true
- https: true
xmppURL: 'im-api.easemob.com',
apiURL: 'https://a1.easemob.com',
appkey: 'easemob-demo#chatdemoui',
https : true,
isMultiLoginSessions: false
isAutoLogin: true
兼容性
兼容V1.1.2
Web SDK V1.4.5 向下兼容 V1.1.2。如果直接用 V1.1.2 的 Demo 嵌入 V1.4.5 的 SDK ,需要修改旧的 webim.config.js,在第一行WebIM.config = {
的前面插入一行var WebIM = {};
。完成后,示例如下:
var WebIM = {};
WebIM.config = {
兼容V1.1.1
Web SDK V1.4.5 向下兼容 V1.1.1。从V1.1.1升级到V1.4.5时,需要做如下操作:
第1步:修改引入的 SDK 文件
1. 下载 Web SDK V1.4.5 并解压后,将 /sdk/dist/websdk-1.4.5.js 和 /sdk/disk/websdk.shim.js 拷贝到系统相应的目录下。
2. 在原来的引用 SDK 的 html 文件中增加一行代码 window.WebIM = {};
,并使用上述两个文件替换原来引用的 SDK 的 js 文件。
替换前:
<!--sdk相关的js-->
<script type='text/javascript' src='static/sdk/strophe.js'></script>
<script type='text/javascript' src='static/sdk/easemob.im-1.1.1.js'></script>
<script type='text/javascript' src='static/sdk/easemob.im.shim.js'></script>
<!--webim相关配置-->
<script type='text/javascript' src='static/js/easemob.im.config.js'></script>
替换后:
<!--sdk相关的js-->
<script type='text/javascript' src='static/sdk/strophe.js'></script>
<script>
window.WebIM = {}; // 这行代码需要加在引用strophe.js文件的代码后面
</script>
<script type='text/javascript' src='static/sdk/websdk-1.4.5.js'></script>
<script type='text/javascript' src='static/sdk/websdk.shim.js'></script>
<!--webim相关配置-->
<script type='text/javascript' src='static/js/easemob.im.config.js'></script>
3. 将 easemob.im.config.js 文件中的参数 multiResources
修改为 isMultiLoginSessions
。