SpringBoot整合WebSocket实现后端向前端发送消息

news2025/2/26 20:02:16

目录

一、什么是 websocket 接口

二、适用场景

三、示例代码

3.1、添加pom.xml依赖

3.2、创建WebSokcet配置类

3.3、创建测试发送消息接口

3.4、测试webSocket(http://www.jsons.cn/websocket/)


一、什么是 websocket 接口


使用 websocket 建立长连接,服务端和客户端可以互相通信,服务端只要有数据更新,就可以主动推给客户端。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

二、适用场景

在业务开发过程中碰到一些异步处理(微信支付、支付宝支付的支付通知),跨应用的消息传递。

当业务执行完毕后,需要将成功的信息投递给前端。一般情况下都是前端调用后端的http/https接口获取数据,后端想要主动推送消息给前端就需要使用到WebSocket进行前后端的通信。

三、示例代码

3.1、添加pom.xml依赖

<!-- websocket-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

3.2、创建WebSokcet配置类

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}
3.3、创建WebSokcet工具类

@ServerEndpoint(value = "/websocket")
@Component
public class WebSocketServer {
    private final static Logger log = LoggerFactory.getLogger(WebSocketServer.class);
 
    //静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;
    //concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
 
    //与某个客户端的连接会话,需要通过它来给客户端发送数据
    private Session session;

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        //加入set中
        webSocketSet.add(this);
        //在线数加1
        addOnlineCount();
        log.info("有新连接加入!当前在线人数为" + getOnlineCount());
        try {
            MsgResponseVo userMsgResponseVo = new MsgResponseVo();
            userMsgResponseVo.setMsg("SUCCESS");
            WebSocketServer.sendInfo(JSON.toJSONString(userMsgResponseVo));
        } catch (IOException e) {
            log.error("websocket IO异常");
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        //从set中删除
        webSocketSet.remove(this);
        //在线数减1
        subOnlineCount();
        log.info("有一连接关闭!当前在线人数为" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("来自客户端的消息:" + message);

        //群发消息
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误");
        error.printStackTrace();
    }

    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }

    /**
     * 群发自定义消息
     */
    public static void sendInfo(String message) throws IOException {
        log.info(message);
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                continue;
            }
        }
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized void addOnlineCount() {
        WebSocketServer.onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        WebSocketServer.onlineCount--;
    }
}

3.3、创建测试发送消息接口

 @GetMapping("/testWebSocket")
    public ApiRestResponse testWebSocket() throws IOException {
        //消息体
        MsgResponseVo technicianMsgResponseVo = new MsgResponseVo();
        technicianMsgResponseVo.setRole("Technician");
        technicianMsgResponseVo.setRoleId(1);
        technicianMsgResponseVo.setMsg("您的订单已取消");
        technicianMsgResponseVo.setMsgStatus("CANCEL_ORDER");
        technicianMsgResponseVo.setOrderNo("test");
        //发送消息
        WebSocketServer.sendInfo(JSON.toJSONString(technicianMsgResponseVo));
        return ApiRestResponse.success();
    }
}

3.4、测试webSocket(http://www.jsons.cn/websocket/)

在网站中输入ws://ip:端口/webSocket工具类的前缀(ws://127.0.0.1:8080/websocket)

3.5、前端使用WebSocket监听后端WebSocket地址 ,接收到消息后做下一步业务处理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405338.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue中的render函数(通俗、易懂)

文章目录一、初步认识render函数二、为什么使用render函数三、render函数的解析一、初步认识render函数 import Vue from vue import App from ./AppVue.config.productionTip falsenew Vue({el: #app,render: h > h(App) })在使用脚手架创建vue项目的过程&#xff0c;我们…

纯前端文档预览,还要支持所有主流格式,有这一篇就足够了

写在前面 纯前端的文档预览功能&#xff0c;是非常常见的需求&#xff0c;但就是这么简单的需求&#xff0c;难住了许多可爱的小伙伴们。别急&#xff0c;先访问一下解决方案&#xff0c;给你一个惊喜&#xff0c;再往下看&#xff1a; 文件在线预览DEMO 服务器文件预览DEMO …

【计算机网络】Web服务器的配置

目录 课题描述 需求分析 2.1 WEB服务器基本构架 2.1.1 WEB服务器和浏览器 2.2 HTTP协议 2.2.1 HTTP简介 2.2.2 HTTP工作原理 2.3 FTP协议 2.3.1 FTP简介 2.3.2 FTP工作原理 2.4 ISS服务作用 概要设计 3.1 ISS服务器的安装与配置 3.2 详细设计 结果分析 4.1 We…

JS实现轮播图(一看就懂逻辑清晰)

轮播图有很多种实现方法&#xff0c;这是其中一种最清晰的方法。思路很清晰&#xff0c;代码很简单&#xff0c;欢迎大佬多指教。 先来看下效果图&#xff0c;嫌麻烦就不用具体图片来实现了&#xff0c;主要是理清思路。&#xff08;自动轮播&#xff0c;左右按钮切换图片&…

Vue首屏加载过慢出现白屏的六种优化方案

公司业务展示官网开发&#xff0c;构建版本后在测试环境下&#xff0c;发下首屏加载损耗高达几十秒&#xff08;服务器在国外&#xff0c;所以也导致加载时间变长&#xff09;&#xff0c;于是采用了以下方法来达到提速目的。 1. 采用懒加载的方式 路由懒加载和组件懒加载&a…

【Node.js】初识Node.js

系列文章目录 文章目录系列文章目录一、什么是 Node.js二、下载和安装 Node.js1、普通方式2、使用 nvm 安装三、Node.js 和 JavaScript 的区别1、ECMScript2、JavaScript3、node.js四、commonjs1、什么是 commonjs2、安装 lodash五、debugger六、server 开发和前端开发的区别一…

Vue3实战教程(快速入门)

Vue3实战教程&#xff08;快速入门&#xff09;前言1.搭建脚手架1.1 创建项目1.2 清除多余文件&#xff0c;创建干净项目1.3 创建登录页面2.创建404页面&#xff08;引入sass&#xff09;2.1 引入sass2.2 创建404页面3.构建登录注册页面&#xff08;引入element-plus&#xff0…

VSCode安装配置使用教程(最新版超详细保姆级含插件)一文就够了

前言 Visual Studio Code 是一个轻量级功能强大的源代码编辑器&#xff0c;支持语法高亮、代码自动补全&#xff08;又称 IntelliSense&#xff09;、代码重构、查看定义功能&#xff0c;并且内置了命令行工具和 Git 版本控制系统。适用于 Windows、macOS 和 Linux。它内置了对…

如何解决Vue3没有代码提示问题?

在上一篇笔记中提到了Vue3viteTs写代码过程中&#xff0c;出现的代码自动补全失效功能&#xff0c;今天来谈谈如何解决这个问题。 首先&#xff0c;我们已经很明确的就是安装了volar插件之后&#xff0c;HTML标签片段补全已经失效&#xff0c;即在template中书写HTML标签时&am…

IDEA2022版本创建maven web项目(两种方式)最全图文教学

IDEA2022版本创建maven web项目 问题发生时间&#xff1a;2022.1.3 问题描述&#xff1a;新版本的idea2022很多人不解的地方就是创建项目之后没有Web文件夹&#xff0c;这让项目创建的过程中产生了困难 提示&#xff1a;环境搭建的过程中请注意细节问题&#xff0c;避免粗心大…

Vue开发实例(20)之实现登录功能

引言 Vue是现在前端最流行的框架之一&#xff0c;作为前端开发人员应该要熟练的掌握它&#xff0c;如果你是打算学习Vue的开发流程&#xff0c;那么来吧&#xff0c;明哥带你快速上手、带你飞&#xff01; 即使你并非前端开发人员&#xff0c;对前端的开发流程进行一定的了解也…

微信小程序简洁登录页面(附源码)

微信小程序简洁登录页面&#xff08;附源码&#xff09; 文章目录微信小程序简洁登录页面&#xff08;附源码&#xff09;1. 群聊&#xff08;开源项目以及技术交流&#xff09;2.看效果3.用户不存在4.上代码4.1login.wxml4.2login.css4.3login.js5.总结1. 群聊&#xff08;开源…

手把手教你用vue + node 作后端连接数据库

教程的顺序&#xff1a; 1、编写node服务器 2、用node连接数据库 3、编写前端页面 4、前后端交互 ok&#xff0c;让我们开始吧 1、编写node服务器 先下载几个依赖包 express&#xff08;用于网络连接&#xff09; npm i express --save cors&#xff08;用于处理跨域…

IDEA 2022专业版创建Java Web项目(保姆式小白讲义,强烈建议入手!)

这里先给出IDEA专业版的下载链接&#xff0c;没有下载的小伙伴&#xff0c;请先下载哦&#xff01;&#xff08;选择左边的Ultimate&#xff09; 目录 1.新建Java Class 2.添加框架 3. 配置Maven 4.配置项目结构 5.配置tomcat 本文致力于2022.3IDEA 专业版创建Java Web项目小白…

JS中的this指向

this的概念&#xff1a; 在js中&#xff0c;this的意思为“这个;当前”&#xff0c;是一个指针型变量&#xff0c;它动态指向当前函数的运行环境。 在不同的场景中调用同一个函数&#xff0c;this的指向也可能会发生变化&#xff0c;但是它永远指向其所在函数的真实调用者&…

如何在uniapp中优雅地使用WebView

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 从webview页面传值到uniapp中 官方文档已经很详细了,这里给大家上我的实战代码&#xff0c;首先在webview页面中引入相关依赖&#xff1a; <!-- uniapp各平台依赖 --> <script type"tex…

用uniapp实现微信小程序的电子签名效果

✅作者简介&#xff1a;大家好我是瓜子三百克&#xff0c;励志成为全栈工程师的一枚程序猿&#xff0c;也是喜欢在学习和开发中记录笔记的小白博主&#xff01; &#x1f4c3;个人主页&#xff1a;瓜子三百克的主页 &#x1f525;系列专栏&#xff1a;uniapp前端 &#x1f496;…

vue项目实战-电商后台管理系统

项目简介&#xff1a; 该项目为电商后台的管理系统。设计了登录页面。 管理人员需要通过输入正确的用户名和密码才能登录。登陆成功之后进入管理页面&#xff1a; 管理页面由五个子模块组成&#xff1a;用户管理&#xff0c;权限管理&#xff0c;商品管理&#xff0c;订单管理…

ChatGPT对话数据备份

ChatGPT对话数据备份 文章目录ChatGPT对话数据备份1. 背景2. 其他&#xff08;失败的&#xff09;方法2.1 右键另存为2.2 直接copy html代码3. 编写Javascript脚本3.1 思路过程3.2 安装教程3.3 使用说明3.4 最终效果1. 背景 之前在ChatGPT更新时有好几天都无法查看过往对话&am…

webpack 面试题整理

文章目录webpack 面试题整理谈谈你对Webpack的理解Webpack的打包过程/打包原理/构建流程&#xff1f;Webpack中loader的作用/ loader是什么&#xff1f;常见的loader有哪些&#xff1f;Plugin有什么作用&#xff1f;/Plugin是什么常见的Plugin有哪些Webpack 插件的执行顺序&…