ikmkj/graduation-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(comment): 实现评论删除的WebSocket实时同步功能

Browse Source 
- 后端服务删除评论时通过WebSocket广播删除事件
- 前端音乐详情页接收删除消息并从列表中移除对应评论
- 前端歌单详情页支持删除事件处理并更新评论计数
- 前端歌手详情页实现删除事件处理和评论计数更新
- 支持父子评论层级结构的删除操作
- 统一WebSocket消息格式包含删除状态和评论ID信息
This commit is contained in:
ikmkj
2026-03-11 13:33:53 +08:00
parent 4595cd59e9
commit c7588d3de8
4 changed files with 81 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
music-houduan/src/main/java/com/test/musichouduan/service/impl/CommentServiceImpl.java
View File

@@ -28,7 +28,9 @@ import org.springframework.transaction.annotation.Transactional;
import jakarta.persistence.criteria.Predicate;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Optional;
import java.util.stream.Collectors;
@@ -221,6 +223,14 @@ public class CommentServiceImpl implements CommentService {
}
}
// 通过 WebSocket 广播删除事件
String destination = String.format("/topic/comments/%d/%d", comment.getTargetType(), comment.getTargetId());
Map<String, Object> deleteEvent = new HashMap<>();
deleteEvent.put("deleted", true);
deleteEvent.put("id", id);
deleteEvent.put("parentId", comment.getParentId());
messagingTemplate.convertAndSend(destination, deleteEvent);
return true;
}
@@ -343,6 +353,14 @@ public class CommentServiceImpl implements CommentService {
}
}
// 通过 WebSocket 广播删除事件
String destination = String.format("/topic/comments/%d/%d", comment.getTargetType(), comment.getTargetId());
Map<String, Object> deleteEvent = new HashMap<>();
deleteEvent.put("deleted", true);
deleteEvent.put("id", id);
deleteEvent.put("parentId", comment.getParentId());
messagingTemplate.convertAndSend(destination, deleteEvent);
return true;
}

20
music-qianduan/src/views/MusicDetail.vue
View File

@@ -490,7 +490,25 @@ const setupWebSocket = () => {
if (!music.value) return;
connect(() => {
const destination = `/topic/comments/1/${music.value.id}`; // 1 代表音乐类型
commentSubscription = subscribe(destination, (newComment) => {
commentSubscription = subscribe(destination, (message) => {
// 处理删除事件
if (message && message.deleted) {
const deletedId = message.id;
if (message.parentId) {
// 删除子评论
const parentComment = comments.value.find(c => c.id === message.parentId);
if (parentComment && parentComment.children) {
parentComment.children = parentComment.children.filter(c => c.id !== deletedId);
}
} else {
// 删除父评论
comments.value = comments.value.filter(c => c.id !== deletedId);
}
return;
}
// 处理新增评论
const newComment = message;
if (newComment && newComment.id) {
if (newComment.user && newComment.user.avatar) {
newComment.user.avatar = processImageUrl(newComment.user.avatar);

23
music-qianduan/src/views/PlaylistDetail.vue
View File

@@ -525,7 +525,28 @@ onMounted(() => {
// 连接 WebSocket 并订阅评论
connect(() => {
const destination = `/topic/comments/2/${playlistId.value}`; // 2 代表歌单类型
commentSubscription = subscribe(destination, (newComment) => {
commentSubscription = subscribe(destination, (message) => {
// 处理删除事件
if (message && message.deleted) {
const deletedId = message.id;
if (message.parentId) {
// 删除子评论
const parentComment = comments.value.find(c => c.id === message.parentId);
if (parentComment && parentComment.children) {
parentComment.children = parentComment.children.filter(c => c.id !== deletedId);
}
} else {
// 删除父评论
comments.value = comments.value.filter(c => c.id !== deletedId);
}
if (playlist.value && playlist.value.commentCount > 0) {
playlist.value.commentCount--;
}
return;
}
// 处理新增评论
const newComment = message;
if (newComment && newComment.id) {
if (newComment.user && newComment.user.avatar) {
newComment.user.avatar = processImageUrl(newComment.user.avatar);

23
music-qianduan/src/views/SingerDetail.vue
View File

@@ -441,7 +441,28 @@ onMounted(() => {
// 连接 WebSocket 并订阅评论
connect(() => {
const destination = `/topic/comments/3/${singerId.value}`; // 3 代表歌手类型
commentSubscription = subscribe(destination, (newComment) => {
commentSubscription = subscribe(destination, (message) => {
// 处理删除事件
if (message && message.deleted) {
const deletedId = message.id;
if (message.parentId) {
// 删除子评论
const parentComment = comments.value.find(c => c.id === message.parentId);
if (parentComment && parentComment.children) {
parentComment.children = parentComment.children.filter(c => c.id !== deletedId);
}
} else {
// 删除父评论
comments.value = comments.value.filter(c => c.id !== deletedId);
}
if (singer.value && singer.value.commentCount > 0) {
singer.value.commentCount--;
}
return;
}
// 处理新增评论
const newComment = message;
if (newComment && newComment.id) {
if (newComment.user && newComment.user.avatar) {
newComment.user.avatar = processImageUrl(newComment.user.avatar);