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