WebIM H5 Demo 介绍
React Native 可以让开发者使用 Javascript 和 React 开发原生 iOS 和 Android 应用,提高开发效率(Learn once, write anywhere)。
React Native Demo 已集成环信 Web IM SDK,并提供即时通讯基本功能,开发者可以直接将该 Demo 集成到您的应用中,立即获得即时通讯的能力。
GitHub 下载地址:https://github.com/easemob/webim
版本支持
WebIM H5 支持所有现代浏览器,支持手机微信和QQ。
目前暂不支持IE6-11,只支持Microsoft Edge。
注:所有开发调试环境均基于Mac。
功能
1.WebIM 1.x的所有功能
2.支持浏览器本地缓存(IndexDB)
Redux State
{
// ---------------------------------
// 响应式断点
// ---------------------------------
//xs: "480px"
//sm: "768px"
//md: "992px"
//lg: "1200px"
//xl: "1600px"
breakpoint: {
xs: false,
sm: false,
md: false,
lg: false,
xl: false
},
// ---------------------------------
// UI相关
// ---------------------------------
common: {
fetching: false,
isGetGroupAlready: true,
isGetChatRoomAlready: false,
showGroupRequestModal: false //群主管理加入群消息
},
// ---------------------------------
// 用户登录信息
// ---------------------------------
login: {
username: 'sunylt',
password: null,
token: "YWMtZ0m-opwTEeeS-e0Ko59rsU1-S6DcShHjkNXh_7qs2vV",
fetching: false,
error: false
isLogin: true,
},
// ---------------------------------
// 多语言
// ---------------------------------
i18n: {
// 已配置语言
translations: {
cn: {},
us: {},
},
// 当前语言
locale: "cn"
},
// 注册信息,没进行注册操作为{}
register: {
username: "123abcdbb",
password: "123",
fetching: false,
registerError: null
},
// 预留 暂无用
contacts: {}
// 预留 暂无用
im: {}
// ---------------------------------
// 数据实体
// ---------------------------------
entities: {
// 好友
roster: {
byName: {
name: { subscription,jid, ask, name, groups }
...
},
names: ['lwz2' ...],
// 好友列表在此,因为好友列表来源于roster,息息相关
friends: [],
},
// 群组
group: {
loadingFailed: <Boolean>,
isLoading: <Booleadn>,
rightSiderOffset: <Number>, //控制右侧群组管理面板
byId: {
groupId: {groupid, groupname},
....
},
names: [groupName_#-#_groupId, ....]
},
// 聊天室
chatroom: {
byId: {
chatId: {chatId, name, owner, affiliations_count}
...
},
names: [chatName_#-#_chatId, ....]
},
// 陌生人
stranger: {
},
// 群组成员信息
groupMember: {
groupId: {
muted: {byName: {}},//群主可见,禁言列表
byName: {
name: {name: <String: name>, affiliation: 'member'}
},
names: [],
admins: [], //群管理员可见
},
...
}
// 订阅通知
subscribe: {
byFrom: {}
},
// 黑名单列表
blacklist: {
byName: {}
name: []
},
// 消息
message: {
// 所有消息
byId: {
mid: {"type":"chat|groupchat|chatroom|stranger|error", "chatId": <String: chatId>},
...
}
// 单聊消息列表
chat: {
chatId: [
{message},
...
]
},
// 群组消息列表
groupChat: {
chatId: [
{message},
...
]
},
// 聊天室消息列表
chatroom: {
chatId: [
{message},
...
]
},
// 陌生人消息列表
stranger: {
chatId: [
{message},
...
]
},
// 预留 暂无用
extra: {}
// 未读消息记录
unread: {
// 好友
chat: {
chatId: <Number: unreadNum>,
...
},
// 群组
groupchat: {
chatId: <Number: unreadNum>,
...
},
// 聊天室
chatroom: {
chatId: <Number: unreadNum>,
...
},
// 陌生人
stranger: {
chatId: <Number: unreadNum>,
...
}
}
// 自己发的消息mid跟本地id对照
byMid: {
messageId: {id: <String: localId>},
...
},
},
// 加入群申请
groupRequest: {
byGid: {}
}
}
}
上一章节:Web IM SDK集成
下一页:React Native集成