>## [**移动端演示 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)

**前言**
直播是「主播中心」：一个人讲，很多人听。聊天室则是「麦位中心」：多人轮流上麦，更接近 Clubhouse / 语聊房形态。
本章与（17）共用腾讯云 TRTC 与 WebSocket 基础设施，但业务模型完全不同：
- 房间号进出
- 1 个房主位 + 8 个麦位
- 语音房 / 视频房双模式
- 锁麦、抱下、强制闭麦、踢人、公屏禁言
- 体验时长倒计时


----
![聊天室入口：创建 / 加入](https://developer.qcloudimg.com/http-save/yehe-12101878/4ad9383393acf4f5828e7dce9994131a.png)
![聊天室麦位舞台与体验倒计时](https://developer.qcloudimg.com/http-save/yehe-12101878/1729717436741c389925327cd34f886e.png)
![消息中可收到聊天室邀请卡片](https://developer.qcloudimg.com/http-save/yehe-12101878/0b7226ac312eb83af45519430b4b1ad6.png)
![线上演示：消息列表](https://developer.qcloudimg.com/http-save/yehe-12101878/b23533443f2bdbc7f951e7ff88055bec.png)
![管理端仪表盘（线上截图）](https://developer.qcloudimg.com/http-save/yehe-12101878/38c1b65a61823df3e5ea04b2f93df784.png)
### 相对直播，聊天室解决什么问题


|维度|直播|聊天室|
|:-:|:-:|:-:|
|角色|主播 / 观众|房主 / 麦上用户 / 听众|
|推流人数|通常 1 路主播|最多房主 + 8 麦|
|治理|禁言、关播|锁麦、抱下、踢人、禁言|
|入口|笔记 / 创作者中心|房间号创建或加入|
|分享|直播卡片|聊天室卡片|


----
### 一、业务架构

```
创建房间（mediaMode=0语音 / 1视频）
        ↓
返回 roomNo + TRTC 凭证
        ↓
房主默认在「房主位」推流；听众点空麦位上麦
        ↓
麦位状态 JSON 存库 + WebSocket 全员同步
        ↓
结束 / 踢出 / 体验到期 → 推送 ended / kicked
```
麦位槽位字段：`userId` / `muted` / `locked` / `cameraOff`。改麦位不必拆 8 张子表，状态变更后 `pushRoomState` 推给在房用户。


----
### 二、创建房间（核心代码）

`MemberVoiceRoomServiceImpl#createRoom`：
```
public AppMemberVoiceRoomRespVO createRoom(Long loginUserId, AppMemberVoiceRoomCreateReqVO reqVO) {
    MemberVoiceRoomDO living = voiceRoomMapper.selectLivingByOwner(loginUserId);
    if (living != null) {
        throw exception(VOICE_ROOM_NO_CREATE);
    }
    String roomNo = nextRoomNo();
    Integer mediaMode = MemberVoiceRoomMediaModeEnum.of(reqVO.getMediaMode()).getMode();
    String defaultTitle = MemberVoiceRoomMediaModeEnum.isVideo(mediaMode) ? "视频聊天室" : "语音聊天室";

    MemberVoiceRoomDO room = MemberVoiceRoomDO.builder()
            .roomNo(roomNo)
            .trtcRoomId("vr_" + roomNo)
            .title(StrUtil.blankToDefault(StrUtil.trim(reqVO.getTitle()), defaultTitle))
            .ownerUserId(loginUserId)
            .status(MemberVoiceRoomStatusEnum.LIVING.getStatus())
            .mediaMode(mediaMode)
            .seatJson(emptySeats())   // 8 个空麦位
            .ownerMuted(false)
            .ownerCameraOff(false)
            .memberCount(1)
            .ownerHeartbeatTime(LocalDateTime.now())
            .chatJson(new ArrayList<>())
            .build();
    voiceRoomMapper.insert(room);
    // ...
    return buildResp(room, loginUserId, true);
}
```
加入房间：校验进行中 + 体验是否到期，登记 Redis 在线，推送系统公屏「进入了房间」。


----
### 三、上麦 / 下麦

```
public AppMemberVoiceRoomRespVO takeSeat(Long loginUserId, AppMemberVoiceRoomTakeSeatReqVO reqVO) {
    MemberVoiceRoomDO room = requireLiving(reqVO.getRoomNo());
    if (Objects.equals(room.getOwnerUserId(), loginUserId)) {
        throw exception(VOICE_ROOM_ALREADY_ON_SEAT); // 房主已在房主位
    }
    List<Map<String, Object>> seats = normalizeSeats(room.getSeatJson());
    Integer seatIndex = reqVO.getSeatIndex();
    // 校验：已在麦上 / 座位有人 / 锁麦
    Map<String, Object> target = seats.get(seatIndex);
    if (target != null && toBool(target.get("locked"))) {
        throw exception(VOICE_ROOM_SEAT_LOCKED);
    }

    Map<String, Object> seat = new HashMap<>();
    seat.put("userId", loginUserId);
    seat.put("muted", false);
    seat.put("locked", false);
    seat.put("cameraOff", false);
    seats.set(seatIndex, seat);

    MemberVoiceRoomDO update = new MemberVoiceRoomDO();
    update.setId(room.getId());
    update.setSeatJson(seats);
    voiceRoomMapper.updateById(update);
    pushRoomState(room); // WebSocket 全员同步麦位
    return buildResp(room, loginUserId, false);
}
```
前端：上麦成功后切换 TRTC 角色为主播并 `startLocalAudio/Video`；下麦切回观众并停采。
房主治理：锁麦 / 强制闭麦 / 抱下 / 禁言 / 踢人。视频模式下「点击放大预览、长按出管理菜单」，避免误触。


----
### 四、接口一览

`AppMemberVoiceRoomController`（`/member/voice-room`）：
```
@PostMapping("/create")            // 创建
@PostMapping("/join")              // 加入
@GetMapping("/get")                // 状态
@PostMapping("/seat/take")         // 上麦
@PostMapping("/seat/leave")        // 下麦
@PostMapping("/mute")              // 静音
@PostMapping("/camera")            // 摄像头
@PostMapping("/chat")              // 公屏
@PostMapping("/leave")             // 离开
@PostMapping("/end")               // 结束
@PostMapping("/heartbeat")         // 房主心跳
@PostMapping("/seat/lock")         // 锁麦
@PostMapping("/seat/force-leave")  // 抱下
@PostMapping("/kick")              // 踢人
@PostMapping("/chat/mute")         // 禁言
@PostMapping("/force-mute")        // 强制闭麦
```
WebSocket 类型：
```
String MEMBER_VOICE_ROOM_SUBSCRIBE = "member_voice_room_subscribe_type";
String MEMBER_VOICE_ROOM_CHAT = "member_voice_room_chat_type";
String MEMBER_VOICE_ROOM_STATE = "member_voice_room_state_type";
String MEMBER_VOICE_ROOM_ENDED = "member_voice_room_ended_type";
String MEMBER_VOICE_ROOM_KICKED = "member_voice_room_kicked_type";
```


----
### 五、前端页面结构

**入口页** `pages/voice-room/index.vue`
- 创建语音房 / 创建视频房
- 输入房间号加入

**房间页** `pages/voice-room/room.vue`

|区域|内容|
|:-:|:-:|
|顶栏|房主信息、人数、分享、离开|
|舞台|房主位 + 8 麦位网格|
|中部|体验倒计时浮层|
|公屏|系统消息 + 用户消息|
|底部|输入、表情、更多（麦、摄像头、耳返、扬声器、下麦）|
App 端通过 `hybrid/html/trtc-voice-room.html` 承载 TRTC。体验配置：`member.voice-room.max-minutes`，倒计时与直播共用同一套工具。


----
### 关键代码位置

- 后端：`AppMemberVoiceRoomController.java`、`MemberVoiceRoomServiceImpl.java`
- 表：`member_voice_room`（见 `xhs-init.sql`）
- 移动端：`pages/voice-room/index.vue`、`room.vue`
- API：`sheep/api/member/voiceRoom.js`


----
### 总结

1. 麦位 JSON + 全量状态推送，实现成本低、联调快
2. 与直播共用 TRTC / 倒计时 / 敏感词，模块边界清晰
3. 「点击放大、长按治理」提升视频房可用性

#### 下一章预告

下一章专门讲 **分享卡片**：把房间一键发到私信/群聊，以及体验倒计时与部署 SQL 清单。


----
>**演示地址**
移动端：[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

前言直播是「主播中心」：一个人讲，很多人听。聊天室则是「麦位中心」：多人轮流上麦，更接近 Clubhouse / 语聊房形态。本章与（17）共用腾讯云 TRTC 与 WebSocket 基础设施，但业务模型完全不同：

从零用 Java 实现小红书 SpringBoot Vue UniApp（18）音视频聊天室完整实现

编程语言

客户端

开发工具

基于腾讯云TRTC与WebSocket构建的多人语音/视频聊天室系统，支持1个房主位+8个麦位管理，涵盖锁麦、抱下、踢人、禁言等治理功能。提供语音/视频双模式、体验倒计时、公屏互动，前后端完整实现，含演示地址与源码。

代码解释

WebSocket

Redis

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（18）音视频聊天室完整实现-腾讯云开发者社区-腾讯云

从零用 Java 实现小红书 SpringBoot Vue UniApp（18）音视频聊天室完整实现

从零用 Java 实现小红书 SpringBoot Vue UniApp（18）音视频聊天室完整实现

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐