WebIM H5 Demo 介绍

WebIM H5 Demo 支持移动设备布局 (WebIM 1.x 只支持PC浏览器)

GitHub 下载地址:https://github.com/easemob/webim

WebIM H5 支持所有现代浏览器,支持手机微信和QQ。

目前暂不支持IE6-11,只支持Microsoft Edge。

注:所有开发调试环境均基于Mac。

1.WebIM 1.x的所有功能

2.支持浏览器本地缓存(IndexDB)

3.配置文件是demo/src/config/WebIMConfig.js

{
    // ---------------------------------
    // 响应式断点
    // ---------------------------------
    //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集成