## 一、引言随着互联网技术的发展，直播已成为一种主流的内容传播形式。其中，连麦功能作为直播互动的重要手段，能够有效提升用户参与感和观看体验。本文将介绍如何使用SpringBoot和WebSocket技术构建一个直播连麦系统，实现主播与观众之间的实时音视频交流和文字聊天功能。为了方便DEMO的运行，本系统基于纯内存操作实现核心业务逻辑，不依赖外部数据库或者缓存组件。 ## 二、技术设计 ### 2.1 技术栈 - **后端**：SpringBoot 3.4.5、WebSocket、STOMP子协议、JWT - **前端：** HTML5、CSS3、JavaScript、WebRTC、SockJS ### 2.2 整体架构 - **后端**：基于SpringBoot实现，负责用户认证、直播间管理、WebSocket消息处理等 - **前端**：负责用户界面交互、WebRTC音视频传输、WebSocket连接管理等 - **通信协议**：WebSocket + STOMP实现实时消息传递，WebRTC实现P2P音视频传输 ### 2.3 核心功能模块 1. **用户认证模块**：处理用户登录和简单认证 1. **直播间管理模块**：创建、查询和管理直播间 1. **WebSocket通信模块**：处理实时消息传递 1. **连麦管理模块**：处理连麦请求、状态管理和信令交换 1. **聊天消息模块**：处理直播间内的文字聊天 ### 2.3 数据流程 1. 用户通过HTTP接口登录获取Token 1. 主播创建直播间，系统分配直播间ID 1. 观众通过直播间ID加入直播间 1. 观众发送连麦请求，主播确认后建立WebRTC连接 1. 所有用户通过WebSocket发送和接收聊天消息 ## 三、后端实现 ### 3.1 项目基础配置 #### Maven依赖 ``` org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-websocket io.jsonwebtoken jjwt-api 0.11.5 io.jsonwebtoken jjwt-impl 0.11.5 runtime io.jsonwebtoken jjwt-jackson 0.11.5 runtime org.projectlombok lombok true ``` #### 应用配置 ``` server: port: 8080 spring: application: name: livestream-system jwt: secret: livestreamSecretKey123456789012345678901234567890 expiration: 86400000 ``` ### 3.2 WebSocket配置 ``` package com.example.livestream.config; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Configuration; import org.springframework.messaging.simp.config.ChannelRegistration; import org.springframework.messaging.simp.config.MessageBrokerRegistry; import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker; import org.springframework.web.socket.config.annotation.StompEndpointRegistry; import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer; @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Autowired private WebSocketAuthInterceptor webSocketAuthInterceptor; @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/ws") .setAllowedOriginPatterns("*") .withSockJS(); } /*@Override public void configureMessageBroker(MessageBrokerRegistry registry) { // 使用/topic和/queue前缀的目的地会路由到消息代理 registry.enableSimpleBroker("/topic", "/queue", "/user"); // 用户目标前缀 registry.setUserDestinationPrefix("/user"); // 应用前缀 registry.setApplicationDestinationPrefixes("/app"); }*/ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { // 使用/topic和/queue前缀的目的地会路由到消息代理 registry.enableSimpleBroker("/topic", "/queue"); // 用户目标前缀 registry.setUserDestinationPrefix("/user"); // 应用前缀 registry.setApplicationDestinationPrefixes("/app"); } @Override public void configureClientInboundChannel(ChannelRegistration registration) { registration.interceptors(webSocketAuthInterceptor); } } ``` ### 3.3 WebSocket认证拦截器 ``` package com.example.livestream.config; import com.example.livestream.service.UserService; import com.example.livestream.util.JwtTokenUtil; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.messaging.Message; import org.springframework.messaging.MessageChannel; import org.springframework.messaging.simp.stomp.StompCommand; import org.springframework.messaging.simp.stomp.StompHeaderAccessor; import org.springframework.messaging.support.ChannelInterceptor; import org.springframework.messaging.support.MessageHeaderAccessor; import org.springframework.stereotype.Component; @Component @Slf4j public class WebSocketAuthInterceptor implements ChannelInterceptor { @Autowired private JwtTokenUtil jwtTokenUtil; @Autowired private UserService userService; @Override public Message preSend(Message message, MessageChannel channel) { StompHeaderAccessor accessor = MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class); if (accessor != null && StompCommand.CONNECT.equals(accessor.getCommand())) { String token = accessor.getFirstNativeHeader("Authorization"); if (token != null && token.startsWith("Bearer ")) { token = token.substring(7); try { String username = jwtTokenUtil.getUsernameFromToken(token); if (username != null && jwtTokenUtil.validateToken(token)) { accessor.setUser(() -> username); log.info("User authenticated: {}", username); } } catch (Exception e) { log.error("Invalid JWT token: {}", e.getMessage()); } } } return message; } } ``` ### 3.4 JWT工具类 ``` package com.example.livestream.util; import io.jsonwebtoken.*; import io.jsonwebtoken.security.Keys; import jakarta.servlet.http.HttpServletRequest; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Component; import org.springframework.web.context.request.RequestContextHolder; import org.springframework.web.context.request.ServletRequestAttributes; import java.security.Key; import java.util.Date; import java.util.HashMap; import java.util.Map; import java.util.function.Function; @Component public class JwtTokenUtil { @Value("${jwt.secret}") private String secret; @Value("${jwt.expiration}") private long expiration; private Key getSigningKey() { byte[] keyBytes = secret.getBytes(); return Keys.hmacShaKeyFor(keyBytes); } public String generateToken(String username) { Map claims = new HashMap<>(); return createToken(claims, username); } private String createToken(Map claims, String subject) { Date now = new Date(); Date expiryDate = new Date(now.getTime() + expiration); return Jwts.builder() .setClaims(claims) .setSubject(subject) .setIssuedAt(now) .setExpiration(expiryDate) .signWith(getSigningKey(), SignatureAlgorithm.HS256) .compact(); } public String getUsernameFromToken(String token) { return getClaimFromToken(token, Claims::getSubject); } public String getUsername(){ // 获取HttpServletRequest对象 HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest(); return (String)request.getAttribute("username"); } public T getClaimFromToken(String token, Function claimsResolver) { final Claims claims = getAllClaimsFromToken(token); return claimsResolver.apply(claims); } private Claims getAllClaimsFromToken(String token) { return Jwts.parserBuilder() .setSigningKey(getSigningKey()) .build() .parseClaimsJws(token) .getBody(); } public boolean validateToken(String token) { try { Jwts.parserBuilder().setSigningKey(getSigningKey()).build().parseClaimsJws(token); return true; } catch (JwtException | IllegalArgumentException e) { return false; } } } ``` ### 3.5 模型类设计 #### 用户模型 ``` package com.example.livestream.model; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data @NoArgsConstructor @AllArgsConstructor public class User { private String username; private String password; private String nickname; private String avatar; private UserRole role; // BROADCASTER or AUDIENCE public enum UserRole { BROADCASTER, AUDIENCE } } ``` #### 直播间模型 ``` package com.example.livestream.model; import lombok.Data; import java.time.LocalDateTime; import java.util.Map; import java.util.Set; import java.util.concurrent.ConcurrentHashMap; import java.util.concurrent.CopyOnWriteArraySet; @Data public class LiveRoom { private String roomId; private String title; private String broadcaster; private LocalDateTime createdTime; private boolean active; // 连麦用户列表 private Set activeMicUsers = new CopyOnWriteArraySet<>(); // 观众列表 private Set audiences = new CopyOnWriteArraySet<>(); // 连麦申请列表 private Map micRequests = new ConcurrentHashMap<>(); @Data public static class MicRequest { private String username; private LocalDateTime requestTime; private MicRequestStatus status; public enum MicRequestStatus { PENDING, ACCEPTED, REJECTED } } } ``` #### 消息模型 ``` package com.example.livestream.model; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; import java.time.LocalDateTime; @Data @NoArgsConstructor @AllArgsConstructor public class ChatMessage { private String roomId; private String sender; private String content; private LocalDateTime timestamp; private MessageType type; public enum MessageType { CHAT, JOIN, LEAVE, MIC_REQUEST, MIC_RESPONSE, SIGNAL } } ``` ### 3.6 服务层实现 #### 用户服务 ``` package com.example.livestream.service; import com.example.livestream.model.User; import lombok.extern.slf4j.Slf4j; import org.springframework.stereotype.Service; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; @Service @Slf4j public class UserService { // 内存中存储用户信息 private final Map users = new ConcurrentHashMap<>(); public UserService() { // 初始化一些测试用户 users.put("zb1", new User("zb1", "zb1", "主播一号", "avatar1.jpg", User.UserRole.BROADCASTER)); users.put("zb2", new User("zb2", "zb2", "主播二号", "avatar2.jpg", User.UserRole.BROADCASTER)); users.put("gz1", new User("gz1", "gz1", "观众一号", "user1.jpg", User.UserRole.AUDIENCE)); users.put("gz2", new User("gz2", "gz2", "观众二号", "user2.jpg", User.UserRole.AUDIENCE)); } public User getUserByUsername(String username) { return users.get(username); } public boolean validateUser(String username, String password) { User user = users.get(username); return user != null && user.getPassword().equals(password); } public User registerUser(User user) { if (users.containsKey(user.getUsername())) { return null; } users.put(user.getUsername(), user); return user; } } ``` #### 直播间服务 ``` package com.example.livestream.service; import com.example.livestream.model.LiveRoom; import com.example.livestream.model.User; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.messaging.simp.SimpMessagingTemplate; import org.springframework.stereotype.Service; import java.time.LocalDateTime; import java.util.ArrayList; import java.util.List; import java.util.Map; import java.util.UUID; import java.util.concurrent.ConcurrentHashMap; @Service @Slf4j public class LiveRoomService { @Autowired private SimpMessagingTemplate messagingTemplate; @Autowired private UserService userService; // 内存中存储直播间信息 private final Map liveRooms = new ConcurrentHashMap<>(); public LiveRoom createLiveRoom(String title, String username) { User user = userService.getUserByUsername(username); if (user == null || user.getRole() != User.UserRole.BROADCASTER) { return null; } String roomId = UUID.randomUUID().toString().substring(0, 8); LiveRoom liveRoom = new LiveRoom(); liveRoom.setRoomId(roomId); liveRoom.setTitle(title); liveRoom.setBroadcaster(username); liveRoom.setCreatedTime(LocalDateTime.now()); liveRoom.setActive(true); liveRooms.put(roomId, liveRoom); log.info("Live room created: {} by {}", roomId, username); return liveRoom; } public LiveRoom getLiveRoom(String roomId) { return liveRooms.get(roomId); } public List getAllActiveLiveRooms() { List activeRooms = new ArrayList<>(); for (LiveRoom room : liveRooms.values()) { if (room.isActive()) { activeRooms.add(room); } } return activeRooms; } public boolean joinLiveRoom(String roomId, String username) { LiveRoom room = liveRooms.get(roomId); if (room == null || !room.isActive()) { return false; } room.getAudiences().add(username); log.info("User {} joined room {}", username, roomId); return true; } public boolean leaveLiveRoom(String roomId, String username) { LiveRoom room = liveRooms.get(roomId); if (room == null) { return false; } room.getAudiences().remove(username); room.getActiveMicUsers().remove(username); room.getMicRequests().remove(username); log.info("User {} left room {}", username, roomId); return true; } public boolean closeLiveRoom(String roomId, String username) { LiveRoom room = liveRooms.get(roomId); if (room == null || !room.getBroadcaster().equals(username)) { return false; } room.setActive(false); log.info("Room {} closed by {}", roomId, username); return true; } public boolean requestMic(String roomId, String username) { LiveRoom room = liveRooms.get(roomId); if (room == null || !room.isActive() || !room.getAudiences().contains(username)) { return false; } LiveRoom.MicRequest request = new LiveRoom.MicRequest(); request.setUsername(username); request.setRequestTime(LocalDateTime.now()); request.setStatus(LiveRoom.MicRequest.MicRequestStatus.PENDING); room.getMicRequests().put(username, request); // 通知主播有新的连麦请求 messagingTemplate.convertAndSendToUser( room.getBroadcaster(), "/queue/mic-requests", request); log.info("Mic request from {} in room {}", username, roomId); return true; } public boolean handleMicRequest(String roomId, String requestUsername, boolean accept, String broadcasterUsername) { LiveRoom room = liveRooms.get(roomId); if (room == null || !room.isActive() || !room.getBroadcaster().equals(broadcasterUsername)) { return false; } LiveRoom.MicRequest request = room.getMicRequests().get(requestUsername); if (request == null) { return false; } if (accept) { request.setStatus(LiveRoom.MicRequest.MicRequestStatus.ACCEPTED); room.getActiveMicUsers().add(requestUsername); } else { request.setStatus(LiveRoom.MicRequest.MicRequestStatus.REJECTED); } // 通知申请者结果 messagingTemplate.convertAndSendToUser( requestUsername, "/queue/mic-response", request); log.info("Mic request from {} was {} by broadcaster in room {}", requestUsername, accept ? "accepted" : "rejected", roomId); return true; } public boolean endMic(String roomId, String username, String initiator) { LiveRoom room = liveRooms.get(roomId); if (room == null || !room.isActive()) { return false; } // 只有主播或用户自己可以结束连麦 if (!room.getBroadcaster().equals(initiator) && !username.equals(initiator)) { return false; } room.getActiveMicUsers().remove(username); room.getMicRequests().remove(username); // 通知相关用户连麦已结束 messagingTemplate.convertAndSendToUser( username, "/queue/mic-ended", roomId); if (!username.equals(room.getBroadcaster())) { messagingTemplate.convertAndSendToUser( room.getBroadcaster(), "/queue/mic-ended", username); } log.info("Mic ended for {} in room {}, initiated by {}", username, roomId, initiator); return true; } } ``` #### 聊天服务 ``` package com.example.livestream.service; import com.example.livestream.model.ChatMessage; import com.example.livestream.model.LiveRoom; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.messaging.simp.SimpMessagingTemplate; import org.springframework.stereotype.Service; import java.time.LocalDateTime; import java.util.ArrayList; import java.util.List; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; @Service @Slf4j public class ChatService { @Autowired private SimpMessagingTemplate messagingTemplate; @Autowired private LiveRoomService liveRoomService; // 内存中存储每个直播间的最近消息 private final Map> roomMessages = new ConcurrentHashMap<>(); private final int MAX_MESSAGES_PER_ROOM = 100; public void sendMessage(ChatMessage message) { LiveRoom room = liveRoomService.getLiveRoom(message.getRoomId()); if (room == null || !room.isActive()) { return; } message.setTimestamp(LocalDateTime.now()); // 将消息广播到直播间 messagingTemplate.convertAndSend("/topic/room/" + message.getRoomId(), message); // 存储消息 roomMessages.computeIfAbsent(message.getRoomId(), k -> new ArrayList<>()).add(message); // 限制消息数量 List messages = roomMessages.get(message.getRoomId()); if (messages.size() > MAX_MESSAGES_PER_ROOM) { messages.remove(0); } log.info("Message sent in room {}: {}", message.getRoomId(), message.getContent()); } public List getRecentMessages(String roomId) { return roomMessages.getOrDefault(roomId, new ArrayList<>()); } public void sendJoinMessage(String roomId, String username) { ChatMessage message = new ChatMessage(); message.setRoomId(roomId); message.setSender("System"); message.setContent(username + " 加入了直播间"); message.setTimestamp(LocalDateTime.now()); message.setType(ChatMessage.MessageType.JOIN); messagingTemplate.convertAndSend("/topic/room/" + roomId, message); } public void sendLeaveMessage(String roomId, String username) { ChatMessage message = new ChatMessage(); message.setRoomId(roomId); message.setSender("System"); message.setContent(username + " 离开了直播间"); message.setTimestamp(LocalDateTime.now()); message.setType(ChatMessage.MessageType.LEAVE); messagingTemplate.convertAndSend("/topic/room/" + roomId, message); } public void sendSignalingMessage(String roomId, String sender, String receiver, String content) { ChatMessage message = new ChatMessage(); message.setRoomId(roomId); message.setSender(sender); message.setContent(content); message.setTimestamp(LocalDateTime.now()); message.setType(ChatMessage.MessageType.SIGNAL); // 发送给特定用户 messagingTemplate.convertAndSendToUser( receiver, "/queue/signal", message); log.info("Signal sent from {} to {} in room {}", sender, receiver, roomId); } } ``` ### 3.7 控制器实现 #### 认证控制器 ``` package com.example.livestream.controller; import com.example.livestream.model.User; import com.example.livestream.service.UserService; import com.example.livestream.util.JwtTokenUtil; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.*; import java.util.HashMap; import java.util.Map; @RestController @RequestMapping("/api/auth") @Slf4j public class AuthController { @Autowired private UserService userService; @Autowired private JwtTokenUtil jwtTokenUtil; @PostMapping("/login") public ResponseEntity login(@RequestBody Map loginRequest) { String username = loginRequest.get("username"); String password = loginRequest.get("password"); if (userService.validateUser(username, password)) { User user = userService.getUserByUsername(username); String token = jwtTokenUtil.generateToken(username); Map response = new HashMap<>(); response.put("token", token); response.put("username", username); response.put("nickname", user.getNickname()); response.put("role", user.getRole()); response.put("avatar", user.getAvatar()); log.info("User logged in: {}", username); return ResponseEntity.ok(response); } else { return ResponseEntity.badRequest().body("Invalid username or password"); } } @PostMapping("/register") public ResponseEntity register(@RequestBody User user) { User registeredUser = userService.registerUser(user); if (registeredUser != null) { log.info("User registered: {}", user.getUsername()); return ResponseEntity.ok("User registered successfully"); } else { return ResponseEntity.badRequest().body("Username already exists"); } } } ``` #### 直播间控制器 ``` package com.example.livestream.controller; import com.example.livestream.model.LiveRoom; import com.example.livestream.service.LiveRoomService; import com.example.livestream.util.JwtTokenUtil; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.*; import java.util.HashMap; import java.util.List; import java.util.Map; @RestController @RequestMapping("/api/rooms") @Slf4j public class LiveRoomController { @Autowired private LiveRoomService liveRoomService; @Autowired private JwtTokenUtil jwtTokenUtil; @PostMapping public ResponseEntity createRoom(@RequestBody Map roomRequest) { String title = roomRequest.get("title"); LiveRoom room = liveRoomService.createLiveRoom(title, jwtTokenUtil.getUsername()); if (room != null) { return ResponseEntity.ok(room); } else { return ResponseEntity.badRequest().body("Failed to create room"); } } @PostMapping("/{roomId}/mic-response") public ResponseEntity handleMicResponse( @PathVariable String roomId, @RequestParam String username, @RequestParam boolean accept) { boolean result = liveRoomService.handleMicRequest(roomId, username, accept, jwtTokenUtil.getUsername()); if (result) { return ResponseEntity.ok().build(); } else { return ResponseEntity.badRequest().body("Failed to handle mic request"); } } @GetMapping public ResponseEntity> getAllRooms() { return ResponseEntity.ok(liveRoomService.getAllActiveLiveRooms()); } @GetMapping("/{roomId}") public ResponseEntity getRoomInfo(@PathVariable String roomId) { LiveRoom room = liveRoomService.getLiveRoom(roomId); if (room != null) { return ResponseEntity.ok(room); } else { return ResponseEntity.notFound().build(); } } @PostMapping("/{roomId}/join") public ResponseEntity joinRoom(@PathVariable String roomId) { boolean joined = liveRoomService.joinLiveRoom(roomId, jwtTokenUtil.getUsername()); if (joined) { return ResponseEntity.ok().build(); } else { return ResponseEntity.badRequest().body("Failed to join room"); } } @PostMapping("/{roomId}/leave") public ResponseEntity leaveRoom(@PathVariable String roomId) { boolean left = liveRoomService.leaveLiveRoom(roomId, jwtTokenUtil.getUsername()); if (left) { return ResponseEntity.ok().build(); } else { return ResponseEntity.badRequest().body("Failed to leave room"); } } @PostMapping("/{roomId}/close") public ResponseEntity closeRoom(@PathVariable String roomId) { boolean closed = liveRoomService.closeLiveRoom(roomId, jwtTokenUtil.getUsername()); if (closed) { return ResponseEntity.ok().build(); } else { return ResponseEntity.badRequest().body("Failed to close room"); } } @GetMapping("/{roomId}/mic-status") public ResponseEntity getMicStatus( @PathVariable String roomId, @RequestParam String username) { if (!jwtTokenUtil.getUsername().equals(username)) { return ResponseEntity.status(HttpStatus.FORBIDDEN).body("Unauthorized"); } LiveRoom room = liveRoomService.getLiveRoom(roomId); if (room == null) { return ResponseEntity.notFound().build(); } LiveRoom.MicRequest request = room.getMicRequests().get(username); Map result = new HashMap<>(); if (request == null) { // 没有找到请求，可能是已经被处理并移除 if (room.getActiveMicUsers().contains(username)) { result.put("status", "ACCEPTED"); } else { result.put("status", "NOT_FOUND"); } } else { result.put("status", request.getStatus().toString()); } return ResponseEntity.ok(result); } } ``` #### WebSocket消息控制器 ``` package com.example.livestream.controller; import com.example.livestream.model.ChatMessage; import com.example.livestream.model.LiveRoom; import com.example.livestream.service.ChatService; import com.example.livestream.service.LiveRoomService; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.messaging.handler.annotation.DestinationVariable; import org.springframework.messaging.handler.annotation.MessageMapping; import org.springframework.messaging.handler.annotation.Payload; import org.springframework.messaging.simp.SimpMessageHeaderAccessor; import org.springframework.messaging.simp.SimpMessagingTemplate; import org.springframework.messaging.simp.annotation.SubscribeMapping; import org.springframework.stereotype.Controller; import java.security.Principal; import java.util.List; import java.util.Map; @Controller @Slf4j public class WebSocketController { @Autowired private ChatService chatService; @Autowired private LiveRoomService liveRoomService; @Autowired private SimpMessagingTemplate messagingTemplate; @MessageMapping("/heartbeat") public void processHeartbeat(String message, Principal principal) { if (principal != null) { log.debug("Received heartbeat from {}: {}", principal.getName(), message); } } @MessageMapping("/chat.send/{roomId}") public void sendMessage(@DestinationVariable String roomId, @Payload ChatMessage chatMessage, Principal principal) { if (principal == null) return; chatMessage.setRoomId(roomId); chatMessage.setSender(principal.getName()); chatMessage.setType(ChatMessage.MessageType.CHAT); chatService.sendMessage(chatMessage); } @SubscribeMapping("/room/{roomId}") public List subscribeRoom(@DestinationVariable String roomId, Principal principal, SimpMessageHeaderAccessor headerAccessor) { if (principal == null) return null; String username = principal.getName(); liveRoomService.joinLiveRoom(roomId, username); chatService.sendJoinMessage(roomId, username); return chatService.getRecentMessages(roomId); } @MessageMapping("/mic.request/{roomId}") public void requestMic(@DestinationVariable String roomId, Principal principal, SimpMessageHeaderAccessor headerAccessor) { if (principal == null) { log.error("Cannot request mic: user not authenticated"); return; } String username = principal.getName(); log.info("Received mic request from {} for room {}", username, roomId); // 输出当前会话的所有信息，帮助调试 log.info("Session ID: {}", headerAccessor.getSessionId()); log.info("User: {}", headerAccessor.getUser()); log.info("Headers: {}", headerAccessor.toMap()); boolean success = liveRoomService.requestMic(roomId, username); log.info("Mic request processing result: {}", success ? "SUCCESS" : "FAILED"); // 如果处理失败，直接通知请求者 if (!success) { messagingTemplate.convertAndSendToUser( username, "/queue/mic-response", "Mic request failed"); } } @MessageMapping("/mic.response/{roomId}") public void handleMicRequest(@DestinationVariable String roomId, @Payload Map payload, Principal principal) { if (principal == null) return; String requestUsername = (String) payload.get("username"); boolean accept = (boolean) payload.get("accept"); liveRoomService.handleMicRequest(roomId, requestUsername, accept, principal.getName()); } @MessageMapping("/mic.end/{roomId}") public void endMic(@DestinationVariable String roomId, @Payload String username, Principal principal) { if (principal == null) return; liveRoomService.endMic(roomId, username, principal.getName()); } @MessageMapping("/signal/{roomId}") public void handleSignal(@DestinationVariable String roomId, @Payload Map payload, Principal principal) { if (principal == null) return; String sender = principal.getName(); String receiver = payload.get("receiver"); String content = payload.get("content"); chatService.sendSignalingMessage(roomId, sender, receiver, content); } } ``` ## 四、前端实现 ### 4.1 HTML结构 #### 登录页面 (login.html) ``` 直播连麦系统 - 登录 ``` #### 直播大厅 (index.html) ``` 直播连麦系统 - 大厅

直播连麦系统

创建直播间

直播间标题

直播间列表

``` #### 直播间页面 (room.html) ``` 直播间

加载中...

主播：

``` ### 4.2 JavaScript实现 #### 认证相关 (auth.js) ``` const API_URL = 'http://localhost:8080/api'; // 检查是否已登录 function checkAuth() { const token = localStorage.getItem('token'); if (!token) { // 未登录，跳转到登录页 if (window.location.pathname !== '/login.html' && window.location.pathname !== '/register.html') { window.location.href = 'login.html'; } return false; } return true; } // 获取当前用户信息 function getCurrentUser() { return { username: localStorage.getItem('username'), nickname: localStorage.getItem('nickname'), role: localStorage.getItem('role'), avatar: localStorage.getItem('avatar') }; } // 登录处理 async function login(username, password) { try { const response = await fetch(`${API_URL}/auth/login`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }); if (!response.ok) { const errorText = await response.text(); throw new Error(errorText); } const data = await response.json(); // 存储认证信息 localStorage.setItem('token', data.token); localStorage.setItem('username', data.username); localStorage.setItem('nickname', data.nickname); localStorage.setItem('role', data.role); localStorage.setItem('avatar', data.avatar); return true; } catch (error) { console.error('Login failed:', error); return false; } } // 注册处理 async function register(userData) { try { const response = await fetch(`${API_URL}/auth/register`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(userData) }); if (!response.ok) { const errorText = await response.text(); throw new Error(errorText); } return true; } catch (error) { console.error('Registration failed:', error); return false; } } // 退出登录 function logout() { localStorage.removeItem('token'); localStorage.removeItem('username'); localStorage.removeItem('nickname'); localStorage.removeItem('role'); localStorage.removeItem('avatar'); window.location.href = 'login.html'; } // 获取授权头信息 function getAuthHeader() { const token = localStorage.getItem('token'); return { 'Authorization': `Bearer ${token}` }; } // 页面加载时检查认证状态 document.addEventListener('DOMContentLoaded', function() { // 登录页面处理 if (window.location.pathname.includes('login.html')) { const loginForm = document.getElementById('login-btn'); if (loginForm) { loginForm.addEventListener('click', async function() { const username = document.getElementById('username').value; const password = document.getElementById('password').value; if (!username || !password) { alert('请输入用户名和密码'); return; } const success = await login(username, password); if (success) { window.location.href = 'index.html'; } else { alert('登录失败，请检查用户名和密码'); } }); } return; } // 其他页面需要检查认证 if (!checkAuth()) { return; } // 显示用户信息 const userNickname = document.getElementById('user-nickname'); const userAvatar = document.getElementById('user-avatar'); const logoutBtn = document.getElementById('logout-btn'); if (userNickname) { userNickname.textContent = getCurrentUser().nickname; } if (userAvatar) { userAvatar.src = getCurrentUser().avatar || 'img/default-avatar.png'; } if (logoutBtn) { logoutBtn.addEventListener('click', logout); } // 根据用户角色显示/隐藏主播控制面板 const broadcasterControls = document.getElementById('broadcaster-controls'); if (broadcasterControls && getCurrentUser().role !== 'BROADCASTER') { broadcasterControls.style.display = 'none'; } }); ``` #### 直播大厅页面脚本 (index.js) ``` document.addEventListener('DOMContentLoaded', function() { if (!checkAuth()) return; loadRooms(); setupCreateRoom(); }); // 加载直播间列表 async function loadRooms() { try { const response = await fetch(`${API_URL}/rooms`, { headers: getAuthHeader() }); if (!response.ok) { throw new Error('Failed to load rooms'); } const rooms = await response.json(); displayRooms(rooms); } catch (error) { console.error('Error loading rooms:', error); alert('加载直播间列表失败'); } } // 显示直播间列表 function displayRooms(rooms) { const container = document.getElementById('rooms-container'); container.innerHTML = ''; if (rooms.length === 0) { container.innerHTML = '

当前没有直播间，创建一个吧！

'; return; } rooms.forEach(room => { const roomElement = document.createElement('div'); roomElement.className = 'room-card'; roomElement.innerHTML = `

${room.title}

主播: ${room.broadcaster}

观众: ${room.audiences.length}人

连麦: ${room.activeMicUsers.length}人

`; container.appendChild(roomElement); }); // 添加进入直播间的点击事件 document.querySelectorAll('.join-room-btn').forEach(button => { button.addEventListener('click', function() { const roomId = this.getAttribute('data-room-id'); window.location.href = `room.html?id=${roomId}`; }); }); } // 设置创建直播间功能 function setupCreateRoom() { const createBtn = document.getElementById('create-room-btn'); if (!createBtn) return; createBtn.addEventListener('click', async function() { const title = document.getElementById('room-title').value; if (!title) { alert('请输入直播间标题'); return; } try { const response = await fetch(`${API_URL}/rooms`, { method: 'POST', headers: { 'Content-Type': 'application/json', ...getAuthHeader() }, body: JSON.stringify({ title }) }); if (!response.ok) { throw new Error('Failed to create room'); } const room = await response.json(); window.location.href = `room.html?id=${room.roomId}`; } catch (error) { console.error('Error creating room:', error); alert('创建直播间失败'); } }); } ``` #### WebRTC实现 (webrtc.js) ``` class WebRTCClient { constructor(username, roomId, isBroadcaster) { this.username = username; this.roomId = roomId; this.isBroadcaster = isBroadcaster; this.localStream = null; this.peerConnections = {}; this.stompClient = null; this.mediaConstraints = { audio: true, video: true }; // ICE服务器配置 this.iceServers = { iceServers: [ { urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:stun1.l.google.com:19302' } ] }; } // 初始化WebSocket连接 async connectWebSocket() { return new Promise((resolve, reject) => { const socket = new SockJS('/ws'); // 增加STOMP客户端调试 const client = Stomp.over(socket); client.debug = function(str) { console.log('STOMP Debug: ' + str); }; this.stompClient = client; const headers = { 'Authorization': `Bearer ${localStorage.getItem('token')}` }; this.stompClient.connect(headers, frame => { console.log('Connected to WebSocket:', frame); // 订阅信令消息 this.stompClient.subscribe(`/user/queue/signal`, message => { console.log('Received signal message:', message.body); const signalData = JSON.parse(message.body); this.handleSignalingData(signalData); }); // 订阅连麦响应 this.stompClient.subscribe(`/user/queue/mic-response`, message => { console.log('Received mic response:', message.body); try { const response = JSON.parse(message.body); this.handleMicResponse(response); } catch (e) { console.log('Non-JSON mic response:', message.body); } }); // 订阅连麦结束通知 this.stompClient.subscribe(`/user/queue/mic-ended`, message => { console.log('Received mic ended notification:', message.body); const data = message.body; this.handleMicEnded(data); }); // 如果是主播，订阅连麦请求 if (this.isBroadcaster) { console.log('Broadcaster subscribing to mic-requests'); // 方法1: 标准订阅 this.stompClient.subscribe(`/user/queue/mic-requests`, message => { console.log('Received mic request (standard):', message.body); try { const request = JSON.parse(message.body); this.handleMicRequest(request); } catch (e) { console.error('Error parsing mic request:', e); } }); // 方法2: 尝试直接订阅完整路径 const username = localStorage.getItem('username'); this.stompClient.subscribe(`/user/${username}/queue/mic-requests`, message => { console.log('Received mic request (direct):', message.body); try { const request = JSON.parse(message.body); this.handleMicRequest(request); } catch (e) { console.error('Error parsing mic request:', e); } }); } resolve(); }, error => { console.error('WebSocket connection error:', error); reject(error); }); }); } // 初始化本地媒体流 async initLocalStream() { try { this.localStream = await navigator.mediaDevices.getUserMedia(this.mediaConstraints); return this.localStream; } catch (error) { console.error('Error accessing media devices:', error); throw error; } } // 创建一个新的RTCPeerConnection createPeerConnection(remoteUsername) { const pc = new RTCPeerConnection(this.iceServers); // 添加本地流到连接 this.localStream.getTracks().forEach(track => { pc.addTrack(track, this.localStream); }); // 监听ICE候选 pc.onicecandidate = event => { if (event.candidate) { this.sendSignalingData(remoteUsername, { type: 'ice-candidate', candidate: event.candidate }); } }; // 监听远程流 pc.ontrack = event => { const remoteStream = event.streams[0]; this.onRemoteStreamAdded(remoteUsername, remoteStream); }; this.peerConnections[remoteUsername] = pc; return pc; } // 发起连接(创建offer) async createOffer(remoteUsername) { try { const pc = this.createPeerConnection(remoteUsername); const offer = await pc.createOffer(); await pc.setLocalDescription(offer); this.sendSignalingData(remoteUsername, { type: 'offer', sdp: pc.localDescription }); } catch (error) { console.error('Error creating offer:', error); } } // 响应offer(创建answer) async handleOffer(offer, remoteUsername) { try { const pc = this.createPeerConnection(remoteUsername); await pc.setRemoteDescription(new RTCSessionDescription(offer)); const answer = await pc.createAnswer(); await pc.setLocalDescription(answer); this.sendSignalingData(remoteUsername, { type: 'answer', sdp: pc.localDescription }); } catch (error) { console.error('Error handling offer:', error); } } // 处理answer async handleAnswer(answer, remoteUsername) { try { const pc = this.peerConnections[remoteUsername]; if (pc) { await pc.setRemoteDescription(new RTCSessionDescription(answer)); } } catch (error) { console.error('Error handling answer:', error); } } // 处理ICE候选 async handleIceCandidate(candidate, remoteUsername) { try { const pc = this.peerConnections[remoteUsername]; if (pc) { await pc.addIceCandidate(new RTCIceCandidate(candidate)); } } catch (error) { console.error('Error handling ICE candidate:', error); } } // 发送信令数据 sendSignalingData(receiver, data) { if (!this.stompClient) { console.error('WebSocket not connected'); return; } this.stompClient.send(`/app/signal/${this.roomId}`, {}, JSON.stringify({ receiver: receiver, content: JSON.stringify(data) })); } // 处理收到的信令数据 handleSignalingData(signalData) { const sender = signalData.sender; const content = JSON.parse(signalData.content); switch (content.type) { case 'offer': this.handleOffer(content.sdp, sender); break; case 'answer': this.handleAnswer(content.sdp, sender); break; case 'ice-candidate': this.handleIceCandidate(content.candidate, sender); break; default: console.warn('Unknown signal type:', content.type); } } // 申请连麦 requestMic() { if (!this.stompClient || !this.stompClient.connected) { console.error('WebSocket not connected'); alert('WebSocket连接未建立，无法申请连麦'); return false; } console.log(`Sending mic request for room ${this.roomId} by user ${this.username}`); try { // 添加更多错误处理 this.stompClient.send(`/app/mic.request/${this.roomId}`, {}, JSON.stringify({ // 添加更多信息以便调试 timestamp: new Date().getTime(), username: this.username })); console.log('Mic request sent successfully'); return true; } catch (error) { console.error('Error sending mic request:', error); alert('发送连麦请求失败: ' + error.message); return false; } } // 处理连麦响应 async handleMicResponse(response) { console.log('处理连麦响应:', response); // 兼容字符串和对象两种响应格式 let status; if (typeof response === 'string') { console.log('收到字符串格式的响应:', response); // 尝试解析字符串响应 if (response.includes('ACCEPTED')) { status = 'ACCEPTED'; } else if (response.includes('REJECTED')) { status = 'REJECTED'; } else { console.warn('无法识别的响应内容:', response); return; } } else { // 对象格式响应 status = response.status; } console.log('连麦响应状态:', status); if (status === 'ACCEPTED') { try { console.log('连麦请求已接受，初始化媒体流'); // 初始化本地媒体流(如果还没有) if (!this.localStream) { await this.initLocalStream(); this.onLocalStreamCreated(this.localStream); } // 等待主播发起WebRTC连接 console.log('等待主播发起WebRTC连接'); this.onMicRequestAccepted(); } catch (error) { console.error('初始化媒体流失败:', error); alert('连麦初始化失败: ' + error.message); } } else if (status === 'REJECTED') { console.log('连麦请求被拒绝'); this.onMicRequestRejected(); } else { console.warn('未知的连麦响应状态:', status); } } // 添加新的回调方法 onMicRequestAccepted() { console.log('连麦请求已接受，等待连接建立'); // 这个方法会由使用者实现 } // 处理连麦请求(主播) async handleMicRequest(request) { // 通知UI显示请求 this.onMicRequestReceived(request); } // 响应连麦请求(主播) async respondToMicRequest(username, accept) { if (!this.stompClient) { console.error('WebSocket not connected'); return; } this.stompClient.send(`/app/mic.response/${this.roomId}`, {}, JSON.stringify({ username: username, accept: accept })); if (accept) { // 初始化本地媒体流(如果还没有) if (!this.localStream) { await this.initLocalStream(); this.onLocalStreamCreated(this.localStream); } // 主播发起WebRTC连接 await this.createOffer(username); } } // 结束连麦 endMic(username) { if (!this.stompClient) { console.error('WebSocket not connected'); return; } this.stompClient.send(`/app/mic.end/${this.roomId}`, {}, username); this.closePeerConnection(username); } // 处理连麦结束 handleMicEnded(data) { if (this.isBroadcaster) { // 主播收到用户结束连麦的通知 this.closePeerConnection(data); this.onMicEnded(data); } else { // 用户收到主播结束连麦的通知 this.closePeerConnection(this.roomId); this.onMicEnded(); } } // 关闭对等连接 closePeerConnection(username) { const pc = this.peerConnections[username]; if (pc) { pc.close(); delete this.peerConnections[username]; } } // 关闭所有连接 close() { // 关闭所有对等连接 Object.keys(this.peerConnections).forEach(username => { this.closePeerConnection(username); }); // 关闭本地媒体流 if (this.localStream) { this.localStream.getTracks().forEach(track => track.stop()); } // 断开WebSocket连接 if (this.stompClient && this.stompClient.connected) { this.stompClient.disconnect(); } } // 以下方法需要在使用时实现 onLocalStreamCreated(stream) { // 显示本地视频流 console.log('Local stream created, implement this method'); } onRemoteStreamAdded(username, stream) { // 显示远程视频流 console.log('Remote stream added for', username, 'implement this method'); } onMicRequestReceived(request) { // 显示连麦请求 console.log('Mic request received from', request.username, 'implement this method'); } onMicRequestRejected() { // 连麦请求被拒绝 console.log('Mic request rejected, implement this method'); } onMicEnded(username) { // 连麦结束 console.log('Mic ended for', username, 'implement this method'); } } ``` #### 直播间页面脚本 (room.js) ``` document.addEventListener('DOMContentLoaded', function() { if (!checkAuth()) return; const urlParams = new URLSearchParams(window.location.search); const roomId = urlParams.get('id'); if (!roomId) { alert('直播间ID不能为空'); window.location.href = 'index.html'; return; } const currentUser = getCurrentUser(); const isBroadcaster = currentUser.role === 'BROADCASTER'; // 初始化WebRTC客户端 const webrtcClient = new WebRTCClient(currentUser.username, roomId, isBroadcaster); // 明确设置为全局变量 window.webrtcClient = webrtcClient; // 设置事件处理函数 setupEventHandlers(webrtcClient); // 加载直播间信息 loadRoomInfo(roomId); // 连接WebSocket initializeWebSocketAndMedia(webrtcClient, isBroadcaster); }); // 设置事件处理函数 function setupEventHandlers(webrtcClient) { // 返回大厅按钮 document.getElementById('back-to-lobby').addEventListener('click', function() { webrtcClient.close(); window.location.href = 'index.html'; }); // 发送消息按钮 document.getElementById('send-message-btn').addEventListener('click', sendChatMessage); // 聊天输入框回车发送 document.getElementById('chat-input').addEventListener('keypress', function(e) { if (e.key === 'Enter') { sendChatMessage(); } }); // 申请连麦按钮(观众) const requestMicBtn = document.getElementById('request-mic-btn'); if (requestMicBtn) { requestMicBtn.addEventListener('click', function() { console.log('申请连麦按钮被点击'); try { const success = webrtcClient.requestMic(); if (success) { this.disabled = true; this.textContent = '已申请连麦，等待主播接受...'; document.getElementById('mic-status').textContent = '连麦申请中...'; console.log('连麦申请已发送'); } else { console.error('连麦申请发送失败'); } } catch (error) { console.error('申请连麦时发生错误:', error); alert('申请连麦失败: ' + error.message); } }); } // 重写WebRTC回调函数 webrtcClient.onLocalStreamCreated = function(stream) { const videoElement = document.getElementById('local-video') || document.getElementById('broadcaster-video'); videoElement.srcObject = stream; }; webrtcClient.onRemoteStreamAdded = function(username, stream) { let videoElement; if (webrtcClient.isBroadcaster) { // 主播看到观众视频 const audienceContainer = document.getElementById('audience-videos-container'); const audienceVideoDiv = document.createElement('div'); audienceVideoDiv.className = 'audience-video-container'; audienceVideoDiv.id = `audience-${username}`; audienceVideoDiv.innerHTML = `

${username}

`; audienceContainer.appendChild(audienceVideoDiv); videoElement = document.getElementById(`video-${username}`); // 添加结束连麦按钮事件 audienceVideoDiv.querySelector('.end-mic-btn').addEventListener('click', function() { const username = this.getAttribute('data-username'); webrtcClient.endMic(username); }); } else { // 观众看到主播视频 videoElement = document.getElementById('broadcaster-video'); } if (videoElement) { videoElement.srcObject = stream; } }; webrtcClient.onMicRequestReceived = function(request) { console.log('处理连麦请求:', request); const requestsList = document.getElementById('mic-requests-list'); if (!requestsList) { console.error('找不到连麦请求列表元素'); return; } // 检查是否已存在相同的请求 const existingRequest = document.getElementById(`request-${request.username}`); if (existingRequest) { console.log('已存在相同用户的连麦请求，不重复添加'); return; } const requestItem = document.createElement('li'); requestItem.className = 'mic-request-item'; requestItem.id = `request-${request.username}`; requestItem.innerHTML = ` ${request.username} 申请连麦

`; requestsList.appendChild(requestItem); console.log('连麦请求UI已添加'); // 添加按钮事件 const acceptBtn = requestItem.querySelector('.accept-btn'); if (acceptBtn) { acceptBtn.addEventListener('click', function() { const username = this.getAttribute('data-username'); console.log(`接受用户 ${username} 的连麦请求`); // 同时使用WebSocket和HTTP API发送响应 webrtcClient.respondToMicRequest(username, true); // 备用HTTP请求 const urlParams = new URLSearchParams(window.location.search); const roomId = urlParams.get('id'); fetch(`${API_URL}/rooms/${roomId}/mic-response?username=${username}&accept=true`, { method: 'POST', headers: getAuthHeader() }) .then(response => { if (!response.ok) { throw new Error('HTTP API连麦响应失败'); } console.log('通过HTTP API发送连麦接受成功'); }) .catch(error => { console.error('发送连麦响应失败:', error); }); requestItem.remove(); // 添加到活跃连麦列表 const activeList = document.getElementById('active-mics-list'); if (activeList) { const activeItem = document.createElement('li'); activeItem.className = 'active-mic-item'; activeItem.id = `active-${username}`; activeItem.innerHTML = ` ${username} `; activeList.appendChild(activeItem); // 添加结束连麦按钮事件 const endMicBtn = activeItem.querySelector('.end-mic-btn'); if (endMicBtn) { endMicBtn.addEventListener('click', function() { const username = this.getAttribute('data-username'); console.log(`结束与用户 ${username} 的连麦`); webrtcClient.endMic(username); }); } } }); } const rejectBtn = requestItem.querySelector('.reject-btn'); if (rejectBtn) { rejectBtn.addEventListener('click', function() { const username = this.getAttribute('data-username'); console.log(`拒绝用户 ${username} 的连麦请求`); // 同时使用WebSocket和HTTP API发送响应 webrtcClient.respondToMicRequest(username, false); // 备用HTTP请求 const urlParams = new URLSearchParams(window.location.search); const roomId = urlParams.get('id'); fetch(`${API_URL}/rooms/${roomId}/mic-response?username=${username}&accept=false`, { method: 'POST', headers: getAuthHeader() }) .then(response => { if (!response.ok) { throw new Error('HTTP API连麦响应失败'); } console.log('通过HTTP API发送连麦拒绝成功'); }) .catch(error => { console.error('发送连麦响应失败:', error); }); requestItem.remove(); }); } }; webrtcClient.onMicEnded = function(username) { if (webrtcClient.isBroadcaster && username) { // 主播结束观众连麦 const audienceVideo = document.getElementById(`audience-${username}`); if (audienceVideo) { audienceVideo.remove(); } const activeMicItem = document.getElementById(`active-${username}`); if (activeMicItem) { activeMicItem.remove(); } } else { // 观众的连麦被结束 const requestMicBtn = document.getElementById('request-mic-btn'); if (requestMicBtn) { requestMicBtn.disabled = false; requestMicBtn.textContent = '申请连麦'; } document.getElementById('mic-status').textContent = '连麦已结束'; // 停止本地视频 const localVideo = document.getElementById('local-video'); if (localVideo && localVideo.srcObject) { localVideo.srcObject.getTracks().forEach(track => track.stop()); localVideo.srcObject = null; } } }; webrtcClient.onMicRequestAccepted = function() { const requestMicBtn = document.getElementById('request-mic-btn'); if (requestMicBtn) { requestMicBtn.disabled = true; requestMicBtn.textContent = '连麦已接受，正在建立连接...'; } document.getElementById('mic-status').textContent = '连麦已接受，等待连接建立...'; // 可以添加一个本地视频预览 const videoSection = document.querySelector('.video-section'); if (!document.getElementById('local-video-container')) { const localVideoContainer = document.createElement('div'); localVideoContainer.className = 'local-video-container'; localVideoContainer.id = 'local-video-container'; localVideoContainer.innerHTML = `

我(观众)

`; videoSection.appendChild(localVideoContainer); // 设置本地视频流 if (webrtcClient.localStream) { document.getElementById('local-video').srcObject = webrtcClient.localStream; } // 添加结束连麦按钮事件 document.getElementById('end-local-mic-btn').addEventListener('click', function() { webrtcClient.endMic(getCurrentUser().username); }); } }; webrtcClient.onMicRequestRejected = function() { const requestMicBtn = document.getElementById('request-mic-btn'); if (requestMicBtn) { requestMicBtn.disabled = false; requestMicBtn.textContent = '申请连麦'; } document.getElementById('mic-status').textContent = '连麦申请被拒绝'; // 提醒用户 alert('主播拒绝了您的连麦申请'); }; } // 加载直播间信息 async function loadRoomInfo(roomId) { try { const response = await fetch(`${API_URL}/rooms/${roomId}`, { headers: getAuthHeader() }); if (!response.ok) { throw new Error('Failed to load room info'); } const room = await response.json(); // 更新页面信息 document.getElementById('room-title').textContent = room.title; document.getElementById('broadcaster-name').textContent = room.broadcaster; // 显示主播控制面板或观众控制面板 const currentUser = getCurrentUser(); const isBroadcaster = currentUser.username === room.broadcaster; if (isBroadcaster) { document.getElementById('broadcaster-controls').style.display = 'block'; document.getElementById('audience-controls').style.display = 'none'; document.getElementById('broadcaster-label').textContent = '我(主播)'; } else { document.getElementById('broadcaster-controls').style.display = 'none'; document.getElementById('audience-controls').style.display = 'block'; document.getElementById('broadcaster-label').textContent = room.broadcaster; } } catch (error) { console.error('Error loading room info:', error); alert('加载直播间信息失败'); window.location.href = 'index.html'; } } // 初始化WebSocket和媒体流 async function initializeWebSocketAndMedia(webrtcClient, isBroadcaster) { try { // 连接WebSocket await webrtcClient.connectWebSocket(); // 订阅直播间消息 subscribeToRoomMessages(webrtcClient.stompClient, webrtcClient.roomId); // 如果是主播，初始化本地媒体流 if (isBroadcaster) { const localStream = await webrtcClient.initLocalStream(); webrtcClient.onLocalStreamCreated(localStream); } } catch (error) { console.error('Error initializing:', error); alert('初始化连接失败'); } } // 订阅直播间消息 function subscribeToRoomMessages(stompClient, roomId) { stompClient.subscribe(`/topic/room/${roomId}`, function(message) { const chatMessage = JSON.parse(message.body); displayChatMessage(chatMessage); }); } // 发送聊天消息 function sendChatMessage() { const inputElement = document.getElementById('chat-input'); const content = inputElement.value.trim(); if (!content) return; const urlParams = new URLSearchParams(window.location.search); const roomId = urlParams.get('id'); // 添加检查确保webrtcClient存在 if (window.webrtcClient && window.webrtcClient.stompClient && window.webrtcClient.stompClient.connected) { window.webrtcClient.stompClient.send(`/app/chat.send/${roomId}`, {}, JSON.stringify({ content: content, type: 'CHAT' })); inputElement.value = ''; } else { console.error('WebSocket连接未建立'); alert('消息发送失败，WebSocket连接未建立'); } } // 显示聊天消息 function displayChatMessage(message) { const messagesContainer = document.getElementById('chat-messages'); const messageElement = document.createElement('div'); messageElement.className = 'chat-message'; switch (message.type) { case 'CHAT': messageElement.innerHTML = ` ${message.sender}: ${message.content} ${formatTime(message.timestamp)} `; break; case 'JOIN': case 'LEAVE': messageElement.className += ' system-message'; messageElement.innerHTML = ` ${message.content} ${formatTime(message.timestamp)} `; break; } messagesContainer.appendChild(messageElement); messagesContainer.scrollTop = messagesContainer.scrollHeight; } function setupMicResponsePolling(roomId, username) { // 只有观众且有正在等待的连麦请求时才需要轮询 const isBroadcaster = getCurrentUser().role === 'BROADCASTER'; if (isBroadcaster) { return; } let isPolling = false; const requestMicBtn = document.getElementById('request-mic-btn'); // 监听按钮状态变化 const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === 'attributes' && mutation.attributeName === 'disabled') { // 按钮被禁用，表示已发送连麦请求 if (requestMicBtn.disabled && !isPolling) { startPolling(); } else if (!requestMicBtn.disabled && isPolling) { stopPolling(); } } }); }); observer.observe(requestMicBtn, { attributes: true }); let pollingInterval; function startPolling() { console.log('开始轮询连麦响应'); isPolling = true; pollingInterval = setInterval(async function() { try { const response = await fetch(`${API_URL}/rooms/${roomId}/mic-status?username=${username}`, { headers: getAuthHeader() }); if (!response.ok) { throw new Error('获取连麦状态失败'); } const data = await response.json(); console.log('轮询到的连麦状态:', data); if (data.status === 'ACCEPTED') { console.log('连麦请求已被接受'); // 手动触发处理 webrtcClient.handleMicResponse({ status: 'ACCEPTED' }); stopPolling(); } else if (data.status === 'REJECTED') { console.log('连麦请求已被拒绝'); // 手动触发处理 webrtcClient.handleMicResponse({ status: 'REJECTED' }); stopPolling(); } // PENDING状态继续轮询 } catch (error) { console.error('轮询连麦状态失败:', error); } }, 2000); // 每2秒轮询一次 } function stopPolling() { if (pollingInterval) { clearInterval(pollingInterval); isPolling = false; console.log('停止轮询连麦响应'); } } // 页面卸载时清除轮询 window.addEventListener('beforeunload', stopPolling); } // 格式化时间 function formatTime(timestamp) { if (!timestamp) return ''; const date = new Date(timestamp); return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`; } ``` ### 4.3 CSS样式 #### 基础样式 (style.css) ``` /* style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f5f5f5; color: #333; line-height: 1.6; } /* 登录和注册页面样式 */ .login-container, .register-container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f2f5; } .login-box, .register-box { width: 400px; padding: 30px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .login-box h1, .register-box h1 { text-align: center; margin-bottom: 20px; color: #1890ff; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; } .form-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } button { width: 100%; padding: 12px; background-color: #1890ff; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #40a9ff; } button:disabled { background-color: #cccccc; cursor: not-allowed; } .register-link, .login-link { text-align: center; margin-top: 20px; } .register-link a, .login-link a { color: #1890ff; text-decoration: none; } /* 头部导航栏 */ header { background-color: #1890ff; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 20px; font-weight: bold; } .user-info { display: flex; align-items: center; } .user-info span { margin-right: 10px; } .user-info img { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } /* 大厅页面样式 */ main { max-width: 1200px; margin: 20px auto; padding: 0 20px; } .create-room-box { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .create-room-box h2 { margin-bottom: 15px; color: #1890ff; } .room-list { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .room-list h2 { margin-bottom: 15px; color: #1890ff; } .room-card { border: 1px solid #eee; padding: 15px; border-radius: 4px; margin-bottom: 15px; transition: all 0.3s; } .room-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .room-card h3 { margin-bottom: 10px; color: #333; } .room-info { margin-bottom: 15px; color: #666; } .room-card .join-room-btn { width: auto; padding: 8px 15px; } .no-rooms { text-align: center; color: #999; padding: 20px; } ``` #### 直播间页面样式 (room.css) ``` /* room.css */ .room-container { display: flex; flex-direction: column; height: 100vh; } .room-header { background-color: #1890ff; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; } .room-info h1 { margin: 0; font-size: 24px; } .broadcaster-info { font-size: 14px; margin-top: 5px; } .room-controls button { width: auto; padding: 8px 15px; background-color: white; color: #1890ff; } .room-main { display: flex; flex: 1; overflow: hidden; } .video-section { flex: 2; display: flex; flex-direction: column; background-color: #000; position: relative; } .main-video { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; } .main-video video { width: 100%; height: 100%; object-fit: contain; } .video-label { position: absolute; bottom: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.6); color: white; padding: 5px 10px; border-radius: 4px; font-size: 14px; } .audience-videos { height: 150px; display: flex; padding: 10px; gap: 10px; background-color: #1a1a1a; overflow-x: auto; } .audience-video-container { width: 200px; height: 100%; position: relative; background-color: #333; border-radius: 4px; overflow: hidden; } .audience-video { width: 100%; height: 100%; object-fit: cover; } .end-mic-btn { position: absolute; top: 5px; right: 5px; width: auto; padding: 3px 8px; font-size: 12px; background-color: #ff4d4f; } .interaction-section { flex: 1; display: flex; flex-direction: column; background-color: white; border-left: 1px solid #eee; } .chat-box { flex: 2; display: flex; flex-direction: column; border-bottom: 1px solid #eee; } .chat-messages { flex: 1; padding: 15px; overflow-y: auto; } .chat-message { margin-bottom: 10px; padding: 8px 10px; background-color: #f9f9f9; border-radius: 4px; word-break: break-word; } .message-sender { font-weight: bold; color: #1890ff; margin-right: 5px; } .message-time { font-size: 12px; color: #999; margin-left: 5px; } .system-message { background-color: #f0f0f0; color: #888; text-align: center; font-style: italic; } .chat-input { display: flex; padding: 10px; border-top: 1px solid #eee; } .chat-input input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; margin-right: 10px; } .chat-input button { width: auto; } .control-panel { flex: 1; padding: 15px; overflow-y: auto; } #audience-controls { text-align: center; } #mic-status { margin-top: 10px; font-size: 14px; color: #666; } .mic-requests, .active-mics { margin-bottom: 20px; } .mic-requests h3, .active-mics h3 { font-size: 16px; margin-bottom: 10px; color: #1890ff; } .mic-request-item, .active-mic-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f9f9f9; border-radius: 4px; margin-bottom: 10px; } .request-actions { display: flex; gap: 5px; } .accept-btn, .reject-btn { width: auto; padding: 5px 10px; font-size: 12px; } .accept-btn { background-color: #52c41a; } .reject-btn { background-color: #ff4d4f; } /* 响应式布局 */ @media (max-width: 768px) { .room-main { flex-direction: column; } .audience-videos { height: 100px; } .audience-video-container { width: 120px; } .interaction-section { border-left: none; border-top: 1px solid #eee; } } ``` ## 五、功能演示流程 ### 5.1 登录主播账号打开一个浏览器窗口，访问http://localhost:8080/login.html 输入账号 zb1, 密码 zb1登录系统创建直播间 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/472516321fd44a6eafaae5bbf2007572~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6aOO6LGh5Y2X:q75.awebp?rk3s=f64ab15b&x-expires=1768425161&x-signature=WRgaw00VCpMmu48June8jnxUW%2FU%3D) ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a584b4cc592f41848aa6eb607a91f68e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6aOO6LGh5Y2X:q75.awebp?rk3s=f64ab15b&x-expires=1768425161&x-signature=vBMPhl4tN6eFZhHXk8alAnSXvF0%3D) ### 5.1 登录观众账号新打开另一个浏览器窗口（注意不是多个TAB，是独立的浏览器窗口），输入账号 gz1, 密码 gz1登录系统，进入直播间，申请连麦 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9fa48f3a87244e4d870ec5254faf7887~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6aOO6LGh5Y2X:q75.awebp?rk3s=f64ab15b&x-expires=1768425161&x-signature=DRloCHLOSLwRmNDTMq19eER2BLA%3D) ### 5.2 接受或拒绝连麦主播收到连麦申请，可以选择接受或者拒绝连麦此处需要注意，同一台电脑的device只能在一个窗口使用，也就是没法在两个窗口同时看到画面内容 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6833e826751540b69c25e2fa6f1a3b3f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6aOO6LGh5Y2X:q75.awebp?rk3s=f64ab15b&x-expires=1768425161&x-signature=s4%2B3HbLemv4m9KGhTt%2B4FmSNlXM%3D) ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/eab46d253da445faa0e09ff64b20ffd2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6aOO6LGh5Y2X:q75.awebp?rk3s=f64ab15b&x-expires=1768425161&x-signature=NJaLKRjZO57CdccGaJluCkDh9Rc%3D)

直播连麦系统

创建直播间

直播间列表

连麦申请

当前连麦

${room.title}