客户端集成要点 @ 腾讯云通信

腾讯云通信 客户端集成提供了 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