examples/login/libs/easymob-webim-sdk/quickstart.md
支持username/password和username/token登录两种方式，sdk中会根据传入的参数进行自动选择是否登录usergrid，获取登录成功的token后再进行登录聊天，如果使用token的打开连接将跳过登录usergird，直接登录IM服务器。
<pre class="hll"><code class="language-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></pre>查询好友列表时，要注意susciption（both，to,from）为不同值得处理,此处默认both和to的为好友，开发者自定义处理，保持跟APP端处理一致即可。
<pre class="hll"><code class="language-javascript"> conn.getRoster({ success : function(roster) { //获取好友列表，并进行好友列表渲染，roster格式为： /** [ { jid:"asemoemo#[email protected]", name:"test1", subscription: "both" }, { jid:"asemoemo#[email protected]", 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></pre>通过sdk的subscribe和unsubcribe进行添加或者删除好友操作，登录用户通过注册onPresence，监听对方的添加或者删除好友请求，并做相应的处理。
<pre class="hll"><code class="language-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></pre>对于好友的分组，添加好友时在addroster可以指定group属性（默认为：default组），添加好友成功后，好友列表渲染时，根据好友的group属性进行分组渲染，实现类似其他聊天工具的自定义好友分组管理的功能。
取消订阅，同时将对方从自己的好友列表上删除掉。
<pre class="hll"><code class="language-javascript"> var delFriend = function(user) { conn.removeRoster({ to : user, groups : [ 'default' ], success : function() { conn.**unsubscribed**({ to : user }); } }); }; </code></pre>发送图片消息sdk自动分两步完成：
1）上传图片文件到服务器，并得到服务返回的图片信息等
2）发送图片消息，消息体包含图片的基本信息、服务器路径、secret等，接收方初始化连接中的onPictureMessage的格式，根据图片消息内容到服务器下载图片，并进行显示
<pre class="hll"><code class="language-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) { //处理图片上传成功，如本地消息显示 } }; conn.sendPicture(opt); return; } alert("不支持此图片类型" + filetype); }; </code></pre>sdk处理同发送图片消息，分两步：
conn.init()中注册不同消息接收handler之后，可自行解析消息体，定位聊天好友，并追加到与其聊天窗口。具体参考webim.easemob.com效果，消息体格式参见前章节：初始化连接。
注：对于图片、语音消息需要先进行下载，然后进行显示或者播放处理。如下(下载图片，音频同)：
<pre class="hll"><code class="language-javascript"> var handlePictureMessage = function(message) { var filename = message.filename;//文件名称，带文件扩展名 var from = message.from;//文件的发送者 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></pre>sdk暂不具有缓存历史消息功能，demo中聊天窗口只能显示，当前登录后会话实时在聊天信息，不能查看历史消息，可以对登录后的聊天信息进行清除操作。
sdk在收到新消息是会直接转发给登录用户，接收到消息后，demo中会在好友或者群组的后面显示红色消息数，具体样式开发者可自行处理。
发送图片消息sdk自动分两步完成
sdk处理同群发送图片消息，分两步
群聊接收及处理消息同单聊，消息体与单聊消息根据message的type进行区分，单聊为：“chat”，群聊为：“groupchat”。根据消息的类型进行不同处理即可。
//sdk关闭连接并处理连接状态为CLOSED
<pre class="hll"><code class="language-javascript"> conn.close(); </code></pre>当所有需要回调的地方接受到函数时，默认采用此函数
<pre class="hll"><code class="language-javascript"> var emptyFn = function() {}; </code></pre>