当前位置：首页 > news >正文

Springboot + Vue + WebSocket + Notification实现消息推送功能

news 来源：原创 2025/9/6 3:56:25

实现功能

基于Springboot与Vue架构，首先使用Websocket实现频道订阅，在实现点对点与群发功能后，在前端调用windows自带的消息通知，实现推送功能。

开发环境

Springboot 2.6.7
vue 2.6.11
socket-client 1.0.0

准备工作

在 Vue.js 项目中安装sockjs-client和stompjs。

npm install sockjs-client stompjs

在后端项目中添加依赖。

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

WebSocket

为完成单播或者广播的频道的订阅功能，需要在前端和后端完成WebSocket的基本配置。

前端配置

需在vue项目中新建websocket.js文件，主要完成：

1.获取userid

2.定义WebSocketService，完成connect、subscribe、unsubscribe、sendMessage、disconnect等主要函数。

代码如下所示。

websocket.js
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';const userid = JSON.parse(sessionStorage.getItem('CurUser')).idclass WebSocketService {constructor() {this.stompClient = null;this.subscriptions = new Map(); // 存储订阅的频道}// 连接 WebSocketconnect() {const socket = new SockJS("/api/broadcast"); // 后端地址this.stompClient = Stomp.over(socket);this.stompClient.connect({}, () => {console.log('do connect method');console.log('stompClient', this.stompClient)this.subscribe('/user/' + userid.toString() + '/alone/getResponse', (response) => {if (this.onGlobalNotification) {console.log("message print", response)// this.onGlobalNotification(JSON.parse(message.body));this.onGlobalNotification(response.body);}});});}// 订阅频道subscribe(destination, callback) {const subscription = this.stompClient.subscribe(destination, callback);this.subscriptions.set(destination, subscription);}// 取消订阅unsubscribe(destination) {const subscription = this.subscriptions.get(destination);if (subscription) {subscription.unsubscribe();this.subscriptions.delete(destination);}}// 发送消息到后端sendMessage(destination, message) {console.log("sendMessage method , message is ", message.content)this.stompClient.send(destination, {}, message.content);}// 断开连接disconnect() {if (this.stompClient) {this.stompClient.disconnect();console.log('WebSocket 断开连接！');}}
}export default new WebSocketService();

后端配置

在后端同样需要完成频道的订阅，新建文件WebSocketConfig.java，代码如下所示。

package com.wms.common;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;import javax.annotation.Resource;@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Resourcepublic AppConfig appConfig;@Overridepublic void configureMessageBroker(MessageBrokerRegistry registry) {registry.enableSimpleBroker("/user", "/topic1", "/topic2", "/mass");// 点对点使用的订阅前缀（客户端订阅路径上会体现出来），不设置的话，默认也是 /user/// 注意，这里必须和上面设置的Broker：/user 一致（两个都可以自定义，但必须一致）。否则连接不上registry.setUserDestinationPrefix("/user/");// 指服务端接收地址的前缀，意思就是说客户端给服务端发消息的地址的前缀}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {// 注册一个STOMP的endpoint端点,并指定使用SockJS协议// 前端使用这个地址连接后端 WebSocket接口registry.addEndpoint("/broadcast", "/point")// 允许所有源跨域。还可以指定ip配置：http://ip:*// 低版本的SpringBoot（2.1.5.RELEASE 就不行）不行.setAllowedOriginPatterns(appConfig.getFrontHttpUrl()) // 此处填写前端页面地址.withSockJS();}
}

Vue

在用户登录之后，首先初始化WebSocket 连接，然后定义全局通知的回调，在回调函数onGlobalNotification中实现调用windows自带的通知功能Notification。

// 初始化 WebSocket 连接
WebSocketService.connect();
// 定义全局通知的回调
WebSocketService.onGlobalNotification = (message) => {this.sendNotification('xxx',message)// this.$bus.$emit("postTrigger")
};

    // 发送通知的方法sendNotification (title, body) {// console.log("sendNotification", Notification.permission)// 检查浏览器是否支持 Notification APIif ('Notification' in window) {// 如果通知权限已经授予if (Notification.permission === "granted") {new Notification(title, {body: body,icon: logoIcon,requireInteraction: true});} else if (Notification.permission !== "denied") {// 请求用户授权Notification.requestPermission().then(permission => {if (permission === "granted") {new Notification(title, {body: body,icon: logoIcon,requireInteraction: true});}});}} else {console.log("浏览器不支持通知功能。");}},

在需要发送消息的地方使用函数sendMessage，在MethodApi处填写后端对应接口。

WebSocketService.sendMessage('/MethodApi', {content: "message you want send"});

Springboot

在后端需要在controller文件中实现对应的MethodApi接口函数，确定消息传递的目标用户与对应的消息，调用messagingTemplate中的函数convertAndSendToUser，完成在频道/user/userid/alone/getResponse的消息通知。

controller.java
@Autowired
private SimpMessagingTemplate messagingTemplate;// p2p notification
@MessageMapping("/MethodApi")
public void p2pNotify(String content){System.out.println(content);// 可在此处通过接受到的消息确定目标用户 userid(int) 与 对应的消息 message(string)System.out.println("=====发送通知=====");messagingTemplate.convertAndSendToUser(userid.toString(),"/alone/getResponse",message);
}

效果图

此时就可以在本地进行测试了，效果如下：

服务器部署

因为windows系统通知需要浏览器给予网页权限，所以需要vue启用https协议，配置如下：

module.exports = {devServer: {port:8001,https:true,proxy: {'/api': {target: "http://localhost:8091/", // 代理目标的基础路径secure: true,  // 如果是https接口，需要配置这个参数changeOrigin: true, // 支持跨域pathRewrite: {'^/api': '',}}}},
}

Springboot + Vue + WebSocket + Notification实现消息推送功能

实现功能基于Springboot与Vue架构，首先使用Websocket实现频道订阅，在实现点对点与群发功能后，在前端调用windows自带的消息通知，实现推送功能。开发环境 Springboot 2.6.7vue 2.6.11socket-client 1.0.0 准备工作在 Vue.js…...

编程日记 2025/9/6 3:56:25

Linux内核物理内存组织结构

一、系统调用sys_mmap 系统调用mmap用来创建内存映射，把创建内存映射主要的工作委托给do_mmap函数，内核源码文件处理：mm/mmap.c 二、系统调用sys_munmap 1、vma find_vma (mm, start); // 根据起始地址找到要删除的第一个虚拟内存区域 vma 2…...

编程日记 2025/9/6 3:52:57

Redis高级技能进阶

什么是事务的ACID 事务是由一系列对系统中数据进行访问或更新的操作组成的程序执行逻辑单元。这些操作要么都执行，要么都不执行。为了保证数据库的一致性，在事务处理之前和之后，都应该遵循某些规则，也就是大家耳熟能详的ACID。 …...

编程日记 2025/9/3 10:37:25

PCB设计基础：面向嵌入式工程师的系统性指南

嵌入式系统的性能、稳定性和可靠性，很大程度上依赖于电路硬件的设计质量。在硬件设计中，PCB（Printed Circuit Board）设计是连接系统功能与实际运行的关键一环。本文将从嵌入式工程师的视角，系统性地介绍PCB设计的关键基…...

编程日记 2025/9/6 3:52:57

aspark 配置2

编写Hadoop集群启停脚本 1.建立新文件，编写脚本程序在hadoop101中操作，在/root/bin下新建文件：myhadoop，输入如下内容： 2.分发执行权限保存后退出，然后赋予脚本执行权限 [roothadoop101 ~]$ chmod x /r…...

编程日记 2025/9/5 7:06:59

【统计方法】LASSO筛变量

启比较原始做LASSO包是library(glmnet) 若目标是纯 LASSO 分析，alpha 必须设为 1 标准化数据：LASSO 对特征的尺度敏感，需对数据进行标准化（均值为0，方差为1）。 cv.glmnet获得的lambda.m…...

编程日记 2025/9/5 22:00:22

拥抱健康生活，书写养生新篇

在快节奏的现代生活中，健康愈发成为人们关注的焦点。践行健康养生，并非是一种选择，而是我们对自己和家人应尽的责任。掌握正确的养生之道，不仅能提升生活品质，更能让生命焕发出新的活力。合理饮食是健康的基石。一…...

编程日记 2025/9/3 7:13:54

Shiro学习（五）：Shiro对权限的缓存

一、问题描述由前边的学习中了解，用户的角色权限一般存储在数据库中，每次进行权限校验时都要从数据库查询用户的角色权限信息；对数据库来说这样频繁的查询压力太大了，也影响程序的性能。 Shiro 中执行权限角色校验时&#xff0…...

编程日记 2025/9/6 3:53:42

QGIS实战系列（六）：进阶应用篇——Python 脚本自动化与三维可视化

欢迎来到“QGIS实战系列”的第六期！在前几期中，我们从基础操作到插件应用逐步提升了 QGIS 技能。这一篇，我们将迈入进阶领域，探索如何用 Python 脚本实现自动化，以及如何创建三维可视化效果，让你的 GIS 项目更高效、更立体。第一步：Python 脚本自动化 QGIS 内置了 Py…...

编程日记 2025/9/6 3:53:43

redis-cpp-cpp如何使用lua脚本

1.前言我今天要在项目中使用lua脚本，结果搞半天都没有弄明白这个函数怎么调用，而且也似乎很少有redis相关的博客介绍，ai也回答的不准确！ 2.正文今天用一个例子演示一下下面是lua脚本 const std::string LuaScript R"…...

编程日记 2025/9/3 10:36:56

承接上一个教程，利用委托事件来进行值传递声明变量 public static double plx, ply,plxx,plyy;声明委托、事件 //声明委托 //事件 public delegate void transferDistance(double dis); public static transferDistance doTransfer; 直接读取form1中的变量 publ…...

编程日记 2025/9/6 3:53:44

PyTorch 深度学习 || 6. Transformer | Ch6.1 注意力机制

...

编程日记 2025/9/4 15:08:57

JWT 秘钥的作用机制

JWT 秘钥的作用并不是给前端使用的，而是用于后端服务器内部的一个重要安全机制。 JWT 秘钥的作用签名与验证： 秘钥主要用于对 JWT（JSON Web Token）进行签名和验证后端使用这个秘钥对令牌进行签名，确保令牌的完整性…...

编程日记 2025/9/3 21:18:09

sun.misc.BASE64Encoder 和 sun.misc.BASE64Decoder包

1. 在将别人的项目导入eclipse之后,出现了"sun.misc.BASE64Encoder找不到jar"的错误，我解决的办法是：右键项目》属性》Java Build Path》jre System Library 》access rules 》resolution选择accessible,下面填上**点击确定即可&#xff0…...

编程日记 2025/9/5 18:07:21

Java面试黄金宝典34

1. 主键索引底层的实现原理定义主键索引是数据库中用于唯一标识表中每一行记录的索引，常见的底层实现是 B 树结构。B 树是一种平衡的多路搜索树，由内部节点和叶子节点组成。内部节点只存储索引键和指向下一层节点的指针，不存储实际数据&am…...

编程日记 2025/9/4 15:08:46

计算机系统---CPU

定义与功能中央处理器（Central Processing Unit，CPU），是电子计算机的主要设备之一，是计算机的核心部件。CPU是计算机的运算核心和控制核心，负责执行计算机程序中的指令，进行算术运算、逻辑运算…...

编程日记 2025/9/4 10:10:00

AWS云安全基线：构建企业级安全防护体系的完整指南

1. 引言随着越来越多的企业将其业务和数据迁移到云端,云安全已成为一个不容忽视的关键议题。AWS作为全球领先的云服务提供商,提供了丰富的安全工具和最佳实践。本文将深入探讨如何构建一个全面的AWS云安全基线,以确保您的企业在云环境中的安全性。 2. AWS共享责任模型在深…...

编程日记 2025/9/4 11:24:08

（三十三）Dart 中使用 Pub 包管理系统与 HTTP 请求教程

Dart 中使用 Pub 包管理系统与 HTTP 请求教程 Pub 包管理系统简介 Pub 是 Dart 和 Flutter 的包管理系统，用于管理项目的依赖。通过 Pub，开发者可以轻松地添加、更新和管理第三方库。使用 Pub 包管理系统 1. 找到需要的库访问以下网址&#xff0c…...

编程日记 2025/9/4 15:08:36

如何实现单例模式？

一、模式定义与核心价值单例模式（Singleton Pattern）是一种创建型设计模式，保证一个类仅有一个实例，并提供全局访问点。其核心价值在于： 资源控制：避免重复创建消耗性资源（如数据库连…...

编程日记 2025/9/4 0:21:15

【51单片机】2-4【I/O口】震动传感器控制继电器

1.硬件 51最小系统继电器模块震动传感器模块 2.软件 #include "reg52.h"sbit vibrate P3^3;//震动传感器DO接到P3.3口 sbit switcher P1^1;//继电器控制端IN接到P1.1void Delay2000ms() //11.0592MHz {unsigned char i, j, k;// _nop_();i 15;j 2;k 235;do{…...

编程日记 2025/9/4 15:08:27

正点原子迷你 miniSTM32用ST link烧录后程序不运行（已解决）

情况，在程序和配置都没有问题时检查烧录使用ST linkv2 烧录后有时程序可行，有时不可行解决方法加USB供电配合SW烧录建议直接用USB转串口烧录不推荐JLINK供电，也不推荐ST linkv2供电...

编程日记 2025/9/4 15:08:22

如何确保MQ消息队列不丢失：Java实现与流程分析

前言在分布式系统中，消息队列（Message Queue, MQ）是核心组件之一，用于解耦系统、异步处理和削峰填谷。然而，消息的可靠性传递是使用MQ时需要重点考虑的问题。如果消息在传输过程中丢失，可能会导致数据不一…...

编程日记 2025/9/4 15:08:18

Pascal语言的系统监控

Pascal语言的系统监控引言在现代计算机系统中，系统监控是确保计算机平稳运行的重要组成部分。无论是个人计算机还是大型服务器，监控系统的性能、资源使用及状态，都是提高系统效率、及时发现问题的关键。Pascal语言作为一种结构化编程语言…...

编程日记 2025/9/4 15:08:13

6.0 使用Qt+ OpenCV+Python加载图片

本例作为python图像处理的入门课程1，使用Qt+ OpenCV+Python加载图片。主要有如下几个地方需要注意： 1. OpenCV 默认使用 BGR 格式，而 Qt 使用 RGB。显示前需要转换：cv2.cvtColor(img, cv2.COLOR_BGR2RGB),一般使用某个QLabel控件进行显示。 pic = cv2.cvtColor(pic, cv2.C…...

编程日记 2025/9/4 15:08:09

低成本训练垂直领域文娱大模型的技术路径

标题:低成本训练垂直领域文娱大模型的技术路径内容:1.摘要在文娱产业快速发展且对智能化需求日益增长的背景下，为降低垂直领域文娱大模型的训练成本，本研究旨在探索低成本训练的有效技术路径。采用对现有开源模型进行微调、利用轻量化模型架构以及优化…...

编程日记 2025/9/5 19:54:38

音视频入门基础：RTP专题（21）——使用Wireshark分析海康网络摄像机RTSP的RTP流

一、引言使用vlc等播放器可以播放海康网络摄像机的RTSP流： 网络摄像机的RTSP流中，RTSP主要用于控制媒体流的传输，如播放、暂停、停止等操作。RTSP本身并不用于转送媒体流数据，而是会通过PLAY方法使用RTP来传输实际的音视频数据。…...

编程日记 2025/9/4 15:08:02

【Java网络编程详解】

文章目录前言一、网络编程基础知识1. 什么是网络编程？ 二、Java网络编程核心类三、TCP编程实现1. TCP通信原理2. TCP服务器端示例3. TCP客户端示例四、UDP编程实现1. UDP通信原理2. UDP服务器端示例3. UDP客户端示例五、使用HttpURLConnection发送HTTP请求1. GET…...

编程日记 2025/9/4 6:16:33

DuckDB系列教程：如何分析Parquet文件

Parquet 是一种强大的、基于列的存储格式，适用于实现更快捷和更高效的数据分析。您可以使用 DuckDB 这种内存型分析数据库来处理 Parquet 文件并运行查询以对其进行分析。在这篇文章中，我们将逐步介绍如何使用 DuckDB 对存储在 Parquet 文件中的餐厅订单…...

编程日记 2025/9/5 19:32:34

uniapp的v-for不显示或者swiper-item的不显示

今天开发的时候碰见一个问题，在布局的时候发现v-for遍历的时候不显示内容 H5是正常的但是在小程序就是不显示最后排查的原因是同一个组件 swiper-item的 v-for不能用相同的名称比如 <swiper-item v-for"i in 3" :key"i"><image …...

编程日记 2025/9/4 15:07:52

解决LeetCode“使括号有效的最少添加”问题

目录问题描述解题思路复杂度分析示例分析暴力替换“不讲码德” 总结问题描述给定一个仅由 ( 和 ) 组成的字符串 s，我们需要通过添加最少数量的括号（( 或 )）使得字符串有效。有效字符串需满足： 空字符串是有效的。 …...

编程日记 2025/9/5 19:58:45

黑马点评_知识点

将手机验证码保存到HttpSession中进行验证（感觉已经过时） Controller中的参数有HttpSession，存验证码session.setAttribute(SystemConstants.VERIFY_CODE, code); 其他的都是逻辑代码 Cookie的缺点什么是Session集群共享问题？ …...

编程日记 2025/9/6 1:04:16

2025年渗透测试面试题总结-某腾讯-玄武实验室扩展（题目+回答）

网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录某腾讯-玄武实验室扩展一、Web安全基础原理与关联漏洞 1.1 CSRF攻击原理深度解析 1.2 反序列化漏洞…...

编程日记 2025/9/4 15:07:40

管理系统 UI 设计：提升企业办公效率的关键

一、管理系统UI设计的基本原则管理系统UI设计应遵循一系列基本原则，以确保界面友好、操作便捷、信息直观。这些原则包括： 简洁性：界面应去除冗余元素，保持简洁明了，避免用户迷失在复杂界面中。一致性：界…...

编程日记 2025/9/4 15:07:37

Apache Commons Lang3 中的 `isNotEmpty` 与 `isNotBlank`的区别

前言在 Java 开发中，字符串的空值（null）、空字符串（“”）和空白字符串（如 " "）的判断是高频需求。Apache Commons Lang3 的 StringUtils 类提供了两个核心方法：isNotEmp…...

编程日记 2025/9/4 15:07:33

WPF 登录页面

效果项目结构 LoginWindow.xaml <Window x:Class"PrismWpfApp.Views.LoginWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.…...

编程日记 2025/9/4 15:07:29

CExercise_05_1函数_2海伦公式求三角形面积

题目： 键盘录入三个边长（带小数），然后用海伦公式计算三角形的面积（如果它确实是一个三角形的话） 海伦公式求三角形面积： 要求基于下列两个函数完成这个编程题： // 判断abc是否可以组…...

编程日记 2025/9/4 1:26:09

Muduo网络库实现 [十五] - HttpContext模块

目录设计思路类的设计解码过程模块的实现私有接口请求函数解析函数公有接口疑惑点设计思路记录每一次请求处理的进度，便于下一次处理。上下文模块是Http协议模块中最重要的一个模块，他需要记录每一次请求处理的进度，需…...

编程日记 2025/9/4 15:07:22

构建自己的私有 Git 服务器：基于 Gitea 的轻量化部署实战指南

对于个人开发者、小型团队乃至企业来说，将项目代码托管在 GitHub、Gitee 等公共平台虽然方便，但也存在一定的隐私与可控性问题。搭建一套私有 Git 代码仓库系统，可以实现对源码的完全控制，同时不依赖任何第三方平台，…...

编程日记 2025/9/4 15:07:19

【计科】计算机科学与技术，从离散数学到软件工程，从理学/抽象/科学到工学/具体/技术

【计科】计算机科学与技术，从离散数学到软件工程，从理学/抽象/科学到工学/具体/技术文章目录 1、发展史与桥梁（离散数学 -> 算法/数据结构 -> 软件工程）2、离散数学（数理逻辑-命题/谓词/集合/函数/关系 -> 代…...

编程日记 2025/9/4 15:07:14

架构与大数据-RabbitMQ‌和Kafka的技术实现异同及落地场景上的异同

RabbitMQ‌与Kafka技术实现及场景对比 ‌一、技术实现异同‌ ‌对比维度‌‌RabbitMQ‌‌Kafka‌‌核心协议/模型‌基于 ‌AMQP 协议‌，支持点对点、发布/订阅、Topic Exchange 等多种消息模式，支持灵活的路由规则‌基于 ‌发布-订阅模型‌，…...

编程日记 2025/9/4 15:07:11

工程画图-UML类图组合和聚合

组合VS聚合组合&聚合浅层理解组合似组装，电脑组装，少装一个CPU行不？不行，没CPU哪还是电脑啊。用实心菱形表示。而聚合似起义，聚是一团火，散是满天星。就像公司和员工，少你一个照常运转…...

编程日记 2025/9/4 15:07:08

Go语言-初学者日记（七）：用 Go 写一个 RESTful API 服务！

👷 实践是最好的学习方式！这一篇我们将用 Go Gin 框架从零开始开发一个用户管理 API 服务。你将学到： 如何初始化项目并引入依赖如何组织目录结构如何用 Gin 实现 RESTful 接口如何通过 curl 测试 API进阶功能拓展建议 🧰 一、项…...

编程日记 2025/9/4 15:07:04

数据结构：手工创建表达式树的方法

1. 表达式树表达式树（Binary Expression Tree）是一类特殊的二叉树，用以表示表达式，如图 7.6.1 所示，是一棵表示了 a b * c d * (e f) 的表达式树。图 7.6.1 表达式树示例表达式树有如下特点： 操作数…...

编程日记 2025/9/4 15:07:01

自定义类型：联合和枚举

文章目录前言一、联合体类型的声明1.1 联合体类型的声明1.2 联合体的特点1.3 相同成员的结构体和联合体对比1.4 联合体大小的计算1.5 联合体的一个练习二、枚举类型的声明2.1 枚举类型的声明2.2 枚举类型的优点2.3 枚举类型的使用1. 用于 switch 语句2. 作为函数参数总结前…...

编程日记 2025/9/4 15:06:57

注意力机制

实现了Bahdanau式加法注意力的核心计算逻辑。以下是三个线性层设计的完整技术解析： 一、数学公式推导注意力分数计算流程： s c o r e ( h d e c , h e n c ) v T ⋅ tanh ⁡ ( W 1 ⋅ h e n c W 2 ⋅ h d e c ) score(h_{dec}, h_{enc}) v^T \cdot …...

编程日记 2025/9/4 15:06:54

OrangePi5Plus开发板不能正确识别USB 3.0 设备（绿联HUB和Camera）

1、先插好上电（可正确识别） 2、上电开机后插，报错如下，只能检测到USB2.0--480M，识别不到USB3.0-5Gbps，重新插拔也不行 Apr 4 21:30:00 orangepi5plus kernel: [ 423.575966] usb 5-1: reset high-speed…...

编程日记 2025/9/4 15:06:50

KubeVirt虚拟化管理架构

目录一. KubeVirt简介 1.1 KubeVirt的价值 1.2 KubeVirt架构 1.3 KubeVirt组件 1.4 KubeVirt流程管理 KubeVirt实战 2.1 Kubevirt安装 2.1.1节点规划 2.1.2 环境准备 2.1.3 安装KubeVirt 2.1.4 安装CDI 2.1.5 安装virtctl命令工具 2.1.6 生成官方虚拟机 2.1.7 进…...

编程日记 2025/9/4 15:06:47