互動消息是用于加強直播間消息溝通、提升交互體驗的服務。提供了豐富、易集成的SDK，可在用戶開發的直播應用中輕松集成評論、彈幕、點贊等能力。本文介紹Web端集成互動消息的操作步驟。
前提條件
客戶端集成前，請確保已經完成服務端集成，并提供客戶端訪問的獲取鑒權Token的接口。服務端集成操作指引，請參見服務端集成。
瀏覽器支持
Web端SDK依賴瀏覽器對WebRTC技術的支持，支持的瀏覽器版本如下：
Chrome 63+
Firefox 62+
Opera 50+
Edge 79+
Safari 11+
集成SDK
在script標簽中引入SDK。
<script src="https://g.alicdn.com/apsara-media-box/imp-interaction/1.3.2/alivc-im.iife.js"></script>使用以下文件為SDK增加類型定義，提升開發體驗。下載地址參見alivc-im.iife.d.ts.zip。
使用SDK
SDK使用需遵循如下操作順序：
初始化
登錄
相關操作
登出
反初始化
其中相關操作包含群組操作和消息操作，詳細說明如下：
群組操作
創建群組（需要以管理員身份進行登錄才能操作）
關閉群組（僅限群主/群管理員操作）
進入群組
離開群組
查詢群組信息
修改群組信息（僅限群主/群管理員操作）
查詢群組最近成員列表
查詢群組全部成員（僅限群主/群管理員操作）
對群組進行禁言（僅限群主/群管理員操作）
對群組取消禁言（僅限群主/群管理員操作）
對群組的用戶進行禁言（僅限群主/群管理員操作）
對群組的用戶取消禁言（僅限群主/群管理員操作）
查詢群組內被禁言的用戶列表（僅限群主/群管理員操作）
消息操作
單發消息
群發消息
查詢最近群發消息列表
查詢全部群發消息（僅限群主/群管理員操作）
刪除/撤回群消息
查詢歷史消息
注意事項
各ID需遵循以下規則：
appid ：最長64位，僅限于A~Z,a~z, 0~9及“-”, 不能包含其他字符
userid：最長64位，僅限于A~Z,a~z, 0~9及“-”, 不能包含其他字符
groupid：最長64位，僅限于A~Z,a~z, 0~9及“-”, 不能包含其他字符
初始化
使用前需要進行初始化，可以在相關業務模塊的主入口設置。
const { ImEngine, ImLogLevel } = AliVCInteraction;
// 獲取引擎單例
const engine = ImEngine.createEngine();
try {
await engine.init({
deviceId: "xxxx", // 設備ID，可選傳入
appId: "APP_ID", // 開通應用后可以在控制臺上拷貝
appSign: "APP_SIGN", // 開通應用后可以在控制臺上拷貝
logLevel: ImLogLevel.ERROR, // 日志級別，調試時使用 ImLogLevel.DBUG
});
// 需確認init異步操作成功后，才可以繼續執行login等操作
// 初始化成功，監聽事件
// 處理回調事件 AliVCIMEngineListenerProtocol
engine.on("connecting", () => {
console.log("connecting");
});
engine.on("connectfailed", (err) => {
console.log(`connect failed: ${err.message}`);
});
engine.on("connectsuccess", () => {
console.log("connect success");
});
engine.on("disconnect", (code: number) => {
console.log(`disconnect: ${code}`);
});
engine.on("tokenexpired", async (cb) => {
console.log("token expired");
// 這里需要更新為獲取新的登錄信息的代碼
const auth = await getLoginAuth();
cb(null, {
timestamp: 22123123, // 服務端返回timestamp值
nonce: 'nonce', // 服務端返回nonce值
role: 'admin', // 是否為admin角色，如果不需要可以設置為空
token: 'xxx' // 服務端返回token值
});
});
} catch (error) {
// init 錯誤碼含義
// 1001:重復初始化、1002:創建底層引擎失敗、-1:底層重復初始化、-2:初始化配置信息有誤
console.log(`Init Fail: code:${error.code}, message: ${error.msg}`);
}登錄
登錄需要鑒權信息，請確保已完成前提條件設置，并已通過服務端獲取到了鑒權信息，包括timestamp、nonce、token等值。
// 請確保init異步操作成功后，再執行此操作
await engine.login({
user: {
userId: 'abc', // 當前app登錄的用戶id
userExtension: '{}', // 用戶擴展信息，可以是頭像、昵稱等封裝為json字符串
},
userAuth: {
timestamp: 22123123, // 服務端返回timestamp值
nonce: 'nonce', // 服務端返回nonce值
role: 'admin', // 是否為admin角色，如果不需要可以設置為空
token: 'xxx' // 服務端返回token值
},
});
群組操作
以下操作需要確保login異步操作成功后，方可執行。
// 必須確保已經初始化，否則會返回空值
const groupManager = engine.getGroupManager();// 在適當的時機（例如進入房間后，且完成登錄后）添加群組操作事件監聽器
groupManager.on('exit', (groupId: string, reason: number) => {
// 退出群組
console.log(`group ${groupId} close, reason: ${reason}`);
})
groupManager.on('memberchange', (groupId: string, memberCount: number, joinUsers: ImUser[], leaveUsers: ImUser[]) => {
// 有人進入或離開群組
console.log(`group ${groupId} member change, memberCount: ${memberCount}, joinUsers: ${joinUsers.map(u => u.userId).join(',')}, leaveUsers: ${leaveUsers.map(u => u.userId).join('')}`);
})
groupManager.on('mutechange', (groupId: string, status) => {
// 群組的禁言狀態發生了變化
console.log(`group ${groupId} mute change`);
})
groupManager.on('infochange', (groupId: string, info) => {
// 有人離開了群組
console.log(`group ${groupId} info change`);
})
// 如需移除監聽某個事件，請使用 off 方法取消對應的事件
groupManager.off('infochange');
// 如需移除監聽所有事件，則使用 removeAllListeners 方法
groupManager.removeAllListeners();需要以管理員身份進行登錄才能調用成功。
await groupManager.createGroup({
groupId: '', // 群組ID，為空時，系統創建新群組后會返回唯一ID
groupName: 'xxx', // 群組昵稱，一定要設置，否則會失敗
groupMeta: 'xxx' // 群組擴展信息，如果有多個字段可以考慮封裝為JSON字符串
});僅限群主/群管理員調用，否則會調用失敗。
// 參數為 groupId
await groupManager.closeGroup('xxx');// 參數為 groupId
await groupManager.joinGroup('xxx');// 參數為 groupId
await groupManager.leaveGroup('xxx');// 參數為 groupId
const groupInfo = await groupManager.queryGroup('xxx');支持修改群擴展信息和設置管理員，僅限群主/群管理員調用，否則會調用失敗。
await groupManager.modifyGroup({
groupId: 'xxx', // 群組ID
forceUpdateAdmins: true, // 是否強制修改群管理員
admins: ['xxx'], // 群管理員ID 列表，需要清空時傳空數組且 forceUpdateAdmins 傳 true
forceUpdateGroupMeta: true, // 是否強制修改群擴展信息
groupMeta: 'xxx' // 群信息擴展信息Meta，需要清空時傳空字符串且 forceUpdateGroupMeta 傳 true
});// 參數為 groupId
const recentGroupUserInfo = groupManager.listRecentGroupUser(groupId);僅限群主/群管理員調用，否則會調用失敗。
const recentGroupUserInfo = groupManager.listGroupUser({
groupId: 'xxx', // 群組ID
nextpagetoken: 12, // 默認表示第一頁,遍歷時服務端會返回，客戶端獲取下一頁時，應帶上
pageSize: 10, // 最大不超過50
sortType: ImSortType.ASC // 排序方式,ASC-先加入優先，DESC-后加入優先
});
僅限群主/群管理員調用，否則會調用失敗。
// 參數為 groupId
await groupManager.muteAll('xxx');僅限群主/群管理員調用，否則會調用失敗。
// 參數為 groupId
await groupManager.cancelMuteAll('xxx');僅限群主/群管理員調用，否則會調用失敗。
await groupManager.muteUser({
groupId: 'xxx', // 群組ID
userList: ['xxx'] // 需要禁言的用戶ID列表
});僅限群主/群管理員調用，否則會調用失敗。
await groupManager.cancelMuteUser({
groupId: 'xxx', // 群組ID
userList: ['xxx'] // 需要取消禁言的用戶ID列表
});僅限群主/群管理員調用，否則會調用失敗。
// 參數為 groupId
const muteUsersInfo = await groupManager.listMuteUsers('xxx');消息操作
// 必須確保已經初始化，否則會返回空值
const messageManager = await engine.getMessageManager();// 收到其他用戶發來的單聊消息
messageManager.on("recvc2cmessage", (msg) => {
console.log('recvc2cmessage', msg);
});
// 收到群聊消息
messageManager.on("recvgroupmessage", (msg, groupId) => {
console.log('recvgroupmessage', msg, groupId);
});
// 群消息刪除
messageManager.on('deletegroupmessage', (msgId, groupId) => {
console.log(`group ${groupId} delete message ${msgId}`)
});
// 如需移除監聽某個事件，請使用 off 方法取消對應的事件
messageManager.off('recvgroupmessage');
// 如需移除監聽所有事件，則使用 removeAllListeners 方法
messageManager.removeAllListeners();try {
const messageId = await messageManager.sendC2cMessage({
receiverId: 'xxx', // 接受者id
data: 'xxx', // 發送消息內容，如果是結構化可考慮使用JSON字符串
type: 88888, // 自定義消息類型，需大于10000
skipAudit: false, // 可選（默認 false），跳過安全審核，true:發送的消息不經過阿里云安全審核服務審核；false：發送的消息經過阿里云安全審核服務審核，審核失敗則不發送。
level: ImMessageLevel.NORMAL // 可選（默認 NORMAL）, 消息分級，需要高可靠時，使用 ImMessageLevel.HIGH
});
console.log('send success, messageId: ', messageId);
} catch (error) {
// error.code 為 424 時為對方未在線，建議待對方上線后再重發
console.log('send fail', error);
}// 發群組消息前請確保已加入群組
try {
const messageId = await messageManager.sendGroupMessage({
groupId: 'xxx', // 群組id
data: 'xxx', // 發送消息內容，如果是結構化可考慮使用json字符串
type: 88888, // 自定義消息類型，需大于10000
skipAudit: false, // 可選（默認 false），跳過安全審核，true:發送的消息不經過阿里云安全審核服務審核；false：發送的消息經過阿里云安全審核服務審核，審核失敗則不發送。
skipMuteCheck: false, // 可選（默認 false），跳過禁言檢測，true:忽略被禁言用戶，還可發消息；false：當被禁言時，消息無法發送
level: ImMessageLevel.NORMAL, // 可選（默認 NORMAL）, 消息分級，需要高可靠時，使用 ImMessageLevel.HIGH
noStorage: true, // 可選（默認 false）true：表示該消息不需要存儲，也無法拉取查詢；false：消息進行存儲，可以拉取查詢。如果在直播間的彈幕場景，需要設置為 false。
repeatCount: 1 // 可選（默認 1）本消息重復數量，內容完成一樣的消息可以使用該字段進行聚合，并發送一次即可。
});
console.log('send success, messageId: ', messageId);
} catch (error) {
// error.code 為 425 時為未加入群組
console.log('send fail', error);
}// 刪除/撤回群組消息前請確保已加入群組
await messageManager.deleteMessage({
groupId: 'xxx', // 群組id
messageId: 'xxx', // 需要刪除的消息 id
});// 查詢群發消息列表前請確保已加入群組
const messagesInfo = await messageManager.listRecentMessage({
groupId: 'xxx', // 群組id
})說明
加入群組后，調用該接口可返回最近50條消息，所有類型的用戶均可調用。
僅限群主/群管理員調用，否則會調用失敗。普通用戶建議使用listRecentMessage接口獲取最近50條消息。
// ImSortType.ASC 正序，ImSortType.DESC 倒序
// 查詢全部群發消息列表前請確保已加入群組
const { ImSortType } = window.AliVCInteraction;
// 需要先調用 engine.getMessageManager 方法得到 messageManager 對象
const messageList = await messageManager.listMessage({
groupId: 'xxx', // 群組ID
type: 88888, // 自定義消息類型，需大于10000
nextPageToken: 12, // 不傳時表示第一頁，遍歷時服務端會返回下一頁Token，客戶端獲取下一頁時應帶上
pageSize: 10, // 默認10條，最大30條
sortType: ImSortType.ASC // 排序方式，默認為時間遞增
});// ImSortType.ASC 正序，ImSortType.DESC 倒序
const { ImSortType } = window.AliVCInteraction;
// 需要先調用 engine.getMessageManager 方法得到 messageManager 對象
const messageList = messageManager.listHistoryMessage({
groupId: 'xxx', // 群組ID
type: 88888, // 消息類型，自定義消息類型需大于10000
nextPageToken: 12, // 可選，不傳時表示第一頁，遍歷時服務端會返回下一頁Token，客戶端獲取下一頁時應帶上
pageSize: 10, // 默認10條，最大30條
sortType: ImSortType.ASC, // 排序方式，默認為時間遞增
beginTime: 0, // 可選（默認 0），開始時間，秒級時間戳
endTime: 0 // 可選（默認 0），結束時間，秒級時間戳
});登出
await engine.logout();反初始化
登出后如無需再進行登錄，可以進行反初始化操作，SDK會對底層操作實例進行釋放。
engine.unInit()快速體驗
前提條件
快速體驗demo需要您的開發環境啟動一個 HTTP 服務，如果您沒有安裝http-server的npm包，可以先執行npm install --global http-server指令全局安裝。
步驟一：創建目錄
創建一個demo文件夾，并按照下方文件目錄結構創建好quick.html、quick.js兩個文件。
- demo
- quick.html
- quick.js步驟二：編輯quick.html
將下方代碼復制到quick.html，并保存。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>互動消息 quick start</title>
<link rel="stylesheet" />
</head>
<body class="container">
<h1 class="mt-2">互動消息 quick start</h1>
<div class="toast-container position-fixed top-0 end-0 p-3">
<div id="loginToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">登錄消息</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" id="loginToastBody"></div>
</div>
</div>
<div class="row mt-3">
<div class="col-6">
<form id="loginForm">
<div class="form-group mb-2">
<label for="userId" class="form-label">用戶ID</label>
<input class="form-control form-control-sm" id="userId" placeholder="請輸入英文字母或數字" />
</div>
<div class="form-group mb-2">
<label for="groupId" class="form-label">群組ID</label>
<input class="form-control form-control-sm" id="groupId" placeholder="加入群組前請確認是否已存在，不存在先創建" />
</div>
<div class="mb-2">
<button id="loginBtn" type="button" class="btn btn-primary btn-sm">登錄</button>
<button id="joinBtn" type="button" class="btn btn-primary btn-sm">加入群組</button>
<button id="createBtn" type="button" class="btn btn-primary btn-sm">創建群組</button>
<button id="leaveBtn" type="button" class="btn btn-secondary btn-sm" disabled>離開群組</button>
<button id="logoutBtn" type="button" class="btn btn-secondary btn-sm" disabled>登出</button>
</div>
<p class="mb-2">假如群組ID已存在，可以一鍵登錄+加入群組</p>
<div class="mb-2">
<button id="oneLoginBtn" type="button" class="btn btn-primary btn-sm">一鍵登錄+加入群組</button>
<button id="oneLogoutBtn" type="button" class="btn btn-secondary btn-sm" disabled>一鍵離開群組+登出</button>
</div>
</form>
<form id="msgForm" action="#" class="mt-4">
<div class="form-group mb-2">
<label for="msgText" class="form-label">消息</label>
<input class="form-control form-control-sm" id="msgText" />
</div>
<div class="mb-2">
<button id="sendBtn" type="button" class="btn btn-primary btn-sm" disabled>發送</button>
</div>
</form>
</div>
<div class="col-6">
<h5>
消息展示
<button id="clearBtn" type="button" class="btn btn-secondary btn-sm float-end">清空</button>
</h5>
<div id="msgList" class="mt-4"></div>
</div>
</div>
<script src="https://g.alicdn.com/code/lib/jquery/3.7.1/jquery.min.js"></script>
<script src="https://g.alicdn.com/code/lib/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<script crossorigin="anonymous" src="https://g.alicdn.com/apsara-media-box/imp-interaction/1.3.2/alivc-im.iife.js"></script>
<script src="./quick.js"></script>
</body>
</html>步驟三：編輯quick.js
將下方代碼復制到quick.js，并將AppId、AppKey、AppSign粘貼至代碼指定變量中保存。
// 請從控制臺復制對應的值填入下面 AppId、 AppKey、AppSign 變量當中
// 注意：這里僅作為本地快速體驗使用，實際開發請勿在前端泄露 AppKey
const AppId = '';
const AppKey = '';
const AppSign = '';
const { ImEngine, ImLogLevel, ImMessageLevel } = window.AliVCInteraction;
// 獲取引擎單例
const engine = ImEngine.createEngine();
let groupManager;
let messageManager;
let joinedGroupId;
const sha256 = async (message) => {
// Convert the message string to an ArrayBuffer
const encoder = new TextEncoder();
const data = encoder.encode(message);
// Calculate the hash using the subtle crypto API
const result = await crypto.subtle.digest('SHA-256', data).then((buffer) => {
// Convert the ArrayBuffer to a hexadecimal string
let hash = Array.prototype.map.call(new Uint8Array(buffer), (x) => ('00' + x.toString(16)).slice(-2)).join('');
return hash;
});
return result;
};
const getLoginAuth = async (userId, role) => {
const nonce = 'AK_4';
const timestamp = Math.floor(Date.now() / 1000) + 3600 * 3;
const pendingShaStr = `${AppId}${AppKey}${userId}${nonce}${timestamp}${role}`;
const appToken = await sha256(pendingShaStr);
return {
nonce,
timestamp,
token: appToken,
role,
};
};
function showToast(baseId, message) {
$(`#${baseId}Body`).text(message);
const toast = new bootstrap.Toast($(`#${baseId}`));
toast.show();
}
function showMessage(text) {
$('#msgList').append(`<div class="mb-2">${text}</div>`);
}
function listenEngineEvents() {
// 處理回調事件 AliVCIMEngineListenerProtocol
engine.on("connecting", () => {
console.log("connecting");
});
engine.on("connectfailed", (err) => {
console.log(`connect failed: ${err.message}`);
});
engine.on("connectsuccess", () => {
console.log("connect success");
});
engine.on("disconnect", (code) => {
console.log(`disconnect: ${code}`);
});
engine.on("tokenexpired", async (cb) => {
console.log("token expired");
// 這里需要更新為獲取新的登錄信息的代碼
// const auth = await getLoginAuth(userId, role);
// cb(null, auth);
});
}
function listenGroupEvents() {
if (!groupManager) {
return;
}
// 在適當的時機（例如進入房間后，且完成登錄后）添加群組操作事件監聽器
groupManager.on('exit', (groupId, reason) => {
// 退出群組
showMessage(`group ${groupId} close, reason: ${reason}`);
})
groupManager.on('memberchange', (groupId, memberCount, joinUsers, leaveUsers) => {
// 有人進入或離開群組
showMessage(`group ${groupId} member change, memberCount: ${memberCount}, joinUsers: ${joinUsers.map(u => u.userId).join(',')}, leaveUsers: ${leaveUsers.map(u => u.userId).join('')}`);
})
groupManager.on('mutechange', (groupId, status) => {
// 群組的禁言狀態發生了變化
showMessage(`group ${groupId} mute change`);
})
groupManager.on('infochange', (groupId, info) => {
// 有人離開了群組
showMessage(`group ${groupId} info change`);
})
}
function listenMessageEvents() {
if (!messageManager) {
return;
}
// 收到群聊消息
messageManager.on("recvgroupmessage", (msgData, groupId) => {
console.log('recvgroupmessage', msgData, groupId);
showMessage(`receive group: ${msgData.groupId}, type: ${msgData.type}, data: ${msgData.data}`);
});
}
async function login(userId) {
// 先初始化，注意別忘了加 await
await engine.init({
deviceId: "xxxx", // 設備ID，可選傳入
appId: AppId, // 開通應用后可以在控制臺上拷貝
appSign: AppSign, // 開通應用后可以在控制臺上拷貝
logLevel: ImLogLevel.ERROR, // 日志級別，調試時使用 ImLogLevel.DBUG
});
// 初始化成功，監聽事件
listenEngineEvents();
const role = 'admin'; // 是否為admin角色，如果不需要可以設置為空
// 獲取登錄信息
const authData = await getLoginAuth(userId, role);
// 初始化成功再登錄，注意別忘了加 await
await engine.login({
user: {
userId, // 當前app登錄的用戶id
userExtension: '{}', // 用戶擴展信息，可以是頭像、昵稱等封裝為json字符串
},
userAuth: {
timestamp: authData.timestamp, // 服務端返回timestamp值
nonce: authData.nonce, // 服務端返回nonce值
role: authData.role, // 是否為admin角色，如果不需要可以設置為空
token: authData.token, // 服務端返回token值
},
});
// 必須確保已經初始化，否則會返回空值
groupManager = engine.getGroupManager();
messageManager = engine.getMessageManager();
}
async function logout() {
await engine.logout();
engine.unInit();
groupManager = undefined;
messageManager = undefined;
}
async function joinGroup(groupId) {
if (!groupManager) {
return;
}
await groupManager.joinGroup(groupId);
joinedGroupId = groupId;
listenGroupEvents();
listenMessageEvents();
}
async function leaveGroup() {
if (!groupManager || !joinedGroupId) {
return;
}
await groupManager.leaveGroup(joinedGroupId);
groupManager.removeAllListeners();
messageManager.removeAllListeners();
}
$('#loginBtn').click(() => {
const userId = $('#userId').val();
if (!userId) {
return;
}
login(userId)
.then(() => {
console.log('初始化、登錄成功');
showToast('loginToast', '初始化、登錄成功');
$('#loginBtn').prop('disabled', true);
$('#logoutBtn').prop('disabled', false);
})
.catch((err) => {
console.log('初始化、登錄失敗', err.code, err.msg);
});
});
$('#oneLoginBtn').click(async () => {
const userId = $('#userId').val();
const groupId = $('#groupId').val();
if (!userId || !groupId) {
return;
}
try {
await login(userId);
showToast('loginToast', '初始化、登錄成功');
$('#loginBtn').prop('disabled', true);
$('#logoutBtn').prop('disabled', false);
await joinGroup(groupId);
showMessage(`加入群組 ${groupId} 成功`);
$('#joinBtn').prop('disabled', true);
$('#leaveBtn').prop('disabled', false);
$('#sendBtn').prop('disabled', false);
$('#oneLoginBtn').prop('disabled', true);
$('#oneLogoutBtn').prop('disabled', false);
} catch (error) {
console.log('一鍵登錄+加入群組', err.code, err.msg);
}
});
$('#joinBtn').click(() => {
const groupId = $('#groupId').val();
if (!groupId || !groupManager) {
return;
}
joinGroup(groupId)
.then(() => {
showMessage(`加入群組 ${groupId} 成功`);
$('#joinBtn').prop('disabled', true);
$('#leaveBtn').prop('disabled', false);
$('#sendBtn').prop('disabled', false);
})
.catch((err) => {
console.log('加入群組失敗', err.code, err.msg);
});
});
$('#logoutBtn').click(() => {
logout()
.then(() => {
console.log('登出成功');
showToast('loginToast', '登出成功');
$('#loginBtn').prop('disabled', false);
$('#logoutBtn').prop('disabled', true);
})
.catch((err) => {
console.log('初始化、登錄失敗', err.code, err.msg);
});
});
$('#leaveBtn').click(() => {
leaveGroup()
.then(() => {
showMessage('離開群組成功');
$('#leaveBtn').prop('disabled', true);
$('#sendBtn').prop('disabled', true);
$('#joinBtn').prop('disabled', false);
})
.catch((err) => {
console.log('離開群組失敗', err.code, err.msg);
});
});
$('#oneLogoutBtn').click(async () => {
try {
// 先離開群組，無論成功與否，都繼續執行 logout
await leaveGroup();
} catch (error) {
console.log(error);
}
try {
await logout();
showToast('loginToast', '登出成功');
$('#loginBtn').prop('disabled', false);
$('#logoutBtn').prop('disabled', true);
$('#leaveBtn').prop('disabled', true);
$('#sendBtn').prop('disabled', true);
$('#joinBtn').prop('disabled', false);
$('#oneLogoutBtn').prop('disabled', true);
$('#oneLoginBtn').prop('disabled', false);
} catch (error) {
console.log(error);
}
});
$('#createBtn').click(() => {
const groupId = $('#groupId').val();
if (!groupManager) {
return;
}
groupManager.createGroup(
{
groupId, // 群組ID，為空時，系統創建新群組后會返回唯一ID
groupName: 'xxx', // 群組昵稱，一定要設置，否則會失敗
groupMeta: 'xxx' // 群組擴展信息，如果有多個字段可以考慮封裝為JSON字符串
}
)
.then((res) => {
console.log('創建群組成功', res);
})
.catch((err) => {
console.log('創建群組失敗', err.code, err.msg);
});
});
$('#sendBtn').click(() => {
const text = $('#msgText').val();
if (!messageManager || !joinedGroupId) {
return;
}
messageManager.sendGroupMessage({
groupId: joinedGroupId, // 群組id
data: text, // 發送消息內容，如果是結構化可考慮使用json字符串
type: 88888, // 自定義消息類型，需大于10000
skipAudit: false, // 可選（默認 false），跳過安全審核，true:發送的消息不經過阿里云安全審核服務審核；false：發送的消息經過阿里云安全審核服務審核，審核失敗則不發送。
skipMuteCheck: false, // 可選（默認 false），跳過禁言檢測，true:忽略被禁言用戶，還可發消息；false：當被禁言時，消息無法發送
level: ImMessageLevel.NORMAL, // 可選（默認 NORMAL）, 消息分級，需要高可靠時，使用 ImMessageLevel.HIGH
noStorage: true, // 可選（默認 false）true：表示該消息不需要存儲，也無法拉取查詢；false：消息進行存儲，可以拉取查詢。如果在直播間的彈幕場景，需要設置為 false。
repeatCount: 1 // 可選（默認 1）本消息重復數量，內容完成一樣的消息可以使用該字段進行聚合，并發送一次即可。
})
.then((res) => {
console.log('群消息發送成功', res);
$('#msgText').val('');
})
.catch((err) => {
console.log('群消息發送失敗', err.code, err.msg);
});
});
$('#clearBtn').click(() => {
$('#msgList').empty();
});步驟四：運行體驗
在終端中進入demo文件夾，然后執行
http-server -p 8080，啟動一個HTTP服務。瀏覽器中新建標簽頁，訪問
localhost:8080/quick.html，在界面上填入用戶ID ，單擊登錄按鈕。在界面上填入群組ID，單擊加入群組按鈕。
瀏覽器中再新建一個標簽頁，訪問
localhost:8080/quick.html，在界面上填入與上一步相同的群組ID和另一個用戶ID，單擊登錄、加入群組按鈕。在界面上消息文本輸入框輸入要發送的消息，單擊發送按鈕，即可發送群消息。發送成功后，兩個用戶將收到服務端下發的對應消息。
文檔內容是否對您有幫助？