客户端集成要点 @ 腾讯云通信
2016-11-22 本文已影响369人
michael_jia
腾讯云通信 客户端集成提供了 Android SDK、iOS SDK、Windows SDK、Web SDK，本文以 Web SDK 为例，简要说一下集成要点；
DEMO运行指引
- 有 demo，没做过的事儿都会变简单；
- 下载 IM Web SDK 包（目前 1.6 版），解压放到 Web Server 下；
IM_Web_SDK1.6\通用WebDemo_V1.6\WebDemo_v1.6\
├─css
├─fonts
├─img
├─js
│ ├─common
│ ├─friend
│ ├─group
│ ├─lib
│ │ ├─audiojs
│ │ ├─base64
│ │ ├─bootstrap
│ │ ├─jquery
│ │ └─md5
│ ├─login
│ ├─logout
│ ├─msg
│ └─profile
└─sdk
index.html
-
运行demo（独立模式）
编辑 demo 根目录下的 index.html：
var accountMode=0; // 账号模式，0-表示独立模式；
var sdkAppID = 1400001533; // 开发者改成自己的业务 id；
var accountType = 792; //开发者改成自己的业务帐号类型
运行demo（独立模式）：index.html
ImSDK 基本概念
- SESSION 会话
GROUP 群会话（群聊），C2C 会话（单聊）；在 wph 业务里，我们都使用群会话； - GROUP_TIP_TYPE 群提示消息类型
GROUP_TIP_TYPE.JOIN-进群，...； - MSG_ELEMENT_TYPE 消息元素类型
文本消息，表情消息，图片消息，...；
消息收发
- 监听新消息；
当监听到一条新消息时，若为当前会话，则查阅发言人是否有在参与列表中；若不在其中，则调用 app sdk 参与列表接口，获取发言人昵称和头像；然后展示这条新消息；
若新消息非当前会话，则累加新消息数，供相关页面使用； - 一条消息中可能包含多种消息元素；
群组管理
- 游客：id=1；
- 客服：id=3；
-
创建群；
当 申请加群 返回 错误码 10010（群组不存在）时进行创建； - 获取群成员列表；
- 在一个群组留言时，当该群组不在 我的群组列表 中时，首先进行 申请加群；
如果是私聊群组，由于只有客户工程商双方，且由工程商发起，则由工程商直接创建群从业务上看也是没多大逻辑问题的，在创建群时指定成员列表即可； -
获取群历史消息；
最近 50 条；自我入群那一刻开始的所有历史消息；
服务端集成的 拉取群漫游消息 对消息排序有阐述； - 由 AppServer 提供新接口，负责中转拉取群漫游消息，以满足可以查看自群开通以来的所有历史消息，而非自入群那一刻开始的所有历史消息；
错误码 示例
- 10010（群组不存在）；
- 10007（操作权限不足，no permission）；
加群操作未完成时，发送群消息会出现此错误；
修改昵称
- 修改昵称时，是否要同步到 ImServer？
如果能够使用 app sdk 接口获取发言人的昵称和头像，则根本就没有必要同步到 ImServer； - 当 AppServer 昵称和 ImServer 昵称不一致时，以 AppServer 为准，前端调用 im web sdk 接口进行修复；
托管模式的登录机制
- TLS登录（托管模式）；
- SDK 函数调用顺序；
- 对照看一下上面的两节内容，就明白了；
当 im sdk 发现未登录（无 tmpsig），则指示用户使用 tls 提供的用户名/密码进行 tls 登录，登录成功后在回调 url 中会回传临时票据 tmpsig；im sdk 根据 tmpsig 获取正式的 userSig（fetchUserSig），成功后会回调 tlsGetUserSig(res) 函数（app client 自己实现）从结果中取出 identifier 和 UserSig 即可；后面的事情和独立模式的就一样了；
web im 1.6 目录全貌
│ index.html
│
├─css
│ bootstrap-table.css
│ bootstrap.css
│ jquery-ui.css
│ webim_demo.css
│
├─fonts
│ glyphicons-halflings-regular.eot
│ glyphicons-halflings-regular.svg
│ glyphicons-halflings-regular.ttf
│ glyphicons-halflings-regular.woff
│
├─img
│ 2016.gif
│ 2017.jpg
│ icon.png
│ icon_1.png
│ layer_arrow.png
│ ui-bg_diagonals-thick_18_b81900_40x40.png
│ ui-bg_diagonals-thick_20_666666_40x40.png
│ ui-bg_flat_10_000000_40x100.png
│ ui-bg_glass_100_f6f6f6_1x400.png
│ ui-bg_glass_100_fdf5ce_1x400.png
│ ui-bg_glass_65_ffffff_1x400.png
│ ui-bg_glass_65_ffffff_1x400_1.png
│ ui-bg_gloss-wave_35_f6a828_500x100.png
│ ui-bg_highlight-soft_100_eeeeee_1x100.png
│ ui-bg_highlight-soft_75_ffe45c_1x100.png
│ ui-icons_222222_256x240.png
│ ui-icons_228ef1_256x240.png
│ ui-icons_454545_256x240.png
│ ui-icons_ef8c08_256x240.png
│ ui-icons_ffd27a_256x240.png
│ ui-icons_ffffff_256x240.png
│ wlf_bg.png
│ wlf_title_bg.jpg
│ wlf_title_btn.jpg
│
├─js
│ │ base.js
│ │ switch_chat_obj.js
│ │
│ ├─common
│ │ show_one_msg.js
│ │
│ ├─friend
│ │ friend_black_list_manager.js
│ │ friend_manager.js
│ │ friend_pendency_manager.js
│ │
│ ├─group
│ │ group_manager.js
│ │ group_member_manager.js
│ │ group_pendency_manager.js
│ │
│ ├─lib
│ │ ├─audiojs
│ │ │ audio.min.js
│ │ │ audio.min_my.js
│ │ │ audiojs.swf
│ │ │ player-graphics.gif
│ │ │
│ │ ├─base64
│ │ │ base64.js
│ │ │ base64.min.js
│ │ │
│ │ ├─bootstrap
│ │ │ bootstrap-collapse.js
│ │ │ bootstrap-table.js
│ │ │ bootstrap.js
│ │ │
│ │ ├─jquery
│ │ │ jquery-ui.js
│ │ │ jquery.js
│ │ │
│ │ └─md5
│ │ spark-md5.js
│ │
│ ├─login
│ │ login.js
│ │
│ ├─logout
│ │ logout.js
│ │
│ ├─msg
│ │ get_history_msg.js
│ │ receive_friend_system_msg.js
│ │ receive_group_system_msg.js
│ │ receive_new_msg.js
│ │ receive_profile_system_msg.js
│ │ send_common_msg.js
│ │ send_custom_group_notify_msg.js
│ │ send_custom_msg.js
│ │ switch_play_sound_msg.js
│ │ upload_and_send_pic_msg.js
│ │
│ └─profile
│ profile_manager.js
│
└─sdk
json2.js
webim.js
webim.min.js
webim_no_emotion.js
