实时消息传送:WebSocket实现系统后台消息实时通知

实时消息传送:WebSocket实现系统后台消息实时通知

    • WebSocket简介
    • 基本实现步骤
      • 后台服务器
      • 后端接口
        • SimpMessagingTemplate
      • MessageDto
      • 前端客户端
    • 示例应用

在现代Web应用中,提供实时通知对于改善用户体验至关重要。WebSocket技术允许建立双向通信通道,从系统后台将消息实时传送给系统用户,并在前端以弹窗的形式通知用户。本文将深入探讨如何使用WebSocket来实现这一功能。

WebSocket简介

WebSocket是一种双向通信协议,与传统的HTTP通信不同,它支持持久连接,使得服务器能够主动向客户端推送消息。这使得WebSocket成为实时通信和消息传送的理想选择。

基本实现步骤

要实现系统后台消息的实时通知,我们可以遵循以下基本步骤:

后台服务器

在后台,我们需要创建一个WebSocket服务器来处理连接和消息广播。使用Java的WebSocket库,我们可以轻松建立WebSocket服务器。

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io IOException;
import java.util.concurrent.CopyOnWriteArrayList;@ServerEndpoint("/websocket")
public class WebSocketServer {private static CopyOnWriteArrayList<Session> sessions = new CopyOnWriteArrayList<>();@OnOpenpublic void onOpen(Session session) {sessions.add(session);}@OnMessagepublic void onMessage(String message, Session session) {// 处理收到的消息}@OnClosepublic void onClose(Session session) {sessions.remove(session);}public static void broadcastMessage(String message) {for (Session session : sessions) {try {session.getBasicRemote().sendText(message);} catch (IOException e) {e.printStackTrace();}}}
}

后端接口

在后端,我们需要提供一个HTTP接口,以便系统后台可以发送消息给WebSocket客户端。这个接口接受POST请求,包含消息内容和接收者信息。为了实现这一功能,我们使用了Spring Framework的WebSocket支持,并引入了SimpMessagingTemplate

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;@RestController
public class MessageController {@Autowiredprivate SimpMessagingTemplate messagingTemplate;@PostMapping("/send-message")public void sendMessageToUser(@RequestBody MessageDto message) {// 在此处,您可以执行任何逻辑以准备要发送的消息内容String messageContent = message.getContent();// 向指定用户发送消息messagingTemplate.convertAndSendToUser(message.getRecipient(), "/queue/messages", messageContent);}
}
SimpMessagingTemplate

SimpMessagingTemplate是Spring Framework的一部分,它允许在后端应用程序中将消息发送到WebSocket客户端的特定目的地(destination),以便将消息传递到订阅该目的地的WebSocket客户端。这是实现实时消息传递的关键工具,它允许后台将消息推送到WebSocket客户端,从而实现了实时通知功能。

SimpMessagingTemplate是Spring Framework中的一个类,它用于向WebSocket客户端发送消息。它是Spring的WebSocket支持模块的一部分,通常用于实现实时消息传递功能。以下是一些关于SimpMessagingTemplate的基本信息:

  • 用途SimpMessagingTemplate用于发送消息到WebSocket目的地(destination),使消息能够到达订阅该目的地的WebSocket客户端。

  • Spring WebSocket:Spring Framework提供了WebSocket支持,允许开发者构建具有实时消息传递功能的应用程序。SimpMessagingTemplate是这一支持的关键组件之一。

  • 示例用途:通常,SimpMessagingTemplate用于处理后端应用程序中的业务逻辑,然后将结果消息发送给前端的WebSocket客户端。这可以用于实现实时聊天、通知、即时数据传递等功能。

  • 目的地(destination):在Spring WebSocket中,消息发送到WebSocket客户端的特定位置被称为目的地。SimpMessagingTemplate允许您将消息发送到指定的目的地,WebSocket客户端通过订阅相应目的地来接收这些消息。

在上述示例中,SimpMessagingTemplate被用于向WebSocket客户端发送消息,实现了系统后台向用户发送实时通知的功能。它可以将消息发送到指定用户的特定目的地,以便将消息传递到具体的WebSocket订阅者。

要使用SimpMessagingTemplate,通常需要配置Spring WebSocket支持并注入该类。然后,您可以在后端的控制器或服务中使用它来发送消息给WebSocket客户端。

MessageDto

MessageDto是一个数据传输对象,包含了消息的接收者和内容。在HTTP请求的请求体中发送MessageDto对象。

public class MessageDto {private String recipient;private String content;// Getters and setters
}

前端客户端

在前端,我们需要创建WebSocket连接并处理从服务器接收到的消息。通常,我们可以将接收到的消息以弹窗的形式通知用户。

const socket = new WebSocket("ws://example.com/websocket");socket.onopen = () => {console.log("WebSocket连接已建立");
};socket.onmessage = (event) => {const message = event.data;// 使用弹窗通知用户showNotification(message);
};socket.onclose = () => {console.log("WebSocket连接已关闭");
};function showNotification(message) {// 使用浏览器的通知API或自定义弹窗组件来通知用户// 以下是一个简单的示例,使用浏览器通知APIif ("Notification" in window) {if (Notification.permission === "granted") {new Notification("新消息", { body: message });} else if (Notification.permission !== "denied") {Notification.requestPermission().then((permission) => {if (permission === "granted") {new Notification("新消息", { body: message });}});}}
}

示例应用

通过这个实例,系统后台可以使用WebSocket将重要消息实时通知给用户。用户将获得弹窗通知,无需刷新页面或等待长时间来查看消息。这种实时通知机制对于在线聊天应用、通知系统、即时交易平台等场景非常有用。

WebSocket技术为实现实时通知提供了一个强大而灵活的工具,允许系统后台与前端用户之间建立持久的双向通信通道。这种实时通信增强了用户体验,使用户能够快速响应重要信息。无论是社交媒体、电子邮件通知还是在线购物平台,WebSocket可以为您的应用程序提供实时通知功能。

通过WebSocket,您可以改进用户体验、提高用户参与度,并确保及时传达重要信息。实时消息传送是现代Web应用程序的重要组成部分,帮助您与用户建立更强的连接。

版权声明:
原创博主:牛哄哄的柯南
博主原文链接:https://keafmd.blog.csdn.net/
个人博客链接:https://www.keafmd.top/

看完如果对你有帮助,感谢点击下面的点赞支持!
[哈哈][抱拳]

在这里插入图片描述
加油!

共同努力!

Keafmd

感谢支持牛哄哄的柯南,期待你的三连+关注~~

keep accumulate for my dream【共勉】

                                                       ↓   ↓   ↓   ↓   ↓   ↓  

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

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

相关文章

nginx常见报错及解决acme.sh给Nginx配置SSL证书

问题排查&#xff1a; nginx -t //检查配置是否正确只要返回ok就说明配置没问题。 Nginx报错Failed to restart nginx.service: Unit not found 解决方法&#xff1a; 1、在根目录下执行 vim /etc/init.d/nginx2、插入以下代码 #!/bin/sh # nginx - this script starts …

网络基础知识点

osi七层模型&#xff1a; 应用层&#xff1a;提供用户接口&#xff0c;与用户进行交互 表示层&#xff1a;进行数据格式的转换 会话层&#xff1a;建立、维护和验证会话 传输层&#xff1a;保证目标从源到目的地的传输&#xff08;传输协议和端口号&#xff09; 网络层&#x…

打造自己的前端组件库(奶妈版,超详细)

打造自己的前端组件库 demo是开源的&#xff0c;自己上npm 或者 github 上都能搜到 新建vue项目(sass js vue2) vue create yt-ui 修改文件目录(如下) 修改&#xff1a; 1.src 更名 examples; 2. src/components移动到项目最外层&#xff1b;3.vue.config.js更改入口文件 /…

FPGA ZYNQ VIVADO创建IP核点亮LED灯 方式一

这里写自定义目录标题 PL端 纯Verilog语言创建IP核实现点亮LED灯工使用设备 ZYNQ 7010&#xff0c;选择设备型号XC7Z010CLG400-1根据以下流程完成本次创建时钟频率50MHZ&#xff0c;周期T20ns&#xff0c;因此计数50_000_000次&#xff0c;1sLED灯闪烁一次 PL端 纯Verilog语言创…

Hadoop3教程(二十五):Yarn的多队列调度器使用案例

文章目录 &#xff08;136&#xff09;生产环境多队列创建&好处&#xff08;137&#xff09;容量调度器多队列提交案例如何创建多个队列如何向指定队列提交任务 &#xff08;138&#xff09;容量调度器任务优先级&#xff08;139&#xff09;公平调度器案例参考文献 &#…

自动化运维ansible

一、Ansible概述: 是一个配置管理系统&#xff08;configuration management system&#xff09;,当下最流行的批量自动化运维工具之一。 Ansible是一个开源的自动化工具&#xff0c;用于配置管理、应用程序部署和编排等 IT 任务的执行。它专注于简单性和可扩展性&#xff0c;并…

Linux性能优化--性能工具:下一步是什么

13.0 概述 本章是对一些事情的思索&#xff0c;包括&#xff1a;Linux性能工具的当前状态&#xff0c;哪些仍需要改进以及为什么Linux是当前一个相当不错的进行性能调查的平台。 阅读本章后&#xff0c;你将能够&#xff1a; 了解Linux性能工具箱的漏洞&#xff0c;以及一些理…

二维码智慧门牌管理系统升级解决方案:地图展示

文章目录 前言一、地图展示功能二、其他升级和改进 前言 随着城市的发展和信息化建设的推进&#xff0c;二维码智慧门牌管理系统在社区管理、物流配送、巡检巡查等多个领域发挥着越来越重要的作用。为了更好地满足用户需求&#xff0c;提升管理效率和服务质量&#xff0c;我们…

ATT 格式汇编语言语法

GNU 汇编器是 GNU 二进制实用程序 (binutils) 的一部分&#xff0c;也是 GNU 编译器集合的后端。尽管 as 不是编写相当大的汇编程序的首选汇编程序&#xff0c;但它是当代类 Unix 系统的重要组成部分&#xff0c;特别是对于内核级黑客攻击。 经常因其神秘的 AT&T 风格语法而…

Deep Learning for Geophysics综述阅读(未完)

文章题目《Deep Learning for Geophysics: Current and Future Trends》 文章解读&#xff1a;地球物理学&#xff08;人工智能轨道&#xff09;——&#xff08;1&#xff09;文献翻译《面向地球物理学的深度学习&#xff1a;当前与未来趋势》 - 知乎 (zhihu.com) 这里主要列…

数组模拟堆

文章目录 QuestionIdeasCode Question 维护一个集合&#xff0c;初始时集合为空&#xff0c;支持如下几种操作&#xff1a; I x&#xff0c;插入一个数 x &#xff1b; PM&#xff0c;输出当前集合中的最小值&#xff1b; DM&#xff0c;删除当前集合中的最小值&#xff08;数…

Hive安装配置 - 内嵌模式

文章目录 一、Hive运行模式二、安装配置内嵌模式Hive&#xff08;一&#xff09;下载hive安装包&#xff08;二&#xff09;上传hive安装包&#xff08;三&#xff09;解压缩hive安装包&#xff08;四&#xff09;配置hive环境变量&#xff08;五&#xff09;关联Hadoop&#x…

基于Java的人事管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…

使用 类加载器 或者 类对象 读取文件

相对路径&#xff1a;项目 的 根目录 开始查找。&#xff08; 但是在我们真正开发的时候&#xff0c;我们读到的更多的文件并不是直接放在我们项目里面这个文件夹里面&#xff0c;而是放在我们模块里面 &#xff09;同理可得&#xff0c;我们直接创建 文件 b.txt 会在项目的根目…

ESP32C3 LuatOS TM1650①驱动测试

合宙TM1650驱动资料 TM1650.lua源码 引脚连接 TM1650ESP32C3SCLGPIO5SDAGPIO4 下载TM1650.lua源码&#xff0c;并以文件形式保存在项目文件夹中 驱动测试源码 --注意:因使用了sys.wait()所有api需要在协程中使用 -- 用法实例 PROJECT "ESP32C3_TM1650" VERSION …

动手实现H5仿原生app前进后退切换效果

动手实现H5仿原生app前进后退切换效果 前言 最近在优化H5页面&#xff0c;我注意到当开发完成的移动端H5页面嵌入到微信小程序或者原生app中时&#xff0c;当触发页面路由切换会与原生app看上去有点格格不入&#xff0c;因为H5页面<router-view>切换路由时是直接替换了…

【Qt控件之QToolBox】介绍及使用

概述 QToolBox类提供了一个列式的带有选项卡的小部件条目。工具箱是一个小部件&#xff0c;以一个列式的选项卡显示在上方&#xff0c;并在当前选项卡下方显示当前的小部件条目。每个选项卡在选项卡列中有一个索引位置。选项卡的小部件条目是一个QWidget。 每个小部件条目都有…

[ Windows-Nginx ]Windows服务器,Tomcat容器部署项目,整合Nginx

一、官网下载Nginx http://nginx.org/en/download.html 稳定版&#xff1a;windows的stable版本 注意&#xff1a;Nginx安装包不要放在中文目录下 二、conf目录下&#xff0c;修改nginx.conf文件 修改Nginx服务端口&#xff1a; 默认端口为80&#xff0c;即外界访问的入口…

阿里巴巴店铺所有商品数据接口及店铺商品数据分析

获取阿里巴巴店铺所有商品数据的接口是阿里巴巴开放平台提供的接口&#xff0c;通过该接口可以获取店铺所有商品数据。 通过阿里巴巴开放平台接口获取店铺所有商品数据的方法如下&#xff1a; 在开放平台注册成为开发者并创建一个应用&#xff0c;获取到所需的 App Key 和 Ap…

学习c#桌面应用编程 --- 我的第一个游戏

场景 我需要做一个c#桌面窗口软件&#xff0c;但是我曾经都是专职于java开发&#xff0c;但是java对windows并不是特别友好(awt除外)&#xff0c;于是必须需要掌握c#桌面编程&#xff0c;所以我需要手动做一个小游戏&#xff0c;来学习c#的一些基本桌面应用的知识。 开始 这…