====== 集成方式 ======

----

===== 集成 =====

可以通过以下三种方式引用web sdk，其中后两种为从版本1.4.5开始新增的引用方式：

  - 将文件复制到本地，引用本地文件；
  - 添加<script>标签，引用线上文件；
  - 使用NPM。

==== 引用本地文件 ====

1. 下载web sdk并解压后，将 /sdk/dist/strophe-1.2.8.min.js、/sdk/dist/websdk-1.4.11.js、/demo/javascript/dist/webim.config.js 拷贝到系统相应的目录下。

2. 新建 html 文件并 严格按照如下顺序 引入相关 js 脚本。

<code html>
<script type='text/javascript' src='webim.config.js'></script>
<script type='text/javascript' src='strophe-1.2.8.min.js'></script>
<script type='text/javascript' src='websdk-1.4.11.js'></script>
</code>

说明：Web SDK V1.4.5向下兼容V1.1.2和V1.1.1。关于详细的引用文件和配置参数的方法，请查看本页“兼容性”的内容。
==== 添加<script>标签 ====

1. 添加以下''<script>''标签。

<code html>
<script src='http://downloads.easemob.com/downloads/cdn/websdk-1.4.11.js'></script>
</code>

2. 通过webIM命名空间访问websdk。

注意：该方式只引用了web sdk，仍需在本地引用config和strophe文件，并配置config文件内的参数。

==== NPM ====

web sdk已发布到[[https://www.npmjs.com/package/easemob-websdk|NPM]]。采用如下方法集成：

1. 通过npm安装web sdk。

<code>
npm install easemob-websdk --save
</code>

2. 先require，再访问WebIM。

<code javascript>
require('easemob-websdk'); 
</code>

注意：该方式只引用了web sdk，仍需在本地引用config和strophe文件，并配置config文件内的参数。

===== 配置 =====

在webim.config.js文件内进行以下配置：

<code javascript>
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

isMultiLoginSessions: false,              // 是否开启多页面同步收消息，注意，需要先联系商务开通此功能

isAutoLogin: true,                        // 自动出席，（如设置为false，则表示离线，无法收消息，需要在登录成功后手动调用conn.setPresence()才可以收消息）

isDebug: false,                           // 打开调试，会自动打印log，在控制台的console中查看log

autoReconnectNumMax: 2,                   // 断线重连最大次数

autoReconnectInterval: 2,                 // 断线重连时间间隔

heartBeatWait: 4500,                       // 使用webrtc（视频聊天）时发送心跳包的时间间隔，单位ms

delivery: true,                           // 是否发送已读回执

</code>
//注：建议xmppURL、apiURL、https三个参数统一，否则ie9以下会报**拒绝访问**的错误。//


**例：**

  * https: false
<code javascript>
xmppURL: 'im-api.easemob.com',

apiURL: 'http://a1.easemob.com',

appkey: 'easemob-demo#chatdemoui',

https : false, 

isMultiLoginSessions: false

isAutoLogin: true

</code>

  * https: true

<code javascript>
xmppURL: 'im-api.easemob.com',

apiURL: 'https://a1.easemob.com',

appkey: 'easemob-demo#chatdemoui',

https : true, 

isMultiLoginSessions: false 

isAutoLogin: true

</code>

===== 兼容性 =====

==== 兼容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 = {};''。完成后，示例如下：

<code javascript>
  var WebIM = {};
  WebIM.config = {
</code>

==== 兼容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文件。

替换前：

<code html>
<!--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>
</code>

替换后：

<code html>
<!--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>
</code>

3. 将easemob.im.config.js文件中的参数''multiResources''修改为''isMultiLoginSessions''。

=== 第2步：修改websdk-1.4.5.js文件 ===

1. 在sdk文件下搜索''%%/%%%%/%%class''，将下面的''connection = function connection(options)'' 改成''window.WebIM.connection = function connection(options)''

2. 在sdk文件下搜索''connection.prototype.registerUser = function (options)''，在上面一行添加''var connection = window.WebIM.connection;''


===== 导入第三方表情包 =====
在项目下面新建一个文件夹，用于存放表情图片文件。
在引用了sdk之后执行如下代码：
<code javascript>
WebIM.Emoji = {
    path: 'demo/images/faces/'  /*表情包路径*/
    , map: {
        '[):]': 'ee_1.png',
        '[:D]': 'ee_2.png',
        '[;)]': 'ee_3.png',
        '[:-o]': 'ee_4.png',
        '[:p]': 'ee_5.png'
    }
};
</code>

全局变量WebIM添加一个Emoji属性，path表示你表情图片存放的路径，map里面的key表示代表表情图片的字符，value表示表情图片的文件名。

发送和接收表情消息与文本消息类似，如果发送的文本消息中带有表情的key字符，sdk会将此消息转换成表情图片的实际路径，如：文本消息中包含"[):]"字符串，则解析为WebIM.Emoji.path+WebIM.Emoji.map['[):]']= "demo/images/faces/ee_1.png"。

----
<WRAP group>
<WRAP half column>
上一页：[[im:400webimintegration:10webimintro|Web IM 介绍]]
</WRAP>

<WRAP half column>
下一页：[[im:400webimintegration:25intiate|Web SDK基础功能]]
</WRAP>
</WRAP>