====== Web SDK V1.1.1 集成说明 ======

----

<WRAP round info>
**注意：**

这是 Web SDK V1.1.1 版本的集成说明，仅供未升级 Web SDK 版本的老用户参考。如果您是 Web SDK 的新用户，请集成 Web SDK 的最新版本（V1.1.2及以上），并阅读最新版集成说明：[[start:400webimintegration:10webimintro|Web IM 介绍]]。
</WRAP>

====== Web IM 介绍 ======


===== 什么是环信 Web IM Demo =====

环信Web IM Demo 展示了怎样使用环信 Web IM SDK 快速创建一个完整的类微信网页聊天示例。展示的功能包括：登录、登出、操作好友、收发个人消息、群组消息。

环信 Web IM 源代码已在 GitHub 上开源供开发者下载 https://github.com/easemob/web-im，以帮助开发者更好的学习了解环信 SDK。

也可登录 http://webim.easemob.com 对 Web IM 进行体验，账号为环信 Demo 的账号（与 Android、iOS 的 Demo 账号相通）。

===== 下载环信 Web IM Demo =====

  - 下载环信 Web IM 及 SDK：[[http://www.easemob.com/download/im|下载]]
  - 解压缩 WEB-IM.zip 后会得到以下目录结构：

{{:start:400webimintegration:333.jpg?nolink|Web IM SDK目录结构}}

===== 运行环信 Web IM =====

运行之前，需要调整 AppKey，打开 static/js/easemob.im.config.js，找到：

<code javascript>
    appKey : 'easemob-demo#chatdemoui'
</code>

将这里的值做相应调整。

运行方式有两种：

  * 直接使用浏览器打开 index.html 文件。(注：ie8、9需要使用第二种方式)
  * 将解压缩的文件夹目录部署到 web 服务器通过 URL 访问 index.html。

===== Web IM 功能演示 =====

功能操作页面如下：

登录：

登录可以使用 APP 用户的账号和密码。

{{:start:400webimintegration:webim_zm.jpg?nolink|登录web IM demo}}

发送文本及表情消息：

{{:start:400webimintegration:webim_emotion.png?nolink|发送文本及表情消息}}

发送图片消息页面：

{{:start:400webimintegration:webim_mess.png?nolink|发送图片消息}}

个人聊天页面：

{{:start:400webimintegration:webim_page.png?nolink|与好友聊天}}

群组聊天：

{{:start:400webimintegration:webim_group.png?nolink|群组聊天}}

操作菜单：

{{:start:400webimintegration:webim_bar.jpg?nolink|操作菜单}}

申请添加好友通知：

收到添加为好友请求通知，可以进行“同意”、“拒绝”处理，默认为双向添加互为好友。

{{:start:400webimintegration:webim_notice.jpg?nolink|申请添加好友通知}}

删除好友操作：

输入要删除的好友账号。

{{:start:400webimintegration:webim_del.jpg?nolink|删除好友}}

===== Web IM 功能说明 =====

easemob webim sdk 已支持如下功能：

1. SDK 本身已支持 IE8+、FireFox10+、Chrome15+、Safari6+ 之间文本、表情、图片、音频消息相互发送；

2. SDK 支持 Web 端之间，Web 端与 Android 端/iOS 端相互添加、删除好友功能。

3. SDK 支持与 iOS、Android SDK 之间相互发送文本、图片、音频、地址消息。

4. SDK 提供的公共方法参见解压后 SDK 目录中的 quickstart.md。

5. SDK 对于消息的处理方式如下：

1）文本消息，直接发送，接收方接收到为文本消息。

2）表情消息，SDK 得到表情对应的编码后，发送的文本消息，接收方接收到后处理根据编码还原表情。

3）图片消息，SDK 上传图片到聊天服务器，然后发送图片基本信息消息，消息中带有发送方上传的图片 URL 等，接收方根据图片 URL、secret 和自身的登录信息，以流的形式从服务器上下载图片到本地显示。

4）音频消息，SDK 上传音频到聊天服务器，然后发送音频基本消息消息，消息中含有发送方上传的音频 URL 等，接收房根据音频 URL、secret 和自身的登录信息，以流的形式从服务器上下载音频到本地播放。

6. 提供 demo，方便大家参考，已实现聊天添加/删除好友/群组功能。

7. 目前ie10+、chrome、safari、firefox等各浏览器均已支持直接播放MP3格式。

浏览器支持列表：

●：支持

○：不支持

^Browser\Func	^Text Message	^Emotion Message	^Picture Message	^Audio Message	^Add Friend	^Delete Friend^
|IE8	|●	|●	|●	|○	|●	|●|
|IE9	|●	|●	|●	|○	|●	|●|
|IE10	|●	|●	|●	|●	|●	|●|
|IE11	|●	|●	|●	|●	|●	|●|
|FireFox10+	|●	|●	|●	|●	|●	|●|
|Chrome15+	|●	|●	|●	|●	|●	|●|
|Safari5X	|●	|●	|●	|●	|●	|●|
|Safari6X	|●	|●	|●	|●	|●	|●|
|Safari7X	|●	|●	|●	|●	|●	|●|
|Safari8X	|●	|●	|●	|●	|●	|●|


备注：

  * demo中允许发送的图片格式：GIF、PNG、JPG、BMP；
  * demo中允许发送的音频格式：MP3、WMA、WAV、AMR、AVI。

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

----

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

  - 下载 web-im-1.1.1.zip 解压后需将 webim-im-1.1.1 文件夹拷贝到系统相应的目录下。
  - 新建 html 文件并参考webim-im-1.1.1下index.html引入相关脚本。


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


下面以用户登录、发送文本消息、操作好友为例引导用户完成 Web IM SDK 的简单使用。

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

配置项在static/js/easemob.im.config.js文件内

<code javascript>
xmppURL: 'im-api.easemob.com',    // 环信xmppURL，1.1.0版本之前的客户需配置成：'ws://im-api.sandbox.easemob.com/ws/' 或 'wss://im-api.easemob.com/ws/'

apiURL: 'http://a1.easemob.com',          // rest api地址

appkey: "easemob-demo#chatdemoui",        // appkey

https : false,                            // 是否使用https

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

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


**例：**

  * https: false
<code javascript>
xmppURL: 'im-api.easemob.com',    // 环信xmppURL，1.1.0版本之前的客户需配置成：'ws://im-api.sandbox.easemob.com/ws/'

apiURL: 'http://a1.easemob.com',          // rest api地址

appkey: "easemob-demo#chatdemoui",        // appkey

https : false,                            // 是否使用https

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

</code>

  * https: true

<code javascript>
xmppURL: 'im-api.easemob.com',    // 环信xmppURL，1.1.0版本之前的客户需配置成：'wss://im-api.sandbox.easemob.com/ws/'

apiURL: 'https://a1.easemob.com',          // rest api地址

appkey: "easemob-demo#chatdemoui",        // appkey

https : true,                            // 是否使用https

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

</code>





===== 注册 =====

根据用户名/密码/昵称注册环信 Web IM。新建注册页面 html 元素。

<code html>
<div id="regist-box">
	user<input type="text" id="usename" />
	password<input type="password" id="password" />
	nickname<input type="text" id="nickname" />
	<input type="button" value="regist"  id="regist" />
</div>
</code>

编写注册按钮调用 js 函数。

<code javascript>
  $("#regist").on('click', function() {
	var options = {
		username : 'zjj8',
		password : '123456',
		appKey : 'easemob-demo#chatdemoui',
		success : function(result) {
				//注册成功;
		},
		error : function(e) {
				//注册失败;
		}
	};
	Easemob.im.Helper.registerUser(options);
  });
</code>

===== 登录 =====

根据用户名/密码登录环信 Web IM。新建用户名密码 html 元素。

<code html>
<div id="login-box">
	user<input type="text" id="usename"/>
	password<input type="password" id="password"/>
	<input type="button" value="login" id="login" />
</div>
</code>

编写登录按钮调用 js 函数。

<code javascript>
$('login').on('click', function() {
	//预留空现实
})
</code>

首先获取用户名/密码 input 框中的输入值。

<code javascript>
var username = $("#usename").val();
var pass = $("#password").val();
</code>

创建一个新的连接。

<code javascript>
var conn = new Easemob.im.Connection();
</code>

初始化连接。

<code javascript>
 conn.init({
     //预留空现实
 });
</code>

在 init 方法中添加 onOpened 回调函数，处理登录信息。

<code javascript>
//当连接成功时的回调方法
onOpened : function() {
	alert("成功登录");
	conn.setPresence();
}
</code>

登录完整 JS 调用代码如下。

<code javascript>
$(function() {
        var conn = null;
        conn = new Easemob.im.Connection();
        $('body').on('click', '#login', function() {
                var username = $("#usename").val();
                var pass = $("#password").val();
                conn.open({
                        user : username,
                        pwd : pass,
                        appKey : 'easemob-demo#chatdemoui'
                });
        })
        conn.init({
                onOpened : function() {
                        alert("成功登录");
                        conn.setPresence();
                }
        });
});
</code>

===== 消息 =====

==== 发送文本消息 ====

创建消息 div。

<code html>
<div id="content">
	消息内容<textarea id="text"></textarea>
    sendTo <input type="text" id="sendto"/>
    <button id="send">发送</button>
</div>
</code>

编写发送文本消息 js 函数。

<code javascript>
$("#send").on('click',function(){
	sendText();
	});
var sendText = function() {
	var msg = $('textarea').val();
	var to = $("#sendto").val();
	var options = {
		to : to,
		msg : msg,
		type : "chat"
	};
    //发送文本消息接口
	conn.sendTextMessage(options);
};
</code>

登录成功后发送文本消息完整 JS 调用代码如下。

<code javascript>
	$(function(){
		var conn = null;
		conn = new Easemob.im.Connection();
		$('body').on('click','#login',function(){
			var username = $("#usename").val();
			var pass = $("#password").val();
			conn.open({
				user : username,
				pwd : pass,
				appKey : 'easemob-demo#chatdemoui'
			});
		})
		conn.init({
			onOpened : function(){
				alert("成功登录");
				conn.setPresence();
			},
			onTextMessage : function(message){
				console.log(message);
				alert("发送消息成功");
			}
		})	
		$("#send").on('click',function(){
			sendText();
		})
		var sendText = function() {
			var msg = $('textarea').val();
			var to = $("#sendto").val();
			var options = {
				to : to,
				msg : msg,
				type : "chat"
			};
			conn.sendTextMessage(options);
		};
	});
</code>

==== 处理文本消息 ====

登录成功后收到文本消息的处理方法需要在 con.init 方法中调用 onTextMessage 回调函数。

<code javascript>
conn.init({
  //收到文本消息时的回调方法
  onTextMessage : function(message){
	//console.log(message);
	//alert("发送消息成功");		
   var from = message.from;//消息的发送者
   var mestype = message.type;//消息发送的类型是群组消息还是个人消息
   var messageContent = message.data;//文本消息体
   if (mestype == 'groupchat') {
		//进行群组消息页面处理	
	} else {
		//进行个人消息页面处理	
	}
 }
});
</code>

===== 好友 =====

==== 获取好友列表 ====

在 onOpened : function(){}; 中添加 getRoster 回调方法，添加获取当前登录人好友列表。

<code javascript>
conn.init({
	onOpened : function(){
		//alert("成功登录");
		//conn.setPresence();
		conn.getRoster({
	       success : function(roster) {
	      		// 获取当前登录人的好友列表
	      		for ( var i in roster) {
		  		  var ros = roster[i]; //好友的对象
		          //ros.name为好友名称
	     		 }
			}
		});
	}
});
</code>

将数组中的好友名称放入对应的 html 相应元素显示即可。

==== 添加好友 ====

=== 邀请发起方 === 

添加发起方，获取要添加好友名称，例如 addfridentId 为要添加的好友的 id。

<code javascript>
//addfridentId为页面上要添加好友的输入框html元素id值。
var user = $('#addfridentId').val();
</code>

添加好友按钮点击时调用 startAddFriend 函数。

<code javascript>
var startAddFriend = function() {
  var user = $('#addfridentId').val();
  //发送添加好友请求
  conn.subscribe({
	to : user,
	message : "加个好友呗"
  });
}
</code>

=== 邀请接受方 === 

被添加方，在 con.init 方法中调用 handlePresence 回调方法。

<code javascript>
conn.init({
	//收到联系人订阅请求的回调方法
	onPresence : function(message) {
		handlePresence(message);
	}
});


//easemobwebim-sdk中收到联系人订阅请求的处理方法，具体的type值所对应的值请参考xmpp协议规范
var handlePresence = function(e) {
//（发送者希望订阅接收者的出席信息）
	if (e.type == 'subscribe') {
		//同意添加好友操作的实现方法
		conn.subscribed({
			to : user,
		    message : "[resp:true]"
		});
		
		//拒绝添加好友的方法处理
		//conn.unsubscribed({
			//to : user,
			//message : "rejectAddFriend"
		//});
	}
};
</code>

==== 删除好友 ====

删除好友，首先获取好友名称，调用 removeRoster 方法。例如删除按钮触发时调用 delFriend 函数。

<code javascript>
var delFriend = function() {
	var user = $('#delfridentId').val();//获取要删除好友的名称
	conn.removeRoster({
		to : user,
		success : function() {
	 	 conn.unsubscribed({
			to : user
	     });
		},
		error : function() {
	   		//删除操作失败
		}
    });
}
</code>

===== 关闭连接 =====

当用户退出登录时需要调用 con.onClosed 回调函数。

<code javascript>
conn.init({
	//当连接关闭时的回调方法
	onClosed : function() {
		conn.clear();
		conn.onClosed();
	}
});
</code>

====== 初始化 ======

----

===== 创建连接 =====

<code javascript>
var conn = new Easemob.im.Connection();
</code>

===== 初始化连接 =====

<code javascript>
conn.init({
    https : true,//非必填，url值未设置时有效，优先采用url配置的参数。默认采用http连接，地址为‘http://im-api.easemob.com/http-bind/’，启用https时传递此值，地址为：‘https://im-api.easemob.com/http-bind/’
    url ： 'http://im-api.easemob.com/http-bind/',//非必填，默认聊天服务器地址，
    domain : 'aa.com',//非必填，默认：‘easemob.com’
    wait ： '60',//非必填，连接超时，默认：60，单位seconds
    onOpened : function() {
        curUserId = conn.context.userId;
        //查询好友列表
        conn.getRoster(....);
    },
    onClosed : function() {
        //处理登出事件
    },
    onTextMessage : function(message) {
        /**处理文本消息，消息格式为：
            {	type :'chat',//群聊为“groupchat”
                from : from,
                to : too,
                data : { "type":"txt",
                    "msg":"hello from test2"
                }
            }
        */
        handleTextMessage(message);
    },
    onEmotionMessage : function(message) {
        /*处理表情消息，消息格式为：
            {	type :'chat',//群聊为“groupchat”
                from : from,
                to : too,
                data : [{ "type":"txt",
                    "msg":"hello from test2"
                },
                { "type":"emotion",
                  "msg":"data:image/png;base64, ……"//图片的base64编码
                }]
            }
        */
        handleEmotion(message);
    },
    onPictureMessage : function(message) {
        /**处理图片消息，消息格式为：
            {	type :'chat',//群聊为“groupchat”
                from : "test1",
                to : "test2",
                url : "http://s1.easemob.com/weiquan2/a2/chatfiles/0c0f5f3a-e66b-11e3-8863-f1c202c2b3ae",
                secret : "NSgGYPCxEeOou00jZasg9e-GqKUZGdph96EFxJ4WxW-qkxV4",
                filename : "logo.png",
                thumb : "http://s1.easemob.com/weiquan2/a2/chatfiles/0c0f5f3a-e66b-11e3-8863-f1c202c2b3ae",
                thumb_secret : "0595b06a-ed8b-11e3-9b85-93fade9c198c",
                file_length : 42394,
                width : 280,
                height : 160,
                filetype : "image/png",
                accessToken :"YWMtjPPoovCqEeOQs7myPqqaOwAAAUaqNH0a8rRj4PwJLQju6-S47ZO6wYs3Lwo"
            }
        */

        handlePictureMessage(message);
    },
    onAudioMessage : function(message) {
        /**处理音频消息，消息格式为：
           {	type :'chat',//群聊为“groupchat”
                from : "test1",
                to : "test2",
                url : "http://s1.easemob.com/weiquan2/a2/chatfiles/0c0f5f3a-e66b-11e3-8863-f1c202c2b3ae",
                secret :"NSgGYPCxEeOou00jZasg9e-GqKUZGdph96EFxJ4WxW-qkxV4",
                filename : "风雨无阻.mp3",
                length :45223,
                file_length : 304,
                filetype : "mp3",
                accessToken :"YWMtjPPoovCqEeOQs7myPqqaOwAAAUaqNH0a8rRj4PwJLQju6-S47ZO6wYs3Lwo"
            }
        */
        handleAudioMessage(message);
    },
    //收到联系人订阅请求的回调方法
    onPresence : function (message){
        /**
            {
                from: "l2",
                fromJid: "easemob-demo#chatdemoui_l2@easemob.com",
                status: "下午11:44:47",
                to: "test1",
                toJid: "easemob-demo#chatdemoui_test1@easemob.com/13856640471403797405809685",
                type: "subscribed"
            }
        */
        handlePresence(message);
    },
    //收到联系人信息的回调方法
    onRoster : function (message){
        /**
            [{
                groups: [{0: "default",
                        length: 1}],
                jid: "easemob-demo#chatdemoui_l2@easemob.com",
                name: "l2",
                subscription: "to"
            }]
        */
        handleRoster(message);
    },
    onError : function(e) {
        //异常处理
        alert(e.msg);
    }
});
</code>

===== 打开连接 =====

支持 username/password 和 username/token 登录两种方式，SDK 中会根据传入的参数进行自动选择是否登录 usergrid，获取登录成功的 token 后再进行登录聊天，如果使用 token 的打开连接将跳过登录 usergird，直接登录 IM 服务器。

<code javascript>
//用户名
var user = $("#username").val();
//密码
var pass = $("#password").val();
if (user == '' || pass == '') {
    alert("请输入用户名和密码");
    return;
}
conn.open({
    user : user,
    pwd : pass,
    appKey : 'easemob-demo#chatdemoui'//开发者APPKey
    //accessToken : 'YWMt8bfZfFk5EeSiAzsQ0OXu4QAAAUpoZFOMJ66ic5m2LOZRhYUsRKZWINA06HI'
});
</code>

====== 单聊 ======

----

===== 好友 =====

==== 查询好友列表 ====

查询好友列表时，要注意 subscription（both、to、from）为不同值的处理，此处默认 both 和 to 的为好友，开发者自定义处理，保持跟 APP 端处理一致即可。

<code javascript>
conn.getRoster({
    success : function(roster) {
        //获取好友列表，并进行好友列表渲染，roster格式为：
        /** [
                {
                    jid:"asemoemo#chatdemoui_test1@easemob.com",
                    name:"test1",
                    subscription: "both"
                },
                {
                    jid:"asemoemo#chatdemoui_test2@easemob.com",
                    name:"test2",
                    subscription: "from"
                }
            ]
        */
        for(var i in roster){
            var ros = roster[i];    
            //ros.subscriptio值为both/to为要显示的联系人，此处与APP需保持一致，才能保证两个客户端登录后的好友列表一致
            if(ros.subscription =='both' || ros.subscription=='to'){
                newroster.push(ros);
            }
        }
        if (newroster.length >=0) {
            buildContactDiv("contractlist", newroster);//页面处理
            if (newroster.length > 0) {
                setCurrentContact(newroster[0].name);//页面处理将第一个联系人作为当前聊天div
            }
        }
        //conn.setPresence();
    },    
});
</code>

==== 添加好友 ====

通过 SDK 的 subscribe 和 unsubscribe 进行添加或者删除好友操作，登录用户通过注册 onPresence，监听对方的添加或者删除好友请求，并做相应的处理。

<code javascript>
//easemobwebim-sdk中收到联系人订阅请求的处理方法，具体的type值所对应的值请参考xmpp协议规范
var handlePresence = function (e){
	//（发送者希望订阅接收者的出席信息），即别人申请加你为好友
	if (e.type == 'subscribe') {
		//若e.status中含有[resp:true]，则表示为对方同意好友后反向添加自己为好友的消息，demo中发现此类消息，默认同意操作，完成双方互为好友；如果不含有[resp:true]，则表示为正常的对方请求添加自己为好友的申请消息。
		......
	}
	//(发送者允许接收者接收他们的出席信息)，即别人同意你加他为好友
	if (e.type == 'subscribed') {
		......
	}
	//（发送者取消订阅另一个实体的出席信息），即删除现有好友
	if (e.type == 'unsubscribe') {
		.......
	}
	//（订阅者的请求被拒绝或以前的订阅被取消），即对方单向的删除了好友
	if (e.type == 'unsubscribed') {
		.......
	}
};
</code>

==== 申请添加对方为好友 ====

<code javascript>
//主动申请添加对方为好友
var startAddFriend = function startAddFriend(){
    //对方用户账号
    var user = $("addfridentId").val();
    //请求添加对方为好友
    conn.subscribe({
		to : user,
		message : "加个好友呗-" + getLoacalTimeString()
	});
    return;
};
var getLoacalTimeString = function getLoacalTimeString() {
		var date = new Date();
		var time = date.getHours() + ":" + date.getMinutes() + ":"
				+ date.getSeconds();
		return time;
	}
</code>

==== 对方收到请求，同意或者拒绝 ====

<code javascript>
//对方收到请求加为好友，接受请求
$('#confirm-block-footer-confirmButton').click(function() {
	//同意好友请求
	agreeAddFriend(e.from);//e.from用户名
	//反向添加对方好友
	conn.subscribe({
		to : e.from,
		message : "[resp:true]"
	});
}
//同意
var agreeAddFriend = function agreeAddFriend(connection,who,jid){
   conn.subscribed({
			to : user,
			message : "[resp:true]"//同意后发送反加对方为好友的消息，反加消息标识[resp:true]
		});
};

//对方收到请求加为好友，拒绝请求
$('#confirm-block-footer-cancelButton').click(function() {
	rejectAddFriend(e.from);//拒绝加为好友
});
//拒绝
var rejectAddFriend = function(user) {
	conn.unsubscribed({
		to : user,
		message : getLoacalTimeString()
	});
};
</code>

对于好友的分组，添加好友时在 addroster 可以指定 group 属性（默认为：default 组），添加好友成功后，好友列表渲染时，根据好友的 group 属性进行分组渲染，实现类似其他聊天工具的自定义好友分组管理的功能。

==== 删除好友 ====

取消订阅，同时将对方从自己的好友列表上删除掉。

<code javascript>
var delFriend = function(user) {
	conn.removeRoster({
		to : user,
		groups : [ 'default' ],
		success : function() {
			conn.**unsubscribed**({
				to : user
			});
		}
	});
};
</code>

===== 消息 =====

==== 发送文本（表情）聊天消息 ====

<code javascript>
//发送文本消息
conn.sendTextMessage({
    to : to,//用户登录名，SDK根据appkey和domain组织jid，如easemob-demo#chatdemoui_**TEST**@easemob.com，中"to:TEST"，下同
    msg :'hello world！' //文本消息
    //ext :{"extmsg":"extends messages"}//用户自扩展的消息内容（群聊用法相同）
});

//发送表情消息，调用接口同文本消息
conn.sendTextMessage({
    to : to,
    msg :'hello world！[(*)][(#)]' //文本消息+表情
    //ext:{"extmsg":"extends messages"}//用户自扩展的消息内容（群聊用法相同）
});
</code>


==== 发送命令消息 ====

<code javascript>
//发送cmd消息
conn.sendCmdMessage({
    to : to,//用户登录名，SDK根据appkey和domain组织jid，如easemob-demo#chatdemoui_**TEST**@easemob.com，中"to:TEST"，下同
    msg :'hello world！' //文本消息
    action : 'action' //用户自定义，cmd消息必填
    //ext :{"extmsg":"extends messages"}//用户自扩展的消息内容（群聊用法相同）
});
</code>
==== 发送图片消息 ====

发送图片消息SDK自动分两步完成：

  - 上传图片文件到服务器，并得到服务返回的图片信息等；
  - 发送图片消息，消息体包含图片的基本信息、服务器路径、secret 等，接收方初始化连接中的 onPictureMessage 的格式，根据图片消息内容到服务器下载图片，并进行显示。

<code javascript>
function sendPic() {
    //图片接收者，如“test1”
    var to = curChatUserId;
    if (to == null) {
        alert("请选择联系人");
        return;
    }
    //fileInputId：文件选择输入框的Id，SDK自动根据ID自动获取文件对象（含图片，或者其他类型文件）
    var fileObj = Easemob.im.Helper.getFileUrl(fileInputId);
    if (fileObj.url == null || fileObj.url == '') {
        alert("请选择发送图片");
        return;
    }
    var filetype = fileObj.filetype;
    var filename = fileObj.filename;
    if (filetype in  {
                    "jpg" : true,
                    "gif" : true,
                    "png" : true,
                    "bmp" : true
                    }) {
        var opt = {
            fileInputId : fileInputId,
            to : to,
            onFileUploadError : function(error) {
                //处理图片上传失败
            },
            onFileUploadComplete : function(data) {
                //处理图片上传成功，如本地消息显示
            }
           // ext:{"extmsg":"extends messages"}//用户自扩展的消息内容（群聊用法相同）
        };
        conn.sendPicture(opt);
        return;
    }
    alert("不支持此图片类型" + filetype);
};
</code>

==== 发送音频消息 ====

SDK 处理同发送图片消息，分两步：

  - 上传音频文件到服务器，得到音频文件的信息；
  - 发送音频消息给接收方，消息体包含音频的基本信息、下载路径和 secret 信息等，接收方收到消息后，根据消息体内部的音频下载路径和 secret 路径，下载音频并进行显示。

<code javascript>
function sendAudio () {
    var to = curChatUserId;
    if (to == null) {
        alert("请选择联系人");
        return;
    }
    var fileObj = Easemob.im.Helper.getFileUrl(fileInputId);
    if (fileObj.url == null || fileObj.url == '') {
        alert("请选择发送音频");
        return;
    }
    var filetype = fileObj.filetype;
    var filename = fileObj.filename;
    if (filetype in {
                "mp3" : true,
                "wma" : true,
                "wav" : true,
                "avi" : true
                })
    {
        var opt = {
            fileInputId : fileInputId,
            to : to,
            onFileUploadError : function(error) {
                //处理上传音频失败
            },
            onFileUploadComplete : function(data) {
                //处理上传音频成功，如本地消息提示发送成功
            }
            //ext:{"extmsg":"extends messages"}//用户自扩展的消息内容（群聊用法相同）
        };
        conn.sendAudio(opt);
        return;
    }
    alert("不支持此音频类型" + filetype);
};
</code>

==== 接收消息 ====

注册接收消息。

<code javascript>
conn.init({
	onTextMessage : function(message) {        },//收到文本消息处理动作
    onEmotionMessage : function(message) {        },//收到表情消息处理动作
    onPictureMessage : function(message) {         },//收到图片消息处理动作
    onAudioMessage : function(message) {        }, //收到语音消息处理动作
	...
});
</code>

==== 处理消息 ====

conn.init() 中注册不同消息接收 handler 之后，可自行解析消息体，定位聊天好友，并追加到与其聊天窗口。具体参考 webim.easemob.com 效果，消息体格式参见前章节：初始化连接。

注：对于图片、语音消息需要先进行下载，然后进行显示或者播放处理。如下(下载图片，音频同)：

<code javascript>
var handlePictureMessage = function(message) {
var filename = message.filename;//文件名称，带文件扩展名
var from = message.from;//文件的发送者
var ext = message.ext;//获取用户的扩展信息（群聊用法相同）
var mestype = message.type;//消息发送的类型是群组消息还是个人消息
......
...
var options = message;
// 图片消息下载成功后的处理逻辑
options.onFileDownloadComplete = function(response, xhr) {
	var objectURL = window.URL.createObjectURL(response);
	img = document.createElement("img");
	img.onload = function(e) {
		img.onload = null;
		window.URL.revokeObjectURL(img.src);
	};
	img.onerror = function() {
		img.onerror = null;
		if (typeof FileReader == 'undefined') {
			img.alter = "当前浏览器不支持blob方式";
			return;
		}
		img.onerror = function() {
			img.alter = "当前浏览器不支持blob方式";
		};
		var reader = new FileReader();
		reader.onload = function(event) {
			img.src = this.result;
		};
		reader.readAsDataURL(response);
	}
	img.src = objectURL;
	var pic_real_width = options.width;
	......
	...
};
options.onFileDownloadError = function(e) {
	appendMsg(from, contactDivId, e.msg + ",下载图片" + filename + "失败");
};
Easemob.im.Helper.download(options);
</code>

==== 历史消息 ====

SDK 暂不具有缓存历史消息功能，demo 中聊天窗口只能显示，当前登录后会话实时在聊天信息，不能查看历史消息，可以对登录后的聊天信息进行清除操作。

==== 新消息提示 ====

SDK 在收到新消息是会直接转发给登录用户，接收到消息后，demo 中会在好友或者群组的后面显示红色消息数，具体样式开发者可自行处理。


====== 群聊 ======

----

===== 查询群组成员 =====

<code javascript>
//根据roomId查询room成员列表
var queryOccupants = function queryOccupants(roomId) {
    var occupants = [];//存放成员容器
    //查询获取room信息
    conn.queryRoomInfo({
        roomId : roomId,
        success : function(occs) {
            if (occs) {
                for ( var i = 0; i < occs.length; i++) {
                    occupants.push(occs[i]);
                }
            }
            //查询获取room成员信息
            conn.queryRoomMember({
                roomId : roomId,
                success : function(members) {
                    if (members) {
                        for ( var i = 0; i < members.length; i++) {
                            occupants.push(members[i]);
                        }
                    }
                }
            });
        }
    });
};
</code>

===== 发送文本（表情）聊天消息 =====

<code javascript>
//发送文本消息
conn.sendTextMessage({
    to : to, //目标群组id，如要把消息发到群id是169646349464111860的群中，to:'169646349464111860'，下同
    type : 'groupchat',
    msg :'hello world！' //文本消息
	
});

//发送表情消息，调用接口同文本消息
conn.sendTextMessage({
    to : to,
    type : 'groupchat',
    msg :'hello world！[(*)][(#)]' //文本消息+表情
});
</code>

===== 发送图片消息 =====

发送图片消息 SDK 自动分两步完成：

  - 上传图片文件
  - 发送图片消息初始化连接中的 onPictureMessage 的格式

<code javascript>
//发送图片消息时调用方法
var sendPic = function() {
    var to = curChatUserId;
    if (to == null) {
        return;
    }
    // Easemob.im.Helper.getFileUrl为easemobwebim-sdk获取发送文件对象的方法，fileInputId为 input 标签的id值
    var fileObj = Easemob.im.Helper.getFileUrl(fileInputId);
    if (fileObj.url == null || fileObj.url == '') {
        alert("请选择发送图片");
        return;
    }
    var filetype = fileObj.filetype;
    var filename = fileObj.filename;
    if (filetype in pictype) {
        document.getElementById("fileSend").disabled = true;
        document.getElementById("cancelfileSend").disabled = true;
        var opt = {
            type:'chat',
            fileInputId : fileInputId,
            to : to,
            onFileUploadError : function(error) {
                //处理图片上传失败
            },
            onFileUploadComplete : function(data) {
                //关闭文件选择窗口
                $('#fileModal').modal('hide');
                //本地缩略图
                var file = document.getElementById(fileInputId);
                if (file && file.files) {
                    var objUrl = getObjectURL(file.files[0]);
                    if (objUrl) {
                        var img = document.createElement("img");
                        img.src = objUrl;
                        img.width = maxWidth;
                    }
                }
            
            }
        };
        //判断是否为群组标识
        if (curChatUserId.indexOf(groupFlagMark) >= 0) {
            opt.type = 'groupchat';//群组标识符
            opt.to = curRoomId;
        }
        conn.sendPicture(opt);
        return;
    }
    alert("不支持此图片类型" + filetype);
};
</code>

===== 发送音频消息 =====

SDK 处理同群发送图片消息，分两步：

  - 上传音频
  - 发送消息

<code javascript>
//发送音频消息时调用的方法
var sendAudio = function() {
    var to = curChatUserId;
    if (to == null) {
        alert("请选择联系人");
        return;
    }
    //利用easemobwebim-sdk提供的方法来构造一个file对象
    var fileObj = Easemob.im.Helper.getFileUrl(fileInputId);
    if (fileObj.url == null || fileObj.url == '') {
            alert("请选择发送音频");
        return;
    }
    var filetype = fileObj.filetype;
    var filename = fileObj.filename;
    if (filetype in audtype) {
        document.getElementById("fileSend").disabled = true;
        document.getElementById("cancelfileSend").disabled = true;
        var opt = {
            type:"chat",
            fileInputId : fileInputId,
            to : to,//发给谁
            onFileUploadError : function(error) {
                //处理上传音频失败
            },
            onFileUploadComplete : function(data) {
                //处理上传音频成功，如本地消息提示发送成功
            }
        };
        //构造完opt对象后调用easemobwebim-sdk中发送音频的方法
        if (curChatUserId.indexOf(groupFlagMark) >= 0) {
            opt.type = 'groupchat';
            opt.to = curRoomId;
        }
        conn.sendAudio(opt);
        return;
    }
    alert("不支持此音频类型" + filetype);
};
</code>

===== 接收及处理消息 =====

群聊接收及处理消息同单聊，消息体与单聊消息根据 message 的 type 进行区分，单聊为：“chat”，群聊为：“groupchat”。根据消息的类型进行不同处理即可。

====== 聊天室 ======

===== 加入聊天室 =====

<code javascript>
conn.joinChatRoom({
    roomId: "roomId"//聊天室Id
});
</code>

===== 退出聊天室 =====

<code javascript>
conn.quitChatRoom({
    roomId: "roomId"//聊天室Id
});
</code>

===== 发送消息到聊天室 =====

<code javascript>
conn.sendTextMessage({
    to: "to",//目标user
    msg: "msg",//文本消息
    type: "groupchat",//必填字段，无需修改
    roomType: "chatroom"//必填字段，无需修改
}); 
</code>

===== 聊天室相关回调 =====

使用 handlePresence 方法中处理聊天室相关回调。

==== 加入成功 ====

<code javascript>
if ( e.type == 'joinChatRoomSuccess' ) {\\  
}
</code>

==== 加入失败 ====

<code javascript>
if ( e.type == 'joinChatRoomFailed' ) {\\  
}
</code>

==== 聊天室被删除 ====

<code javascript>
if ( e.type == 'deleteGroupChat' ) {\\  
}
</code>

===== 导入第三方表情包 =====

<code javascript>
Easemob.im.EMOTIONS = {
    path: 'static/img/faces/'
    , map: {
        '[):]': 'ee_1.png',
        '[:D]': 'ee_2.png',
        '[;)]': 'ee_3.png',
        '[:-o]': 'ee_4.png',
        '[:p]': 'ee_5.png'
    }
}
</code>

====== 退出 ======

----

关闭连接。

<code javascript>
//SDK关闭连接并处理连接状态为CLOSED
conn.close();
</code>

====== 工具类说明 ======

----

===== 表情工具类 =====

<code javascript>
//返回表情JSON object，格式为：
    {
        "[):]" : "data:image/png;base64,iVBORw0K....==",
        "[:D]" : "data:image/png;base64,iVBORw0KGgoAAAANSUh....=="
    }

var emotion_json = Easemob.im.Helper.EmotionPicData;
Base64工具类

var base64  = Easemob.im.Helper.Base64;
var srcstr="ssss";
var base64str = base64.encode(srcstr);
var orgstr = base64.decode(srcstr);
</code>

===== 文件上传工具类 =====

<code javascript>
//是否能上传file
var canupload = Easemob.im.Helper.isCanUploadFile;
//是否能下载file
var candownload = Easemob.im.Helper.isCanDownLoadFile ;
//是否设置header
var hasheader = Easemob.im.Helper.hasSetRequestHeader;
//是否设置mimetype
var hasmimetype = Easemob.im.Helper.hasOverrideMimeType;
</code>

===== 表情解析工具类 =====

<code javascript>
//返回表情JSON，格式为：
{
    isemotion:true;
    body:[{
        type:txt,
        msg:ssss
    },
    {
        type:emotion,
        msg:imgdata
    }]
}

var emotionMsg = Easemob.im.Helper.parseTextMessage(message);
</code>

===== 文件上传工具类 =====

<code javascript>
//返回fileinfo对象，格式为：
    {
        url : '',
        filename : '',
        filetype : ''
    }
var fileInfo = Easemob.im.Helper.getFileUrl(fileInputId);
//上传
var options={
    appName = 'chatdemoui',
    orgName = 'easemob-demo',
    accessToken = 'YWMtjPPoovCqEeOQs7myPqqaOwAAAUaqNH0a8rRj4PwJLQju6-S47ZO6wYs3Lwo',
    onFileUploadComplete:function(data){//upload file success },
    onFileUploadError:function(e){//upload file error },
    width:100,//only for pic
    heght:100//only for pic
}
Easemob.im.Helper.upload(options);
//下载
var options = {
    method:'GET',//default GET
    responseType:'blob',//default blob
    mimeType:'text/plain; charset=x-user-defined',//default
    url:'http://s1.easemob.com/weiquan2/a2/chatfiles/0c0f5f3a-e66b-11e3-8863-f1c202c2b3ae',
    secret = 'NSgGYPCxEeOou00jZasg9e-GqKUZGdph96EFxJ4WxW-qkxV4',
    accessToken = 'YWMtjPPoovCqEeOQs7myPqqaOwAAAUaqNH0a8rRj4PwJLQju6-S47ZO6wYs3Lwo',
    onFileUploadComplete:function(data){//upload file success },
    onFileUploadError:function(e){//upload file error },
}
Easemob.im.Helper.download(options);
//文件大小 
var options={
    fileInputId:'uploadfileinput'//文件输入框id
};
var fileSize = getFileSize(options.fileInputId);;
</code>

===== 发送 Ajax 请求 =====

<code javascript>
var options = {
    dataType:'text',//default
    success:function(){//handle request success},
    error :function(){//handle request error},
    type : 'post',//default 'post'
    url : 'http://s1.easemob.com/weiquan2/a2/chatfiles/0c0f5f3a-e66b-11e3-8863-f1c202c2b3ae',
    headers:'',//default {}
    data : '';//default null
};
Easemob.im.Helper.xhr(options);
</code>

===== 登录 =====

<code javascript>
var options = {
    appKey:'easemob-demo#chatdemoui',//default ''
    success:function(data){ //login success },//default emptyFn
    error : cunction(error){ //login error }, //default emptyFn
    user : 'test1', //default ''
    pwd : '123456'  //default ''
};
Easemob.im.Helper.login2UserGrid(options);
</code>

===== 注册 =====

<code javascript>
var options = {
	username : 'zjj8',
	password : '123456',
	appKey : 'easemob-demo#chatdemoui',
	success : function(result) {
		//注册成功
		},
		error : function(e) {
		//注册失败			
		}
	};
Easemob.im.Helper.registerUser(options);
</code>

===== 内置空函数 =====

当所有需要回调的地方接收到函数时，默认采用此函数。

<code javascript>
var emptyFn = function() {};
</code>

====== 常见问题 ======

----

=== 1. Web IM SDK 调用无效。 ===

请检查 easemob.im-1.0.3.js 等相关文件引入的路径是否正确。

=== 2. 是否支持 token 登录，是否支持 HTTPS？ ===
 
支持。详情请查看 easemob.im-1.0.3.js 和 index.html 相关内容。

=== 3. 是否支持重连？ ===

暂不支持，可以使用 token 来实现重连。

=== 4. 为什么登录后收不到消息？ ===
 
登录之后需要设置在线状态，才能收到消息。请检查登录成功后是否调用过 conn.setPresence()。

=== 5. 调试时经常报连接中断。 ===

如果使用 alter 方式调试长时间没有进行操作时，连接超时后服务器会自动断开连接。同样断点等待时间过长时服务器也会断开连接。

=== 6. Web IM 目前支持的浏览器类型及版本。 ===

●：支持

○：不支持

^Browser\Func	^Text Message	^Emotion Message	^Picture Message	^Audio Message	^Add Friend	^Delete Friend^
|IE7	|●	|●	|●	|○	|●	|●|
|IE8	|●	|●	|●	|○	|●	|●|
|IE9	|●	|●	|●	|○	|●	|●|
|IE10	|●	|●	|●	|●	|●	|●|
|IE11	|●	|●	|●	|●	|●	|●|
|FireFox10+	|●	|●	|●	|●	|●	|●|
|Chrome15+	|●	|●	|●	|●	|●	|●|
|Safari5X	|●	|●	|●	|●	|●	|●|
|Safari6X	|●	|●	|●	|●	|●	|●|
|Safari7X	|●	|●	|●	|●	|●	|●|
|Safari8X	|●	|●	|●	|●	|●	|●|

=== 7. 目前支持的 Picture Message 格式有哪些？ ===

已知 Picture Message 格式支持：PNG、JPG、BMP。

=== 8. 目前支持的 Audio Message 格式有哪些？ ===
 
已知 Audio Message 格式支持：MP3、AMR。