>## [**移动端演示 http://8.146.211.120:8081/#/**](https://gitee.com/link?target=http%3A%2F%2F8.146.211.120%3A8081%2F%23%2F)
## [**管理端演示 http://8.146.211.120:8088/#/**](https://gitee.com/link?target=http%3A%2F%2F8.146.211.120%3A8088%2F%23%2F)
## [**项目整体介绍及演示**](https://gitee.com/link?target=https%3A%2F%2Fblog.csdn.net%2Fqq_35238367%2Farticle%2Fdetails%2F145126222)

**前言**
（16）～（18）分别做了 IM、直播、聊天室。把用户真正「拉进来」，还差最后一公里：**分享**与**可控的试用时长**。
本章聚焦两件运营向能力：
1. 直播 / 聊天室邀请以**卡片消息**发到私信或群聊，点击直达房间
2. `max-minutes` 体验限制：配置、倒计时、到期关房、一键 SQL


----
![IM 架构：卡片消息走统一协议](https://developer.qcloudimg.com/http-save/yehe-12101878/04bc4457806b7d1a66ec617a0543f174.png)
![消息中的直播 / 聊天室邀请卡片](https://developer.qcloudimg.com/http-save/yehe-12101878/953b8b5d07c8bc3753a354e4c606d76e.png)
![线上演示：消息 Tab 会话列表](https://developer.qcloudimg.com/http-save/yehe-12101878/e1bfc2452659ce1148957ea2f8bd400c.png)
![线上演示：私信聊天页](https://developer.qcloudimg.com/http-save/yehe-12101878/905fbdc6e09e8cbb356b02979cfd9cdb.png)
![直播倒计时示意](https://developer.qcloudimg.com/http-save/yehe-12101878/1f41eabad5117b0ae83220c7dae3a065.png)
![聊天室倒计时示意](https://developer.qcloudimg.com/http-save/yehe-12101878/35952566f3618adba262e29d25e2e937.png)
![开播页](https://developer.qcloudimg.com/http-save/yehe-12101878/b2977e3a0ae47120a9aecccafad13891.png)
![聊天室入口](https://developer.qcloudimg.com/http-save/yehe-12101878/f483d9ee5fa9b4d7eda17dfc92bcd679.png)
![管理端仪表盘（线上截图）](https://developer.qcloudimg.com/http-save/yehe-12101878/62d6c56986ff1e8930800477d8bae40a.png)
### 一、分享卡片：为什么不用纯文本链接

纯文本链接有两个问题：聊天里不好识别；无法带封面、标题、主播信息。
因此扩展私信/群聊 `contentType`：

|类型值|含义|会话摘要|
|:-:|:-:|:-:|
|`7` LIVE|直播邀请卡|`[直播]标题`|
|`8` VOICE_ROOM|聊天室邀请卡|`[聊天室]标题`|
后端摘要（16 已埋点）：
```
if (contentType == TYPE_LIVE) {
    return "[直播]" + extractNoteTitle(content);
}
if (contentType == TYPE_VOICE_ROOM) {
    return "[聊天室]" + extractNoteTitle(content);
}
```
#### 发送链路

```
直播间/聊天室点击分享
    → 选择「发给好友」
    → share-invite 页选互关好友（或进群）
    → 组装卡片 payload 调用私信/群发接口
    → 对端气泡渲染卡片
    → 点击跳转 live?id= / voice-room/room?roomNo=
```
#### 邀请链接（站外私域）

```
export function buildLiveInviteLink(noteId) {
  // #ifdef H5
  if (typeof location !== 'undefined') {
    const base = `${location.origin}${location.pathname || '/'}`;
    return `${base}#/pages/note/live?id=${encodeURIComponent(noteId)}`;
  }
  // #endif
  return `/pages/note/live?id=${noteId}`;
}

export function buildVoiceRoomInviteLink(roomNo) {
  // #ifdef H5
  if (typeof location !== 'undefined') {
    const base = `${location.origin}${location.pathname || '/'}`;
    return `${base}#/pages/voice-room/room?roomNo=${encodeURIComponent(roomNo)}`;
  }
  // #endif
  return `/pages/voice-room/room?roomNo=${roomNo}`;
}
```
#### 卡片 payload 组装思路

与笔记分享同一套路（`buildNotePayload` 模式）：JSON 字符串写入 `content`，`contentType` 标 7 或 8。
```
// 直播卡示意
function buildLiveSharePayload(note) {
  return JSON.stringify({
    noteId: note.id,
    title: note.title || '直播中',
    coverUrl: note.coverUrl || '',
    nickname: note.anchorNickname || '',
    avatar: note.anchorAvatar || '',
    liveMode: note.liveMode, // 0 语音 / 1 视频
  });
}

// 聊天室卡示意
function buildVoiceRoomSharePayload(room) {
  return JSON.stringify({
    roomNo: room.roomNo,
    title: room.title || '聊天室',
    coverUrl: room.ownerAvatar || '',
    nickname: room.ownerNickname || '',
    mediaMode: room.mediaMode,
  });
}

// 发送
await DmApi.sendMessage({
  peerId,
  contentType: 7, // 或 8
  content: buildLiveSharePayload(note),
});
```
后端只需放宽 `contentType` 白名单并写好会话摘要，**不必为卡片单独建表**。
前端协议与页面：
- `sheep/helper/dmContent.js`
- `pages/message/share-invite.vue`
- `pages/message/chat.vue` / `group-chat.vue` 渲染与点击跳转


----
### 二、体验时长：配置驱动


|config_key|默认|说明|
|:-:|:-:|:-:|
|`member.live.max-minutes`|30|直播单场最长分钟，`0`=不限制|
|`member.voice-room.max-minutes`|30|聊天室单场最长分钟，`0`=不限制|
#### 三端协同

1. **后端**：credentials / 进房接口返回 `maxMinutes` + 到期时间；定时任务扫到期房间
2. **Vue 页**：`experienceCountdown.js` 中部倒计时；到期弹窗
3. **Hybrid TRTC 页**：URL 带 `expireAt`，App WebView 内同样倒计时兜底

```
export function createExperienceCountdown(options) {
  const expireAtMs = Number(options?.expireAtMs) || 0;
  const onTick = options?.onTick;
  const onExpire = options?.onExpire;
  let timer = null;

  const tick = () => {
    const remain = Math.max(0, Math.ceil((expireAtMs - Date.now()) / 1000));
    if (typeof onTick === 'function') onTick(remain, formatRemain(remain));
    if (remain <= 0) {
      clearInterval(timer);
      if (typeof onExpire === 'function') onExpire();
    }
  };

  return {
    start() { tick(); timer = setInterval(tick, 1000); },
    stop() { if (timer) clearInterval(timer); },
  };
}
```
用户感知：进房就能看到「体验剩余」，而不是到点突然被踢却不知道原因。
![直播倒计时示意](https://developer.qcloudimg.com/http-save/yehe-12101878/1f41eabad5117b0ae83220c7dae3a065.png)
![聊天室倒计时示意](https://developer.qcloudimg.com/http-save/yehe-12101878/35952566f3618adba262e29d25e2e937.png)


----
### 三、线上安全 SQL（只跑一份）

直播 + 聊天室相关表结构、配置、Job，已合并为可重复执行脚本：
**`sql/mysql/xhs-init.sql`**
安全点：
- 缺列才 `ALTER`，缺表才 `CREATE`
- 配置 `NOT EXISTS` 才插入，**不覆盖**线上已有 TRTC 密钥
- 无 `DROP` / 无业务数据 `UPDATE`

执行前：
```
USE 你的线上库名;
```
然后整份执行。跑完检查：
- `member_note` 直播字段齐全
- `member_voice_room = OK`
- 两条 `max-minutes` 有值

再到管理后台「基础设施 → 配置管理」核对 TRTC 密钥与分钟数。


----
### 四、商城之后，功能地图


|章节|主题|相对早期教程|
|:-:|:-:|:-:|
|第八章|商城|原文已有|
|…|（九～十五章见原系列）|原文已有|
|（16）|私信 / 群聊 / 视频通话|**大幅增强**|
|（17）|TRTC 直播|**全新**|
|（18）|音视频聊天室|**全新**|
|（19）|分享卡片 + 体验时长 + SQL|**全新**|
|（20）|付费笔记 + 优质创作者|**全新**|
|（21）|站点品牌|**全新**|
|（22）|系统消息 + 微信登录 / PC 扫码|**全新**|


----
### 总结

分享卡片让「房间」变成可传播的社交对象；体验时长让「演示版」可对外公开而不失控。
到此，小红书式应用在「内容、社交、电商、直播、语聊」主链路上已经闭环。（20）～（22）继续写刚开的运营能力：付费笔记、站点品牌、系统消息与微信登录。


----
>**演示地址**
移动端：[http://8.146.211.120:8081/#/](https://gitee.com/link?target=http%3A%2F%2F8.146.211.120%3A8081%2F%23%2F)
管理端：[http://8.146.211.120:8088/#/](https://gitee.com/link?target=http%3A%2F%2F8.146.211.120%3A8088%2F%23%2F)
**代码地址**
https://gitee.com/ddeatrr/springboot_vue_xhs

前言（16）～（18）分别做了 IM、直播、聊天室。把用户真正「拉进来」，还差最后一公里：分享与可控的试用时长。本章聚焦两件运营向能力：

从零用 Java 实现小红书 SpringBoot Vue UniApp（19）分享卡片、体验时长与上线清单

人工智能

小红书式应用新增强运营能力：直播/聊天室邀请卡片支持私信与群聊一键分享，点击直达房间；新增体验时长限制功能，支持倒计时展示、到期自动关房，并附安全SQL一键配置。分享卡片扩展消息类型7/8，纯文本链接升级为富媒体卡片，提升传播效率。项目已实现内容、社交、电商、直播、语聊全链路闭环，演示地址已开放。

代码解释

JSON

9.9元起，最快1天搭建自有直播平台


2万分钟实时音视频通用时长新用户9.9元


trtc

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

从零用 Java 实现小红书 SpringBoot Vue UniApp（19）分享卡片、体验时长与上线清单-腾讯云开发者社区-腾讯云

从零用 Java 实现小红书 SpringBoot Vue UniApp（19）分享卡片、体验时长与上线清单

从零用 Java 实现小红书 SpringBoot Vue UniApp（19）分享卡片、体验时长与上线清单

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐