差别
这里会显示出您选择的修订版和当前版本之间的差别。
|
start:400webimintegration:websdk1.1.1 [2017/01/22 08:46] liulj |
start:400webimintegration:websdk1.1.1 [2018/09/05 09:54] |
||
|---|---|---|---|
| 行 1: | 行 1: | ||
| - | ====== 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> | ||
| - | 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。 | ||