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

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

JS-SDK 引用方式:

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

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

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

产品介绍 注册/登录 】;

基本设置

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: "AG8九游会1", avatar: "https://www.boinews24.com/assets/trtc/a1.png" }, ym2: { accid: "ym2", nickname: "AG8九游会2", avatar: "https://www.boinews24.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.boinews24.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: "AG8九游会 Callkit 测试" }); break; } //异步请求用户头像,res.data 为正在请求获取的 { accid: "xxx" } //准备好数据后请调用 setCallkitUserAvatar 接口设置头像 case "loadAvatar": { jsBridge.yxIm.setCallkitUserAvatar({ accid: res.data.accid, avatar: "https://www.boinews24.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 移除监听器

//移除监听器,不会再收到回调通知//在需要时可重新调用 setListenerjsBridge.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)); }});

监听回调数据: