Web SDK API (floo-web)
选型先读
美信拓扑前端 Web SDK 共有三个版本，请按需选择：
Web版，主要供 PC 桌面浏览器使用，适合各种传统前端应用；
Uni-app版，基于 DCloud.io 的 uni-app 框架开发，供H5和各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝），也可发布到iOS、Android、快应用等平台；
微信小程序版，符合微信小程序标准的原生版本，功能跟 uni-app 版完全一致；
以下文档以 Web 版为例，所有版本基本一致。与此同时，DemoApp 源码均已开放，建议直接参考开发。
前期准备
下载对应 SDK 文件，桌面 Web 版地址为：floo-2.0.0.js，并在代码中引用。
初始化
首先设置 AppID
const config = {
// dnsServer: "https://dns.maximtop.com/v2/app_dns",
appid: "YOUR_APP_ID",
ws: false,
autoLogin: true
};然后创建im对象，供全局调用。
当前支持两种方式：
Script 方式，你可以直接 import 后，使用 window.flooIM()
import "floo-2.0.0.js";
const im = new window.flooIM(config);这种方式主要为支持浏览器中使用 script 标签引用，但会存在初始化并发问题，所以要用 try-catch-retry，请参见maxim-web源码。
module 方式，import flooim 后，使用 flooim()
import flooim from 'floo-2.0.0';
const im = flooim(config);base 基础部分
登录
im.login({
mobile:String, #与name 2选1
name:String,
password:String,
})监听 具体事件列表见本文档的"事件通知"部分
im.on('events', (ret) => {
//do something with ret
})
// or
im.on({
eventName: (ret) => {
//do something with ret
},
...
})
取消监听
im.off('events', (ret) => {
//do something with ret
})
// or
im.off({
eventName: (ret) => {
//do something with ret
},
...
})
二维码登录
im.qrlogin({
password,
user_id
});
token登录
im.tokenLogin(user_id, token)
rosterManager
获取好友id列表
im.rosterManage.asyncGetRosterIdList().then(res => {
//
});
获取好友信息
im.rosterManage.asyncGetRosterInfo(state.sid).then(res => {
//
})
用户注册
rosterManage.asyncRegester({
username,
password
}).then(() => {
//
});
根据id列表获取用户详细信息
im.rosterManage.asnycGetRosterListDetailByIds(rosterIdList).then(res => {
//
});
根据id获取聊天信息
const rosterMessages = im.rosterManage.getRosterMessageByRid(uid);
读取消息
im.rosterManage.readRosterMessage(uid);
删除好友
im.rosterManage
.asyncDeleteRoster({ user_id})
.then(() => {
alert("好友已删除");
});
获取缓存的所有新用户
const userMaps = im.rosterManage.getAllRosterDetail();
撤回消息，只能撤回5分钟内的
im.rosterManage.recallMessage(user_id, message_id);
删除消息
im.rosterManage.deleteMessage(user_id, message_id);
获取用户的未读数
const unreadCount = im.rosterManage.getUnreadCount(user_id) :
设置消息成未读
im.rosterManage.unreadMessage(user_id, message_id);
获取好友信息
const roserInfo = im.rosterManage.getRosterInfo(user_id);
获取好友申请列表
im.rosterManage
.asyncGetApplyList({ cursor: "" })
.then((res = []) => {
//
});
获取黑名单
im.rosterManage
.asyncGetBlockedlist()
.then((res = []) => {
//
});
加入黑名单
im.rosterManage
.asyncBlockeAdd(user_id)
.then((res = []) => {
//
});
移除黑名单
im.rosterManage
.asyncBlockeRemove(user_id)
.then((res = []) => {
//
});
请求加为好友
im.rosterManage
.asyncApply({ user_id, alias })
.then((res = []) => {
//
});
通过好友申请
im.rosterManage
.asyncAccept({ user_id })
.then((res = []) => {
//
});
拒绝好友申请
im.rosterManage
.asyncDecline({ user_id })
.then((res = []) => {
//
});
按名称搜索用户
im.rosterManage
.asyncSearchRosterByName({ username })
.then((res = []) => {
//
});
按ID搜索用户
im.rosterManage
.asyncSearchRosterById({ user_id })
.then((res = []) => {
//
});
groupManager
获取群信息
im.groupManage.asyncGetGroupInfo(group_id, fromServer).then(res => {
//
})
获取加入的群组
im.groupManage.asyncGetJoinedGroups().then(res => {
//
});
打开群组
// 此方法会准备群组聊天界面的一些必备信息。
im.groupManage.openGroup(group_id);
获取缓存的所有群组详情
const allGroupMap = im.groupManage.getAllGroupDetail();
获取群组成员（异步）
im.groupManage.asyncGetGroupMembers(group_id, fromServer).then(res => {
//
});
获取群组成员（同步）
const members = im.groupManage.getGroupMembers(group_id);
按id获取群组详情
im.groupManage.asyncGetGroupListDetail(groupIds).then(res => {
//
});
获取群消息
const groupMessages = rootState.im.groupManage.getGruopMessage(group_id);
将群消息设置已读
im.groupManage.readGroupMessage(group_id)
撤回消息
im.groupManage.recallMessage(group_id, message_id)
获取群未读消息数
const unreadCount = im.groupManage.getUnreadCount(group_id);
获取群管理员列表
im.groupManage.asyncGetAdminList({ group_id }).then(res => {
//
})
群添加管理员
im.groupManage.asyncAdminAdd({
group_id,
user_list
})
.then(() => {
//
});
移除管理员
im.groupManage.asyncAdminRemove({ group_id, user_list }).then(() => {
//
});
获取群公告详情
im.groupManage.asyncGetAnouncementById( {announcement_id, group_id} ).then(res => {
//
});
删除群公告
im.groupManage
.asyncAnouncementDelete({ group_id, announcement_id })
.then(() => {
//
});
添加群公告
im.groupManage.asyncAnnouncementEdit({ title, content, group_id })
.then(() => {
//
});
群公告列表
im.groupManage.asyncGetAnnouncementList({ group_id }).then((res = []) => {
//
});
创建群组
im.groupManage.asyncCreate({
name,
type,
avatar,
description,
user_list,
})
.then(() => {
//
});
解散群组
im.groupManage.asyncDestroy({ group_id })
.then(() => {
alert("您已解散了此群。。");
});
获取群组详情
im.groupManage.asyncGetInfo({ group_id }).then(res => {
//
});
更新群头像
im.groupManage.asyncUpdateAvatar({
group_id,
value,
})
.then(() => {
alert("更新头像完成");
});
更新群描述
im.groupManage.asyncUpdateDescription({
group_id,
value
})
.then(() => {
//
});
更新群名称
im.groupManage.asyncUpdateName({
group_id,
value
})
.then(() => {
//
});
获取群成员
im.groupManage.asyncGetMemberList(group_id, fromServer).then(res => {
//
});
设置群消息免打扰情况
im.groupManage.asyncGroupMsgMutemode({
group_id,
msg_mute_mode
})
.then(() => {
this.groupInfo.msg_mute_mode = this.groupInfo.msg_mute_mode ? 0 : 2;
});
获取群黑名单
im.groupManage.asyncGroupBannedList({ group_id }).then(res => {
//
});
禁言群成员
im.groupManage.asyncGroupBab({ group_id, duration, user_list }).then(() => {
//
});
解除成员
im.groupManage.asyncGroupUnban({ group_id, user_list }).then(() => {
//
});
设置群成员是否可以邀请
im.groupManage.asyncUpdateAllowMemberInvitation({
group_id,
value
})
.then(() => {
//
});
设置群成员是否可以修改群信息
im.groupManage.asyncUpdateAllowMemberModify({
group_id,
value
})
.then(() => {
//
});
设置群是否开启已读模式
im.groupManage.asyncUpdateEnableReadack({
group_id,
value
})
.then(() => {
//
});
设置群历史是否可见
im.groupManage.asyncUpdateHistoryVisible({
group_id,
value
})
.then(() => {
//
});
设置入群是否需要申请
im.groupManage.asyncUpdateRequireadminapproval({
group_id,
apply_approval
})
.then(() => {
//
});
更换群主
im.groupManage.asyncOwnerTransfer({
group_id,
new_owner
})
.then(() => {
//
});
申请加入群
im.groupManage.asyncApply({ group_id, reason })
.then(() => {
//
});
同意/拒绝申请用户加入群
im.groupManage.asyncApplyHandle({
approval: true/false,
user_id,
group_id
}).then(() => {
//
});
获取群黑名单
im.groupManage.asyncGroupBockedlist({ group_id }).then(res => {
//
});
将成员加入黑名单
im.groupManage.asyncGroupBlock({ group_id, user_list }).then(() => {
//
});
解除黑名单
im.groupManage.asyncGroupUnblock({ group_id, user_list })
.then(() => {
//
});
踢出群组
im.groupManage.asyncKick({ group_id, user_list }).then(() => {
//
});
获取群邀请列表
this.im.groupManage.asyncGetInvitationList().then(res => {
//
});
邀请成员加入群
im.groupManage.asyncInvite({ group_id, user_list }).then(() => {
/
});
同意/拒绝群邀请
im.groupManage.asyncInviteHandle({
approval: true,
user_id,
group_id
}).then(() => {
//
});
退出群
im.groupManage.asyncLeave({ group_id })
.then(() => {
//
});
修改群名片
im.groupManage.asyncUpdateDisplayName({
group_id,
value
})
.then(() => {
//
});
获取群申请列表
im.groupManage.asncGetApplicationList({ group_list }).then(rs => {
//
});
获取群文件
im.groupManage.asyncGetFileList({ group_id }).then((res = []) => {
//
});
删除群文件
im.groupManage.asyncFileDelete({ file_list, group_id }).then(() => {
//
});
sysManager
发送好友消息
im.sysManage.sendRosterMessage({
type,
uid,
content,
attachment
});
发送群消息
im.sysManage.sendGroupMessage({
type,
gid,
content,
attachment
});
群发送@消息
im.sysManage.sendMentionMessage({
gid,
txt,
mentionAll,
mentionList,
mentionedMessage,
pushMessage,
senderNickname
});
发送输入状态消息
im.sysManage.sendInputStatusMessage(roster_id, "nothing"/"typing");
转发消息
im.sysManage.forwardMessage({
uid,
gid, //2选1
mid,
});
请求历史消息
im.sysManage.requireHistoryMessage(roster_id/group_id, mid, amount);
// mid：消息ID， 从哪条消息往前取历史，0表示最新一条消息。 amount：最多取多少条消息。
获取所有消息未读状态
const allAcks = im.sysManage.getAllMessageStatus() || {};
获取群文件上传url
im.sysManage.asyncGetGroupAvatarUploadUrl({
group_id,
"access-token"
})
.then(res => {
//
});
获取聊天文件上传地址
im.sysManage.asyncGetFileUploadChatFileUrl({
file_type,
to_id,
to_type
})
.then(res => {
//
});
上传文件
im.sysManage.asyncFileUpload({
file,
fileType,
to_id,
toType: "chat",
chatType: "roster"
})
.then(res => {
//
})
拼装图片路径
const image = im.sysManage.getImage({ avatar, type='roster', thumbnail=true });
userManager
获取登录用户的token
const token = im.userManage.getToken();
获取登录用户的uid
const cuid = im.userManage.getUid();
获取appid
const appid = im.userManage.getAppid();
获取最近回话列表
const list = im.userManage.getConversationList();
发送验证码
im.userManage
.asyncUserSendSms({
mobile,
})
.then(() => {
//
});
发送验证码（通过图片验证码）
im.userManage
.asyncCaptchaSms({
captcha,
image_id,
mobile,
})
.then(() => {
//
});
检查用户名是否可用
im.userManage.asyncUserNameCheck(username).then(() => {
//
});
绑定手机号-使用签名绑定
im.userManage.asyncUserMobileBindSign({
mobile,
sign,
}).then(() => {
//
});
手机号验证码登录
im.userManage.asyncUserMobileLogin({
captcha,
mobile
})
.then(res => {
//
});
更新手机号
im.userManage
.asyncUpdateMobile({ mobile })
.then(() => {
//
});
更新头像
im.userManage
.asyncUpdateAvatar({
avatar
})
.then(() => {
//
});
更新昵称
im.userManage.asyncUpdateNickName({ nick_name }).then(() => {
//
});
获取用户profile
im.userManage.asyncGetProfile(true).then(res => {
//
})
更新用户profile
im.userManage.asyncUpdateProfile({
username,
avatar
}).then(res => {
//
})
获取用户设置信息
im.userManage.asyncGetSettings().then(res => {
//
})
修改用户设置
im.userManage
.asyncUpdateSettings({
"auth_answer": "string",
"auth_mode": 0,
"auth_question": "string",
"auto_download": true,
"group_confirm": true,
"id": 0,
"no_push": true,
"no_push_detail": true,
"no_push_end_hour": 0,
"no_push_start_hour": 0,
"no_sounds": true,
"push_nick_name": "string",
"user_id",
"vibratory": true
}).then(() => {
//
});
事件通知
Floo通知
事件名称：flooNotice
事件内容：({category, desc})
{category: 'loginMessage',desc: 'socket connecting...'} // 开始建连接
{category: 'loginMessage',desc: 'socket connect success...'} // 连接成功
{category: 'loginMessage',desc: 'logining socket service...'} // 开始登录
{category: 'loginMessage',desc: 'login socket failure ......'} // 登录失败
{category: 'loginMessage',desc: 'login socket success.....'} // 登录成功
{category: 'loginMessage', desc: 'getting token...' } //获取token
{category: 'loginMessage',desc: 'token sucecc, getting roster lists..'} // 获取token成功，开始获取好友列表
{category: 'loginMessage',desc: 'get roster list failure:' + ex.message} // 获取好友列表失败
{category: 'action', desc: 'relogin' } // 需要自动登录
{category: 'action', desc: 'relogin_manually' } // 需要手动登录
{category: 'conversation_deleted',desc: { id, source:'user_operation' }} // 会话被删除。ID：会话ID， source: 来源
{category: 'userNotice', desc:'PASSWORD_CHANGED'} // 用户密码改变
{category: 'userNotice', desc:'FROZEN'} // 用户账户被封禁
{category: 'userNotice', desc:'REMOVED'} // 用户被删除
{category: 'userNotice', desc:'KICK_BY_SAME_DEVICE'} // 当前设备被相同设备踢下线
{category: 'userNotice', desc:'KICKED_BY_OTHER_DEVICE'} // 当前设备被其它设备踢下线
{category: 'userNotice', desc:'INFO_UPDATED'} // 用户信息改变：profile或setting
{category: 'userNotice', desc:'DEVICE_LOGIN'} // 用户其它设备上线
{category: 'userNotice', desc:'DEVICE_LOGOUT'} // 用户其它设备下线
{category: 'userNotice', desc:'DEVICE_ADDED'} // 新设备通知
{category: 'userNotice', desc:'DEVICE_REMOVED'} // 设备被移除的通知
{category: 'userNotice', desc:'CLUSTER_CHANGED'} // 用户所在集群改变 需要重新登录Floo错误
事件名称：flooError
事件内容：({category, desc})
{category: 'USER_BANNED', desc:'用户被禁言'}
{category: 'USER_FROZEN', desc:'用户被冻结，请联系App管理员。'}
{category: 'APP_FROZEN', desc:'APP 被冻结，请登陆美信拓扑控制台查看详情。'}
{category: 'LICENSE', desc:'无效 LICENSE，请确认服务已按时付费。'}
{category: 'LICENSE', desc:'超出 LICENSE 用户数限制，请购买更高规格服务。'}
{category: 'DNS_FAILED', desc: dnsServer } // DNS错误: 无法访问登录失败
事件名称: loginFail
事件内容：(desc) 失败原因的描述登录成功
事件名称：loginSuccess
事件内容：({})群列表更新
事件名称：onGroupListUpdate
事件内容：()群成员列表更新
事件名称：onGroupMemberChanged
事件内容: (groupId) 群ID收到群消息
事件名称: onGroupMessage
事件内容: (meta) 消息的内容对方正在输入
事件名称: onInputStatusMessage
事件内容: ({ext,from,to}) ext:扩展字段 from: 发送者用户ID to: 接收者用户ID收到群组@消息
事件名称: onMentionMessage
事件内容: (meta) 消息的内容消息被取消已读
事件名称: onMessageCanceled
事件内容: ({uid,mid}) uid: 会话ID， mid: 消息ID消息被删除
事件名称: onMessageDeleted
事件内容: ({uid,mid}) uid: 会话ID， mid: 消息ID消息被撤回
事件名称: onMessageRecalled
事件内容: ({uid,mid}) uid: 会话ID， mid: 消息ID消息状态变更：撤回/删除/已读
事件名称: onMessageStatusChanged
事件内容: ({uid,mid}) uid: 会话ID， mid: 消息ID收到历史消息
事件名称: onReceiveHistoryMsg
事件内容: ({next}) next: 下次取历史消息的key好友信息变更
事件名称: onRosterInfoUpdate
事件内容: (rosterIds) rosterIds: 好友的用户ID列表好友列表变更
事件名称: onRosterListUpdate
事件内容: (meta) 好友通知的消息内容收到单聊消息
事件名称: onRosterMessage
事件内容: (meta) 好友通知的消息内容消息发送状态变更
事件名称: onSendingMessageStatusChanged
事件内容: ({status,mid}) status: 发送状态，取值为sending|failed|sent， mid: 客户端生成的client_mid未读数改变
事件名称: onUnreadChange
事件内容: (cid) 会话ID最近会话更新
事件名称: recentlistUpdate
事件内容: ()群组创建通知
事件名称: onGroupCreated
事件内容: (meta) 群通知的消息内容群组解散通知
事件名称: onGroupDestoryed
事件内容: (meta) 群通知的消息内容成员入群通知
事件名称: onGroupJoined
事件内容: (meta) 群通知的消息内容群申请被通过
事件名称: onGroupApplyAccepted
事件内容: (meta) 群通知的消息内容群申请被拒绝
事件名称: onGroupApplyDeclined
事件内容: (meta) 群通知的消息内容被群禁言
事件名称: onGroupBaned
事件内容: (meta) 群通知的消息内容被群取消禁言
事件名称: onGroupUnbaned
事件内容: (meta) 群通知的消息内容Last updated
Was this helpful?