利用WebSocket实现实时通知

在编写小说网站时,突发奇想:作者发布章节后,是不是粉丝应该接收到作者发布章节的消息通知呢。以下就是一个测试案例:

添加pom.xml文件依赖:

XML 复制代码
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

以上只给了websocket依赖,实际还要添加mysql依赖,以及配置application中数据库:

XML 复制代码
spring.datasource.url=
spring.datasource.driver-class-name=
spring.datasource.username=
spring.datasource.password=

接下来就创建一个配置类启用 WebSocket 消息代理:

java 复制代码
import org.springframework.context.annotation.Configuration;
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 {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 定义 WebSocket 端点,前端通过此连接
        registry.addEndpoint("/ws")
                .setAllowedOriginPatterns("*") // 允许跨域(生产环境建议限制域名)
                .withSockJS(); // 支持 SockJS 回退
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // 客户端订阅地址前缀(前端从这里订阅)
        registry.enableSimpleBroker("/topic");
    }
}

监听作者发布章节事件

定义事件类

java 复制代码
public class ChapterPublishedEvent {
    private Long authorId;
    private String chapterTitle;

    // 构造方法、Getter/Setter
}
在发布章节的方法中触发事件
java 复制代码
@RestController
public class ChaptersController {

@Autowired
NovelsMapper mapper;

@Autowired
private ApplicationEventPublisher eventPublisher;

    @RequestMapping("chapter")
    String insert(HttpServletRequest request){
// 触发事件
        eventPublisher.publishEvent(new ChapterPublishedEvent(1, "文章名"));
        return "chapter:" + request.getServerPort();
    }
}

推送消息给关注者

监听事件并发送消息

java 复制代码
import com.lxy.other.dao.UserAuthMapper;
import com.lxy.other.vo.ChapterPublishedEvent;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.event.EventListener;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.scheduling.annotation.Async; // 可选异步
import org.springframework.stereotype.Component;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

@Component
public class ChapterPublishListener {

    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    @Autowired
    private UserAuthMapper userAuthMapper; // 自定义服务,用于查询关注者

    @EventListener
    @Async // 异步处理(可选,需在启动类添加 @EnableAsync)
    public void handleChapterPublishedEvent(ChapterPublishedEvent event) {
        Long authorId = event.getAuthorId();
        // 查询所有关注该作者的用户的ID
        List<Long> followerIds = new ArrayList<>(Arrays.asList(2L, 3L));
        // 向每个关注者推送消息
        followerIds.forEach(followerId -> {
            String destination = "/topic/user/" + followerId + "/notifications";
            messagingTemplate.convertAndSend(destination, "作者发布了新章节:" + event.getChapterTitle());
        });
    }
}

前端订阅通知

使用 SockJSStomp.js 连接 WebSocket 并订阅频道:

html 复制代码
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
    <title>WebSocket通知</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.6.1/dist/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

<script>
    // 1. 连接 WebSocket
    const socket = new SockJS('http://127.0.0.1:8002/ws');
    const stompClient = Stomp.over(socket);

    // 2. 订阅通知
    stompClient.connect({}, () => {
        const userId = 2; // 替换为实际用户ID
        stompClient.subscribe(`/topic/user/${userId}/notifications`, (message) => {
            console.log('收到通知:', message.body);
            alert(message.body);
        });
    }, (error) => {
        console.error('连接失败:', error);
    });
</script>
</body>
</html>

效果图:

发送触发事件的请求。

这个时候就可以自定义 页面样式了

相关推荐
ladymorgana7 小时前
【spring boot】三种日志系统对比:ELK、Loki+Grafana、Docker API
spring boot·elk·grafana
古希腊数通小白(ip在学)8 小时前
stp拓扑变化分类
运维·服务器·网络·智能路由器
程序员秘密基地8 小时前
基于html,css,vue,vscode,idea,,java,springboot,mysql数据库,在线旅游,景点管理系统
java·spring boot·mysql·spring·web3
xdscode11 小时前
SpringBoot ThreadLocal 全局动态变量设置
java·spring boot·threadlocal
天河归来12 小时前
springboot框架redis开启管道批量写入数据
java·spring boot·redis
合作小小程序员小小店12 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
sniper_fandc13 小时前
SpringBoot系列—MyBatis(xml使用)
java·spring boot·mybatis
咖啡啡不加糖14 小时前
RabbitMQ 消息队列:从入门到Spring Boot实战
java·spring boot·rabbitmq
程序小武14 小时前
网络请求的基本概念、原理及生活化解析
网络协议
hrrrrb15 小时前
【TCP/IP】11. IP 组播
服务器·网络·tcp/ip