springboot集成webstock实战:服务端数据推送数据到客户端实现实时刷新

简介: 之前介绍过springboot集成webstock方式,具体参考:springboot集成websocket实战:站内消息实时推送

背景


   之前介绍过springboot集成webstock方式,具体参考:

springboot集成websocket实战:站内消息实时推送

这里补充另外一个使用webstock的场景,方便其他同学理解和使用,废话不多说了,直接开始!简单介绍一下业务场景:

   现在有一个投票活动,活动详情中会显示投票活动的参与人数、访问数、投票数。这三个投票数据需要实时的进行变化,这里就可以使用webstock进行返回页面。当三个数据发生变化时,服务端发送最新数据给客户端,客户端仅进行展示即可,不用轮询查询数据,页面也会显示动态效果。


实现步骤


1.配置webstock

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

2.webstocket服务逻辑说明

   每个客户端进入活动之后需要与服务端建立一个连接,由于是在微信小程序中进行发布活动,所以使用用户的openID进行用户的唯一标识,每个链接就可以看做是客户端与服务端的一次会话session,使用clients将所有登录的用户创建的session存储起来,方便后期进行消息群发操作,用户退出时将创建session进行关闭操作。投票数、访问量、参与人数,每个指标变化时需要调用webstock服务器中的群发消息功能,这样就能保证三个数据变化之后客户端可以实时显示出最新的数据,达到最终预期的效果。

3.webstocket服务代码实现

@Component
@Slf4j
@Service
@ServerEndpoint("/ws/{openId}")
public class WebSocketServer {
    // 每个在线用户会创建一个WebSocketServer对象
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
    // 存放所有在线的客户端 key为用户的唯一标识:userId,value为每个会话连接
    private static Map<String, Session> clients = new ConcurrentHashMap<>();
    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("openId") String openId) throws IOException {
        log.info("dataId:{},已建立连接",openId);
        clients.put(openId, session);
        webSocketSet.add(this);
    }
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(Session session,@PathParam("openId") String openId) {
        log.info("dataId:{},关闭连接",openId);
        clients.remove(openId);
        webSocketSet.remove(this);  //从set中删除
    }
    /**
     * @ Param session
     * @ Param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误");
        error.printStackTrace();
    }
    /**
     * @Author: txm
     * @Description: 群发消息
     * @Param: []
     * @return: void
     * @Date:  2022/12/23 14:28
     **/
    public void batchSendMsg() throws IOException {
        VoteServiceImpl voteService = SpringUtils.getBean(VoteServiceImpl.class);
        // 此处是组装返回类似的参数信息:{"joinCount":15,"visitCount":169,"voteCount":36}
        String voteStatisticsVo = voteService.findVoteStatisticsVo();
        for (Map.Entry<String, Session> integerSessionEntry : clients.entrySet()) {
            integerSessionEntry.getValue().getBasicRemote().sendText(voteStatisticsVo);
        }
    }
}


4.业务逻辑触发说明

   这里仅以增加访问量操作为例进行说明(投票数增加、参与人数增加同理,只是业务触发逻辑不同),自定义了一个增加访问量的接口,前端调用该接口则活动的访问数量会进行加一处理,webstock服务群发消息的处理就需要在这里完成,参考代码如下:

@Service
@Slf4j
public class VoteServiceImpl implements VoteService {
  @Autowired
    private WebSocketServer webSocketServer;
public synchronized void updateVisitCount(Integer voteId) throws IOException {
        System.out.println("投票活动访问量增加操作");
        // 服务端群发消息,更新统计数据
        webSocketServer.batchSendMsg();
    }
    }

5.客户端测试地址:http://1json.com/network/ws.html,输入项目地址.

1b67c0b797f5e53091d860d13f7d724f_d98d22c92aa040a19416b195e8075fa1.png

   调用更新访问量接口之后,可以看到服务端已经将最新的投票统计信息进行了返回处理:

6750db32e58499b44d13a38150a5bdab_e5cfd672e2b94b3fbf1d2fedd42b67da.png

0196590e7150b20e7b6f0a0c0d3f3989_d3e09a182e9a45429528a4272abd907d.png


问题说明

   关于配置完成之后测试客户端不能建立连接问题

   当时在测试的时候也出现过不能建立连接,分析了一下原因是项目中使用了ssl证书配置,也就是项目本身访问的方式是https访问,所以不能使用ws协议进行访问,需要使用wss协议进行访问(两者的区别可以类比理解为http与https的区别),简单说一下项目配置,没有为了适配wss单独做配置(支持https访问的项目也会支持wss访问).

配置文件:

server:
  port: 8083
  servlet:
    session:
      timeout: PT30M
  ssl:
      enabled: true
      key-store: classpath:config/ssl/*****.com.pfx
      key-store-password: *****
      keyStoreType: *****


证书路径:

8f07a1f18e598fe9811ffe5d76626086_6de50b605e02442ea850b7754e125fd2.png

说一下本地以及测试环境的访问方式:

本地访问:

wss://127.0.0.1:8083/ws/1

服务器访问(使用ip访问不通,只能使用域名):

wss://域名:8083/ws/1

以上是使用webstock实现页面数据实时刷新的实现过程,如果看完感觉有所帮助欢迎评论区留言或点赞!


相关文章
|
10天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
137 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
1月前
|
前端开发 Java API
SpringBoot整合Flowable【06】- 查询历史数据
本文介绍了Flowable工作流引擎中历史数据的查询与管理。首先回顾了流程变量的应用场景及其局限性,引出表单在灵活定制流程中的重要性。接着详细讲解了如何通过Flowable的历史服务API查询用户的历史绩效数据,包括启动流程、执行任务和查询历史记录的具体步骤,并展示了如何将查询结果封装为更易理解的对象返回。最后总结了Flowable提供的丰富API及其灵活性,为后续学习驳回功能做了铺垫。
55 0
SpringBoot整合Flowable【06】- 查询历史数据
|
3月前
|
分布式计算 大数据 Apache
ClickHouse与大数据生态集成:Spark & Flink 实战
【10月更文挑战第26天】在当今这个数据爆炸的时代,能够高效地处理和分析海量数据成为了企业和组织提升竞争力的关键。作为一款高性能的列式数据库系统,ClickHouse 在大数据分析领域展现出了卓越的能力。然而,为了充分利用ClickHouse的优势,将其与现有的大数据处理框架(如Apache Spark和Apache Flink)进行集成变得尤为重要。本文将从我个人的角度出发,探讨如何通过这些技术的结合,实现对大规模数据的实时处理和分析。
231 2
ClickHouse与大数据生态集成:Spark & Flink 实战
|
12天前
|
Java 关系型数据库 MySQL
SpringBoot 通过集成 Flink CDC 来实时追踪 MySql 数据变动
通过详细的步骤和示例代码,您可以在 SpringBoot 项目中成功集成 Flink CDC,并实时追踪 MySQL 数据库的变动。
104 43
|
4月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
354 2
|
26天前
|
存储 缓存 Java
Java中的分布式缓存与Memcached集成实战
通过在Java项目中集成Memcached,可以显著提升系统的性能和响应速度。合理的缓存策略、分布式架构设计和异常处理机制是实现高效缓存的关键。希望本文提供的实战示例和优化建议能够帮助开发者更好地应用Memcached,实现高性能的分布式缓存解决方案。
39 9
|
2月前
|
存储 JavaScript 开发工具
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
本次的.HarmonyOS Next ,ArkTS语言,HarmonyOS的元服务和DevEco Studio 开发工具,为开发者提供了构建现代化、轻量化、高性能应用的便捷方式。这些技术和工具将帮助开发者更好地适应未来的智能设备和服务提供方式。
74 8
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
|
3月前
|
数据采集 前端开发 开发工具
Demo发布- ClkLog客户端集成-React Native
ClkLog是一款支持开源和商业付费的用户行为分析软件系统,通过采集客户端行为日志数据,在开源的OLAP数据库上进行模型分析。常见的客户端有Web JS、IOS、Andriod 、小程序等,以及react-native 、uni-app等。Clklog方案选用了\神策提供的开源SDK来进行数据采集。
132 48
|
1月前
|
存储 前端开发 Java
SpringBoot整合Flowable【05】- 使用流程变量传递业务数据
本文介绍了如何使用Flowable的流程变量来管理绩效流程中的自定义数据。首先回顾了之前的简单绩效流程,指出现有流程缺乏分数输入和保存步骤。接着详细解释了流程变量的定义、分类(运行时变量和历史变量)及类型。通过具体代码示例展示了如何在绩效流程中插入全局和局部流程变量,实现各节点打分并维护分数的功能。最后总结了流程变量的使用场景及其在实际业务中的灵活性,并承诺将持续更新Flowable系列文章,帮助读者更好地理解和应用Flowable。 简要来说,本文通过实例讲解了如何利用Flowable的流程变量功能优化绩效评估流程,确保每个环节都能记录和更新分数,同时提供了全局和局部变量的对比和使用方法。
84 0
|
3月前
|
移动开发 小程序 开发工具
Demo发布- ClkLog客户端集成 uni-app
在上一期推文中,我们与大家分享了 React Native 的集成 demo。本期,我们将继续介绍 ClkLog 集成 uni-app 的 demo。 uni-app 允许开发者编写一套代码,然后可以编译到 iOS、Android、H5 以及各种小程序等多个平台。因此,本次 demo 中将涵盖上述所有平台,并且我们会详细说明集成过程中遇到的难点及解决方案。

热门文章

最新文章