发送虚拟礼物
功能简介
社交应用中的虚拟礼物功能允许用户向主播发送虚拟礼物,这些礼物可以是各种物品,如咖啡、汽车等。
通过发送虚拟礼物,观众可以在直播节目中与主播建立联系,并增强社交应用中的互动性和活跃度。
本文档将为您介绍,如何实现虚拟礼物功能。
前提条件
在实现虚拟礼物功能前,请确保已集成互动直播 UIKit,详情请参考 快速开始(适用于连麦)。
实现流程
创建虚拟礼物入口
创建一个用于发送虚拟礼物的入口,可通过配置 ZegoUIKitPrebuiltLiveAudioRoomFragment.addButtonToBottomMenuBar
添加按钮并添加相应的事件。
ZegoUIKitPrebuiltLiveAudioRoomFragment fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(appID,
appSign, userID, userName, roomID, config);
// 在 liveAudioRoom 观众中添加礼物按钮
GiftHelper giftHelper = new GiftHelper(findViewById(R.id.layout), userID, userName);
View giftButton = giftHelper.getGiftButton(this, appID, serverSecret, roomID);
fragment.addButtonToBottomMenuBar(Collections.singletonList(giftButton), ZegoLiveAudioRoomRole.AUDIENCE);
实现礼物发送逻辑
当观众点击礼物发送按钮时,即可触发业务服务器的相应 API,请求参数如下:
{
"room_id": "room888", // 直播房间 ID
"user_id": "user987", // 礼物发送者的用户 ID
"user_name": "James", // 礼物发送者的用户名
"gift_type": 1001, // 礼物类型
"gift_count": 2, // 礼物数量
"access_token": "fasd2r34dfasd...fasdf", // 用于认证的Token
"timestamp": 1670814533, // 请求时间戳
}
您可以根据自己的业务需求灵活修改请求参数,一旦观众请求发送礼物,您的服务器将执行以下操作:
- 验证用户的账户余额是否满足基于参数所需的金额。
- 从用户的账户余额中扣除费用。
- 增加主播的礼物金额。
观众在处理后收到相应的状态码,并创建一个消息队列,以通知主播和其他观众关于礼物的信息。
通过使用 Next.js
来展示如何调用 ZEGO 服务器 API。您可以下载 源代码 作为参考。
通知主持人和观众显示礼物动画
要向主持人和观众显示礼物动画,请使用 发送房间内消息 API 并通过 MessageType: 2
发送通知。
我们建议将多个礼物合并为一条消息,以避免超过每秒每个应用 ID 10 个请求的速率限制。例如:
当收礼者遇到网络问题而未能接收到信号的情况下,可能会发送失败。
{
"FromUserId": "serverID",
"RoomId": "room888",
"MessageType": 2,
"Priority": 1,
"MessageBody": {
"Message": [
{
"user_id": "user987",
"user_name": "James",
"gift_type": 1001,
"gift_count": 2,
"timestamp": 1670814533,
},
...
],
"ExtendedData":"",
}
}
监听礼物消息并显示礼物动画
如需显示礼物动画,只需在客户端上监控礼物消息。一旦收到新的礼物消息,即可播放动画,不同的角色需要不同的礼物消息回调。
为了获得酷炫的动画效果,使用 Lottie 或 SVGA 等动画库在屏幕上显示文件。
礼物发送者
在发送礼物后,礼物发送者可以通过检查礼物发送 API 的状态码,来确认其是否成功交付。如果 API 返回成功代码,将显示礼物动画。
imageView.setOnClickListener(v -> {
// 在演示中,礼物是直接通过发送命令发送的。但是,
// 当您集成时,您需要通过您的业务服务器转发命令
// 以便处理结算相关的逻辑。
final String path = "https://zego-example-server-nextjs.vercel.app/api/send_gift";
JSONObject jsonObject = new JSONObject();
try {
jsonObject.put("app_id", appID);
jsonObject.put("server_secret", serverSecret);
jsonObject.put("room_id", roomID);
jsonObject.put("user_id", userID);
jsonObject.put("user_name", userName);
jsonObject.put("gift_type", 1001);
jsonObject.put("gift_count", 1);
jsonObject.put("timestamp", System.currentTimeMillis());
} catch (JSONException e) {
e.printStackTrace();
}
String jsonString = jsonObject.toString();
new Thread() {
public void run() {
httpPost(path, jsonString, () -> showAnimation());
}
}.start();
});
主播和其余观众
假设服务器使用不可靠的信令通道广播消息。在这种情况下,需要监听不可靠消息的通知回调方法 onInRoomCommandReceived
以确定是否有人在发送礼物。当收到新的礼物通知时,它将显示礼物效果。
如果服务器使用不可靠的信令通道广播消息,可以监听 onInRoomCommandReceived
通知回调方法,以检测礼物是否已发送,一旦收到新的礼物通知,将会显示礼物效果。
// 当有人在房间中发送礼物时,每个人都会收到 InRoomCommand
ZegoUIKit.getSignalingPlugin().addInRoomCommandMessageListener(new ZegoUIKitSignalingPluginInRoomCommandMessageListener() {
@Override
public void onInRoomCommandMessageReceived(List<ZegoSignalingInRoomCommandMessage> messages,
String roomID) {
for (ZegoSignalingInRoomCommandMessage message : messages) {
if (!message.senderUserID.equals(userID) && message.text.contains("gift_type")) {
showAnimation();
}
}
}
});
运行示例
如需访问此功能的示例代码,请从 此处 下载。