Web 直播互动功能开发指南：聊天、礼物、点赞、PK、屏幕共享一站式实现

直播互动功能是提升用户参与度和留存率的关键。除了核心的音视频推拉流外，弹幕聊天、虚拟礼物、点赞、PK、屏幕共享等互动组件直接决定直播间的活跃度。本篇将以即构(ZEGO)的直播方案为例按功能模块逐一讲解实现方案。

互动功能架构概览

一个功能完整的互动直播间通常包含以下模块：

消息通道选型

直播间的消息通道有两种选择：

方案一：Express SDK 内置消息

ZEGO Express SDK 内置了三种消息能力，无需额外集成：

• 广播消息：发送给房间内所有用户，适合文本聊天
• 弹幕消息：高频、不保证可靠性的消息，适合直播弹幕场景
• 自定义信令：发送给房间内单个或多个指定用户，适合礼物、点赞、连麦邀请

// 发送弹幕消息
zg.sendBarrageMessage(roomID, '666！');

// 发送自定义信令（给指定用户）
zg.sendCustomCommand(roomID, 'like', ['user-001', 'user-002']);

// 监听广播消息
zg.on('IMRecvBroadcastMessage', (roomID, messageList) => {
  // 渲染到聊天区
});

方案二：即时通讯 SDK（ZIM）

如果业务需要更完整的消息能力（消息存储、已读回执、离线推送、历史消息查询），建议接入 ZIM。ZIM 提供单聊、群聊、房间消息等完整功能，且与 Express SDK 打通，共享用户体系和房间数据。

Live Streaming Kit 内部已集成 ZIM 扩展，支持：

• 文本聊天消息实时展示
• 用户加入/离开通知
• 自定义消息回调（用于礼物、点赞等）

// 安装 ZIM + Live Streaming Kit
npm i @zegocloud/zego-uikit-prebuilt zego-zim-web@2.5.0

// 在 UIKit 中配置 ZIM
const zp = ZegoUIKitPrebuilt.create(token);
zp.joinRoom({
  lowerLeftNotification: {
    showUserJoinAndLeave: true,
    showTextChat: true,
  },
  onInRoomMessageReceived: (messageInfo) => {
    // 自定义消息渲染
  },
});

礼物与点赞

实现逻辑

礼物和点赞的核心机制相同：发送方通过消息通道发送一条”礼物/点赞”指令，接收方和其他观众解析指令后触发对应的 UI 动画。

// 发送礼物（自定义信令或广播消息）
zg.sendCustomCommand(roomID, JSON.stringify({
  type: 'gift',
  giftID: 'gift-rose',
  giftName: '玫瑰',
  count: 1,
  from: 'user-001',
  to: 'user-002', // 主播或指定用户
}), []); // 空数组表示发给房间内所有用户

// 接收方解析并展示
zg.on('IMRecvCustomCommand', (roomID, fromUser, command) => {
  const data = JSON.parse(command);
  if (data.type === 'gift') {
    // 展示礼物动画
    showGiftAnimation(data.giftName, data.count, data.from);
  } else if (data.type === 'like') {
    // 累加点赞数
    likeCount += data.count;
  }
});

Live Streaming Kit 直接内置了送礼物功能，无需手动实现消息通道。

礼物动画优化建议

• 预加载礼物资源（图片/动效/SVG）到浏览器缓存
• 使用 requestAnimationFrame 代替 setInterval 驱动动画循环
• 批量处理高频点赞（合并 1s 内的多次点赞为一次显示）

PK 功能实现

PK 是秀场直播的核心互动玩法，两个主播在各自的直播间同屏对决，观众通过送礼物等方式为自己支持的主播投票。

技术实现

PK 的技术本质是跨房间混流：

1. 主播 A 在房间 A 推流
2. 主播 B 在房间 B 推流
3. 服务器将两路流混流为一路输出（各占半屏）
4. 两个房间的观众看到同一路混流画面

// PK 开始：创建混流任务
const mixConfig = {
  outputStreamID: 'pk-mix-stream',
  inputList: [
    { streamID: 'stream-host-a', layout: { x: 0, y: 0, width: 640, height: 720 } },
    { streamID: 'stream-host-b', layout: { x: 640, y: 0, width: 640, height: 720 } },
  ],
  outputConfig: { width: 1280, height: 720, frameRate: 15 },
};

await zg.startMixerTask(mixConfig);

// PK 结束：停止混流
await zg.stopMixerTask('pk-mix-stream');

计分逻辑

PK 计分通常基于礼物价值的累计。计分逻辑在业务服务端实现：

1. 观众送礼时，服务端记录礼物价值到对应主播的 PK 分数
2. 服务端通过消息通道定时广播当前分数到两个房间
3. PK 结束后，服务端宣布获胜方

PK 的延迟控制

PK 场景中，两位主播需要相互看到对方的画面才能做出反应（如嘲讽、拉票）。建议：

• 两个主播之间用 RTC 链路互看（< 400ms 延迟）
• 观众端通过混流输出观看（增加一次转码延迟，但不影响两位主播的互动节奏）
• 计分数据用消息通道实时推送，不与音视频流同步

屏幕共享

屏幕共享允许主播展示浏览器标签页、窗口或整个桌面，适合教育直播、游戏直播、软件演示等场景。

实现

// 创建屏幕共享流
const screenStream = await zg.createZegoStream({
  screen: {
    video: true,
    audio: true, // 包含系统音频
  },
});

// 以第二路流推送到房间
await zg.startPublishingStream('screen-stream-001', screenStream);

兼容性说明

互动功能的浏览器兼容性

• 弹幕消息和广播消息在所有支持 WebRTC 的浏览器上均可使用
• 送礼物动画依赖 CSS3 和 Canvas，Chrome/Safari/Firefox 均支持
• 屏幕共享仅桌面端浏览器支持
• 移动端微信浏览器支持音视频推拉流，但不支持屏幕共享和多路流同时渲染

常见问题

直播聊天的消息有频率限制吗？

有。不同服务商的限制不同，ZEGO Express SDK 的广播消息发送频率限制请参考官方文档的”限制说明”。建议在客户端做发送冷却（1-2 秒内不允许重复发送）。

PK 时需要两个主播的音量都正常吗？

PK 混流时，两路流的音频会混合输出。建议混流前在服务端或客户端分别调节两路流的音量，确保音量均衡。ZEGO 混流接口支持对每路输入流设置音量增益。

礼物动画和直播流之间会互相影响吗？

不会。礼物动画是独立的 UI 层，运行在浏览器渲染进程中，与音视频解码渲染互不干扰。但如果同一时间触发大量礼物动画（如高并发送礼），浏览器主线程可能受影响导致视频偶尔卡顿，建议控制同时显示的动画数量。

总结

• 直播间的互动功能分为消息通道和音视频通道两个层面，消息通道负责文本/指令交互，音视频通道负责连麦/PK。
• 简单互动（聊天、礼物、点赞）可以使用 Express SDK 内置消息能力实现；复杂互动（历史消息、离线推送）建议接入 ZIM。
• PK 和屏幕共享是高级互动功能，PK 的核心是跨房间混流，屏幕共享需要浏览器版本支持且仅限桌面端。

延伸阅读：
– 什么是 Web 直播连麦？技术原理、延迟控制与 1vN 多人互动方案