WebApp快捷打包
网易云信 IM 即时通讯
转到模块插件

敬告：此 DEMO 演示为开放测试页面，仅用于开发者快速测试体验应用功能，请严格遵守开发者协议，了解更多。

♦ JS-SDK 引用方式：

♦ 普通网页 script 方式加载：下载最新版 jsBridge-v20241118.zip，请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库；

♦ js module 方式引用：npm install ym-jsbridge 具体请参考 npm package

【优惠说明】通过一门平台链接登录云信控制台并成功注册账号，云信将提供特别的渠道版套餐，低至五折接入；

【产品介绍、注册/登录】；

基本设置

init 初始化

网易云信 上创建的应用 AppKey
appKey:

是否开启会话已读多端同步，false 即不支持多端同步会话未读数
sessionReadAck:

群通知消息是否计入未读数，false 即群消息不计入未读数
teamNotificationMessageMarkUnread:

是否启用群消息已读功能，false 即关闭群消息已读功能
enableTeamMsgAck:

是否需要将被撤回的消息计入未读数，false 即撤回消息不影响未读数
shouldConsiderRevokedMessageUnreadCount:

登录时的自定义字段，登录成功后同步给其他端
loginCustomTag:

是否同步置顶会话，false 即不同步置顶会话
notifyStickTopSession:

是否开启最近联系人会话时间索引，false 即不开启
enableRecentContactsTimeIndex:

是否开启聊天室空间消息功能，false 即不开启
enableChatRoomLocation:

是否支持圈组消息缓存，false 即不开启
enabledQChatMessageCache:

true 则消息状态是否成功会结合是否被拉入黑名单进行判断
fixMsgStatusByBlackList:

是否开启圈组自动订阅，true 开启圈组自动订阅；false 关闭圈组自动订阅
qchatAutoSubscribe:

是否使用自定义用户信息，如果启用请务必参考示例处理 setListener 的 fetchUserInfo 事件
useCustomUserInfoDelegate:

小米推送 appId
mixPushConfig.xmAppId:

小米推送 appKey
mixPushConfig.xmAppKey:

小米推送证书，请在云信管理后台申请
mixPushConfig.xmCertificateName:

华为推送 appId
mixPushConfig.hwAppId:

华为推送证书，请在云信管理后台申请
mixPushConfig.hwCertificateName:

魅族推送 appId
mixPushConfig.mzAppId:

魅族推送 appKey
mixPushConfig.mzAppKey:

族推送证书，请在云信管理后台申请
mixPushConfig.mzCertificateName:

VIVO推送证书，请在云信管理后台申请
mixPushConfig.vivoCertificateName:

OPPO推送 appId
mixPushConfig.oppoAppId:

OPPO推送 appKey
mixPushConfig.oppoAppKey:

OPPO推送 appSecret
mixPushConfig.oppoAppSecret:

OPPO推送证书，请在云信管理后台申请
mixPushConfig.oppoCertificateName:

荣耀推送证书，请在云信管理后台申请
mixPushConfig.honorCertificateName:

FCM推送证书，请在云信管理后台申请(海外客户使用)
mixPushConfig.fcmCertificateName:

是否根据token自动选择推送类型
mixPushConfig.autoSelectPushType:

iOS APNs 推送证书名
mixPushConfig.apnsCername:

iOS PushKit 推送证书名
mixPushConfig.pkCername: 

jsBridge.yxIm.init({
    //网易云信 上创建的应用 AppKey
    appKey: "{{init.appKey}}",
    //是否开启会话已读多端同步，false 即不支持多端同步会话未读数
    sessionReadAck: {{init.sessionReadAck}},
    //群通知消息是否计入未读数，false 即群消息不计入未读数
    teamNotificationMessageMarkUnread: {{init.teamNotificationMessageMarkUnread}},
    //是否启用群消息已读功能，false 即关闭群消息已读功能
    enableTeamMsgAck: {{init.enableTeamMsgAck}},
    //是否需要将被撤回的消息计入未读数，false 即撤回消息不影响未读数
    shouldConsiderRevokedMessageUnreadCount: {{init.shouldConsiderRevokedMessageUnreadCount}},
    //登录时的自定义字段，登录成功后同步给其他端
    loginCustomTag: "{{init.loginCustomTag}}",
    //是否同步置顶会话，false 即不同步置顶会话
    notifyStickTopSession: {{init.notifyStickTopSession}},
    //是否开启最近联系人会话时间索引，false 即不开启
    enableRecentContactsTimeIndex: {{init.enableRecentContactsTimeIndex}},
    //是否开启聊天室空间消息功能，false 即不开启
    enableChatRoomLocation: {{init.enableChatRoomLocation}},
    //是否支持圈组消息缓存，false 即不开启
    enabledQChatMessageCache: {{init.enabledQChatMessageCache}},
    //true 则消息状态是否成功会结合是否被拉入黑名单进行判断
    fixMsgStatusByBlackList: {{init.fixMsgStatusByBlackList}},
    //是否开启圈组自动订阅，true 开启圈组自动订阅；false 关闭圈组自动订阅
    qchatAutoSubscribe: {{init.qchatAutoSubscribe}},
    //是否使用自定义用户信息，如果启用请务必参考示例处理 setListener 的 fetchUserInfo 事件
    useCustomUserInfoDelegate: {{init.useCustomUserInfoDelegate}},
    //第三方厂商通道离线推送配置
    mixPushConfig: {
        //小米推送 appId
        xmAppId: "{{init.mixPushConfig.xmAppId}}",
        //小米推送 appKey
        xmAppKey: "{{init.mixPushConfig.xmAppKey}}",
        //小米推送证书，请在云信管理后台申请
        xmCertificateName: "{{init.mixPushConfig.xmCertificateName}}",
        //华为推送 appId
        hwAppId: "{{init.mixPushConfig.hwAppId}}",
        //华为推送证书，请在云信管理后台申请
        hwCertificateName: "{{init.mixPushConfig.hwCertificateName}}",
        //魅族推送 appId
        mzAppId: "{{init.mixPushConfig.mzAppId}}",
        //魅族推送 appKey
        mzAppKey: "{{init.mixPushConfig.mzAppKey}}",
        //族推送证书，请在云信管理后台申请
        mzCertificateName: "{{init.mixPushConfig.mzCertificateName}}",
        //VIVO推送证书，请在云信管理后台申请
        vivoCertificateName: "{{init.mixPushConfig.vivoCertificateName}}",
        //OPPO推送 appId
        oppoAppId: "{{init.mixPushConfig.oppoAppId}}",
        //OPPO推送 appKey
        oppoAppKey: "{{init.mixPushConfig.oppoAppKey}}",
        //OPPO推送 appSecret
        oppoAppSecret: "{{init.mixPushConfig.oppoAppSecret}}",
        //OPPO推送证书，请在云信管理后台申请
        oppoCertificateName: "{{init.mixPushConfig.oppoCertificateName}}",
        //荣耀推送证书，请在云信管理后台申请
        honorCertificateName: "{{init.mixPushConfig.honorCertificateName}}",
        //FCM推送证书，请在云信管理后台申请(海外客户使用)
        fcmCertificateName: "{{init.mixPushConfig.fcmCertificateName}}",
        //是否根据token自动选择推送类型
        autoSelectPushType: {{init.mixPushConfig.autoSelectPushType}},
        //iOS APNs 推送证书名
        apnsCername: "{{init.mixPushConfig.apnsCername}}",
        //iOS PushKit 推送证书名
        pkCername: "{{init.mixPushConfig.pkCername}}"
    }
}, function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }
});

info 获取当前信息

jsBridge.yxIm.info(function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }

/** 成功时 res 参数返回
{
    sdkVersion  SDK版本
    hasInit     是否已初始化
    accid       当前登录的 accid
    status      当前用户状态
}
**/

});

login 登录

云信 IM 账号 的 accid
accid:

登录鉴权 token
token:

鉴权方式： //0 通过静态 token 鉴权； //1 通过动态 token 鉴权； //2 基于第三方回调的 token 鉴权方式，使用该方式时必须传入 loginExt 参数
authType:

登录自定义扩展字段，用于第三方服务器鉴权，当 authType 为 2 时必须传入本参数
loginExt:

音视频通话是否使用 自定义用户昵称和头像，如果启用请务必在 setListener 中处理 CallkitUserInfoHelper 事件设置昵称和头像。
useCustomCallkitUserInfo: 

jsBridge.yxIm.login({
    //云信 IM 账号 的 accid
    accid: "{{login.accid}}",
    //登录鉴权 token
    token: "{{login.token}}",
    //鉴权方式：
    //0 通过静态 token 鉴权；
    //1 通过动态 token 鉴权；
    //2 基于第三方回调的 token 鉴权方式，使用该方式时必须传入 loginExt 参数
    authType: {{login.authType}},
    //登录自定义扩展字段，用于第三方服务器鉴权，当 authType 为 2 时必须传入本参数
    loginExt: "{{login.loginExt}}",
    //音视频通话是否使用 自定义用户昵称和头像，如果启用请务必在 setListener 中处理 CallkitUserInfoHelper 事件设置昵称和头像。
    useCustomCallkitUserInfo: {{login.useCustomCallkitUserInfo}}
}, function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }
});

logout 退出

jsBridge.yxIm.logout(function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }
});

setCallkitUserNickname 设置音视频用户昵称

云信 IM 账号的 accid:

昵称
nickname: 

//需在 setListner 的 CallkitUserInfoHelper -> fetchNickname 中调用
jsBridge.yxIm.setCallkitUserNickname({
    //云信 IM 账号的 accid
    accid: "{{setCallkitUserNickname.accid}}",
    //昵称
    nickname: "{{setCallkitUserNickname.nickname}}"
}, function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }
});

setCallkitUserAvatar 设置音视频用户头像

云信 IM 账号的 accid:

昵称
nickname: 

//需在 setListner 的 CallkitUserInfoHelper -> loadAvatar 中调用
jsBridge.yxIm.setCallkitUserAvatar({
    //云信 IM 账号的 accid
    accid: "{{setCallkitUserAvatar.accid}}",
    //头像
    nickname: "{{setCallkitUserAvatar.avatar}}"
}, function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }
});

事件监听

setListener 设置监听器

• 如需处理接口调用事件，请设置此监听器；

jsBridge.yxIm.setListener(function(event, res) {
    switch (event) {
        //用户信息
        //初始化 init 时需启用 useCustomUserInfoDelegate 才会有此回调事件
        case "CustomUserInfoDelegate": {
            switch (res.action) {
                //异步请求用户信息，res.data 为正在请求获取的 accid 数组
                //准备好用户信息后请调用 setUserInfo 接口设置用户信息
                case "fetchUserInfo": {
                    const DemoUsers = {
                        ym1: {
                            accid: "ym1",
                            nickname: "一门1",
                            avatar: "https://www.yimenapp.com/assets/trtc/a1.png"
                        },
                        ym2: {
                            accid: "ym2",
                            nickname: "一门2",
                            avatar: "https://www.yimenapp.com/assets/trtc/a2.png"
                        }
                    };
                    //正在请求获得的 accid 列表
                    const accids = res.data;
                    /* 示例
                    fetch(...).then(() => {
                        jsBridge.yxIm.setUserInfo(...)
                    });
                    */
                    const users = [];
                    accids.forEach(function(accid) {
                        const user = DemoUsers[accid];
                        users.push(user ? user : {
                            accid: accid,
                            nickname: '未知昵称',
                            avatar: 'https://www.yimenapp.com/assets/trtc/a.png'
                        });
                    });
                    jsBridge.yxIm.setUserInfo({
                        users: users
                    });
                    break;
                }
            }
            break;
        }
        //登录 login 时需启用 useCustomCallkitUserInfo 才会有此回调事件
        case "CallkitUserInfoHelper": {
            switch (res.action) {
                //异步请求用户昵称，res.data 为正在请求获取的 { accid: "xxx" }
                //准备好数据后请调用 setCallkitUserNickname 接口设置昵称
                case "fetchNickname": {
                    jsBridge.yxIm.setCallkitUserNickname({
                        accid: res.data.accid,
                        nickname: "一门 Callkit 测试"
                    });
                    break;
                }
                //异步请求用户头像，res.data 为正在请求获取的 { accid: "xxx" }
                //准备好数据后请调用 setCallkitUserAvatar 接口设置头像
                case "loadAvatar": {
                    jsBridge.yxIm.setCallkitUserAvatar({
                        accid: res.data.accid,
                        avatar: "https://www.yimenapp.com/assets/trtc/a.png"
                    });
                    break;
                }
            }
            break;
        }
        //通讯录标题栏
        case "ContactListTitleBar": {
            switch (res.action) {
                //点击了右侧图标
                //打开通讯录时需提供 titleBarRightIcon 才会有此回调，否则为系统默认行为
                case "titleBarRightClick": {
                    jsBridge.toast("Contact titleBarRightClick");
                    break;
                }
                //点击了右2图标
                //打开通讯录时需提供 titleBarRight2Icon 才会有此回调，否则为系统默认行为
                case "titleBarRight2Click": {
                    jsBridge.toast("Contact titleBarRight2Click");
                    break;
                }
            }
            break;
        }
        //会话列表标题栏
        case "ConversationListTitleBar": {
            switch (res.action) {
                //点击了左侧图标
                //打开会话列表时需提供 titleBarLeftIcon 才会有此回调，否则为系统默认行为
                case "titleBarLeftClick": {
                    jsBridge.toast("Conversation titleBarLeftClick");
                    break;
                }
                 //点击了右侧图标
                //打开会话列表时需提供 titleBarRightIcon 才会有此回调，否则为系统默认行为
                case "titleBarRightClick": {
                    jsBridge.toast("Conversation titleBarRightClick");
                    break;
                }
                //点击了右2图标
                //打开会话列表时需提供 titleBarRight2Icon 才会有此回调，否则为系统默认行为
                case "titleBarRight2Click": {
                    jsBridge.toast("Conversation titleBarRight2Click");
                    break;
                }
            }
            break;
        }
    }
    //此函数仅用于显示回调参数在本 DEMO 页面上
    showResult({
        event: event,
        res  : res
    });
});

//请拉到页面底部查看回调数据信息
$('html,body').animate({ scrollTop: $('#view').offset().top }, 500);

/**
回调参数说明：
event  //事件代码，字符串类型
res    //事件数据，JSON 对象
{
  action  //事件名称，字符串类型
  data    //事件参数
}
**/

removeListener 移除监听器

//移除监听器，不会再收到回调通知
//在需要时可重新调用 setListener
jsBridge.yxIm.removeListener();

网易云信 IM 即时通讯

setUserInfo 设置用户资料

云信 IM 账号的 accid
users[0].accid:

昵称
users[0].nickname:

头像
users[0].avatar: 

//初始化 init 时需启用 useCustomUserInfoDelegate
//需在 setListner 的 CustomUserInfoDelegate -> fetchUserInfo 中调用
jsBridge.yxIm.setUserInfo({
    //一个或多个用户资料数组
    users: [
      {
        //云信 IM 账号的 accid
        accid: "{{setUserInfo.users[0].accid}}",
        //昵称
        nickname: "{{setUserInfo.users[0].nickname}}",
        //头像
        avatar: "{{setUserInfo.users[0].avatar}}"
      }
      //...可以一次设置多个用户
    ]
}, function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }
});

setGlobalOptions 设置全局选项

震动
vibrateMode:

响铃
ringMode:

是否听筒播放
handsetMode:

是否显示已读状态
showReadStatus:

-
deleteWithAlias:

-
multiPortPushMode: 

jsBridge.yxIm.setGlobalOptions({
    //震动
    vibrateMode: {{setGlobalOptions.vibrateMode}},
    //响铃
    ringMode: {{setGlobalOptions.ringMode}},
    //是否听筒播放
    handsetMode: {{setGlobalOptions.handsetMode}},
    //是否显示已读状态
    showReadStatus: {{setGlobalOptions.showReadStatus}},
    //-
    deleteWithAlias: {{setGlobalOptions.deleteWithAlias}},
    //-
    multiPortPushMode: {{setGlobalOptions.multiPortPushMode}}
}, function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }
});

getGlobalOptions 获取全局选项

jsBridge.yxIm.getGlobalOptions(function(success, res) {
    if (success) {
        alert("成功" + JSON.stringify(res));
    } else {
        alert("失败" + JSON.stringify(res));
    }
});

navigate 界面 UI

主题
theme:

界面路径
path:

目标用户云信 IM 账号的 accid
accid:

昵称
nickname

头像
avatar

目标群组ID
teamId:

通话类型
callType:

是否显示标题栏
showTitleBar:

是否显示右侧图标
showTitleBarRightIcon:

是否显示右侧图标2
showTitleBarRight2Icon:

右侧图标链接
titleBarRightIcon:

右侧图标2链接
titleBarRight2Icon:

标题
titleBarTitle:

标题颜色
titleBarTitleColor:

是否显示头部(验证、黑名单、群)
showHeader:

是否显示标题栏
showTitleBar:

是否显示左侧图标
showTitleBarLeftIcon:

是否显示右侧图标
showTitleBarRightIcon:

是否显示右侧图标2
showTitleBarRight2Icon:

左侧自定义图标链接
titleBarLeftIcon:

右侧自定义图标链接
titleBarRightIcon:

右侧自定义图标2链接
titleBarRight2Icon:

标题
titleBarTitle:

标题颜色
titleBarTitleColor:

列表项标题大小
itemTitleSize:

列表项标题颜色
itemTitleColor:

列表项内容大小
itemContentSize:

列表项内容颜色
itemContentColor:

列表项时间大小
itemDateSize:

列表项时间颜色
itemDateColor:

头像圆角
avatarCornerRadius:

列表项背景色
itemBackgroundColor:

列表项高亮色
itemStickTopBackgroundColor:

jsBridge.yxIm.navigate({
    //主题，fun 为通用版，其他则为基础版
    theme : "{{navigate.theme}}",
    //界面路径
    path  : "{{navigate.path}}",
    //参数
    params: {
        accid: "{{navigate.params.accid}}",
        nickname: "{{navigate.params.nickname}}",
        avatar: "{{navigate.params.avatar}}",
        teamId: "{{navigate.params.teamId}}",
        //按序显示的工具栏按钮列表，null 则为系统默认按钮组，空数组 [] 则不显示任何按钮
        //如下可选值分别为：录音、表情、相册、更多
        inputBarItems: [ "record", "emoji", "album", "more" ],
        //按序显示展开的更多按钮列表，null 则为系统默认按钮组，空数组 [] 则不显示任何按钮
        //如下可选值分别为：拍摄、位置、文件、音视频通话
        inputMoreItems: [ "camera", "file", "location", "call" ],
        callType: "{{navigate.params.callType}}",
        //自定义通讯录界面 UI
        //是否显示标题栏
        showTitleBar: {{navigate.params.showTitleBar}},
        //是否显示右侧图标
        showTitleBarRightIcon: {{navigate.params.showTitleBarRightIcon}},
        //是否显示右侧图标2
        showTitleBarRight2Icon: {{navigate.params.showTitleBarRight2Icon}},
        //右侧自定义图标，留空则为默认图标、默认点击行为
        titleBarRightIcon: "{{navigate.params.titleBarRightIcon}}",
        //右侧自定义图标2，留空则为默认图标、默认点击行为
        titleBarRight2Icon: "{{navigate.params.titleBarRight2Icon}}",
        //标题
        titleBarTitle: "{{navigate.params.titleBarTitle}}",
        //标题颜色，留空则为系统默认色
        titleBarTitleColor: "{{navigate.params.titleBarTitleColor}}",
        //是否显示头部(验证、黑名单、群)
        showHeader: {{navigate.params.showHeader}},
        //自定义会话消息界面 UI
        //是否显示标题栏
        showTitleBar: {{navigate.params.showTitleBar}},
        //是否显示左侧图标
        showTitleBarLeftIcon: {{navigate.params.showTitleBarLeftIcon}},
        //是否显示右侧图标
        showTitleBarRightIcon: {{navigate.params.showTitleBarRightIcon}},
        //是否显示右侧图标2
        showTitleBarRight2Icon: {{navigate.params.showTitleBarRight2Icon}},
        //左侧图标，留空则为默认图标、默认点击行为
        titleBarLeftIcon: "{{navigate.params.titleBarLeftIcon}}",
        //右侧图标，留空则为默认图标、默认点击行为
        titleBarRightIcon: "{{navigate.params.titleBarRightIcon}}",
        //右侧图标2，留空则为默认图标、默认点击行为
        titleBarRight2Icon: "{{navigate.params.titleBarRight2Icon}}",
        //标题
        titleBarTitle: "{{navigate.params.titleBarTitle}}",
        //标题颜色，留空则为系统默认色
        titleBarTitleColor: "{{navigate.params.titleBarTitleColor}}",
        //列表项标题大小，小于1则为系统默认大小
        itemTitleSize: {{navigate.params.itemTitleSize}},
        //列表项标题颜色，留空则为系统默认色
        itemTitleColor: "{{navigate.params.itemTitleColor}}",
        //列表项内容大小，小于1则为系统默认大小
        itemContentSize: {{navigate.params.itemContentSize}},
        //列表项内容颜色，留空则为系统默认色
        itemContentColor: "{{navigate.params.itemContentColor}}",
        //列表项时间大小，小于1则为系统默认大小
        itemDateSize: {{navigate.params.itemDateSize}},
        //列表项时间颜色，小于0则为系统默认
        itemDateColor: "{{navigate.params.itemDateColor}}",
        //头像圆角，小于0则为系统默认圆角大小
        avatarCornerRadius: {{navigate.params.avatarCornerRadius}},
        //列表项背景色，留空则为系统默认色
        itemBackgroundColor: "{{navigate.params.itemBackgroundColor}}",
        //列表项高亮色，留空则为系统默认色
        itemStickTopBackgroundColor: "{{navigate.params.itemStickTopBackgroundColor}}"
    }
}, function(success, res) {
    if (success) {
        //成功
        //在本页面底部显示返回数据
        showResult(res);
        /*
        contact/selector 选择联系人时返回
        {
            selected_friends: [ "accid1", "accid2" ]
        }
        */
    } else {
        alert(JSON.stringify(res));
    }
});

监听回调数据：

全部示例
Copyright © 2024 WebApp快捷打包