集成方式


集成

可以通过以下三种方式引用web sdk,其中后两种为版本1.4.5新增的引用方式:

  1. 将文件复制到本地,引用本地文件;
  2. 添加<script>标签,引用线上文件;
  3. 使用NPM。

引用本地文件

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

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

<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.5.js'></script>

说明:Web SDK V1.4.5向下兼容V1.1.2和V1.1.1。关于详细的引用文件和配置参数的方法,请查看本页“兼容性”的内容。

添加<script>标签

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

<script src='http://downloads.easemob.com/downloads/cdn/websdk-1.4.5.js'></script>
or
<script src='http://downloads.easemob.com/downloads/cdn/websdk-1.4.5.min.js'></script>

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

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

NPM

web sdk已发布到NPM。采用如下方法集成:

1. 通过npm安装web sdk。

npm install easemob-websdk --save

2. 先require,再访问WebIM。

require('easemob-websdk'); 

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

配置

在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

isMultiLoginSessions: false,              // 是否开启多页面同步收消息

isAutoLogin: true                         // 自动上线,(如设置为false,则表示离线,无法收消息)

注:建议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

第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;

导入第三方表情包

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'
    }
};


上一页:Web IM 介绍

下一页:Web SDK基础功能