SpringBoot_websocket实战

SpringBoot_websocket实战

  • 前言
  • 1.websocket入门
    • 1.1 websocket最小化配置
      • 1.1.1 后端配置
      • 1.1.2 前端配置
    • 1.2 websocket使用sockjs
      • 1.2.1 后端配置
      • 1.2.2 前端配置
    • 1.3 websocket使用stomp协议
      • 1.3.1 后端配置
      • 1.3.2 前端配置
  • 2.websocket进阶
    • 2.1 websocket与stomp有什么区别
    • 2.2 websocket与stomp怎么选
  • 3.websocket实战
    • 3.1 案例1:websocket 实现web-ssh
    • 3.2 案例2:websocket 实现控制台日志在线展示

前言

本文记录说明springboot websocket示例及实战，你将学习到
三种websocket开发方式

  • /websocket 接口演示原生websocket前后端收发websocket消息
  • /websocket-sockjs 演示使用sockjs 前后端收发websocket消息
  • /weboscket-stomp 演示使用stomp协议使用websocket

以及通过实战演示在不同业务场景的技术选择

  • web-ssh 使用sockjs点对点数据传输
  • 日志项目 使用stomp广播数据

使用环境:

  • springboot: 2.3.2.RELEASE
  • jdk: java11

1.websocket入门

Spring Boot WebSocket是Spring框架的一部分，用于实现WebSocket通信协议的支持。WebSocket是一种双向通信协议，允许服务器与客户端之间进行实时、低延迟的数据交换，适用于实时聊天、实时通知、在线协作和实时数据展示等场景。Spring Boot WebSocket提供了使用WebSocket的简化和高效的方法，让开发者能够轻松地实现WebSocket通信。

以下是Spring Boot WebSocket的主要特点和概念：

  1. WebSocket协议支持: Spring Boot WebSocket支持WebSocket通信协议，允许双向的、实时的通信。WebSocket允许服务器主动向客户端推送数据，而不需要客户端发起请求。
  2. STOMP协议支持: 除了原始WebSocket，Spring Boot WebSocket还支持STOMP（Simple Text Oriented Messaging Protocol）协议。STOMP是一个基于文本的协议，它提供了更高级的消息传递功能，例如消息订阅、目标广播和认证等。
  3. 消息处理器: Spring Boot WebSocket允许你定义消息处理器，用于处理WebSocket消息。你可以编写处理器来处理接收到的消息，并决定如何响应。
  4. 消息代理: Spring Boot WebSocket支持消息代理，你可以配置一个消息代理服务器（如RabbitMQ或ActiveMQ），用于处理WebSocket消息的分发和广播。这使得构建分布式和扩展的WebSocket应用程序更容易。
  5. 消息广播: Spring Boot WebSocket允许你将消息广播到多个订阅者。这对于实现群聊、广播通知和实时数据展示等功能非常有用。
  6. 安全性: Spring Boot WebSocket提供了与Spring Security集成的方式，可以轻松实现WebSocket连接的安全性和认证。
  7. SockJS支持: Spring Boot WebSocket还支持SockJS，这是一个JavaScript库，用于处理浏览器不支持WebSocket的情况下的降级处理，使得WebSocket通信在各种浏览器上都能正常工作

1.1 websocket最小化配置

步骤说明

  • 后端通过@EnableWebSocket注解开启websocket功能
    1. 定义websocket的访问端点 （作用: 定义对外暴露websocket接口）
    2. 定义websocket的处理器 （作用: 解决websocket建立后消息怎么处理）
  • 前端通过new WebSocket(“ws://localhost:9090/websocket”); 打开websocket连接并监听消息

1.1.1 后端配置

  • maven 依赖
        <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--websocket--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>
  • WebSocketConfiguration 实现WebSocketConfigurer注册websocket接口及处理器
@Configuration
@EnableWebSocket
public class WebSocketConfiguration implements WebSocketConfigurer {@Autowiredprivate EchoWebSocketHandler echoWebSocketHandler;@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {// 配置原生WebSocket处理器registry.addHandler(echoWebSocketHandler, "/websocket").setAllowedOrigins("*"); //允许跨域}@Beanpublic EchoWebSocketHandler echoWebSocketHandler() {return new EchoWebSocketHandler();}
}
  • EchoWebSocketHandler 实现WebSocketHandler接口, 接受消息后简单打印转发消息
public class EchoWebSocketHandler implements WebSocketHandler {private static final Logger LOGGER = LoggerFactory.getLogger(EchoWebSocketHandler.class);@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {// 连接建立时的处理逻辑LOGGER.info("[websocket-echo] session:{} ConnectionEstablished", session.getId());}@Overridepublic void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws IOException {String payload = (String) message.getPayload();LOGGER.info("[websocket-echo] session:{} receive:{}", session.getId(), payload);session.sendMessage(new TextMessage(payload));}@Overridepublic void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {// 处理传输错误}// 连接关闭时的处理逻辑@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {LOGGER.info("[websocket-echo] WebSocketSession[{}] close all ssh connection", session.getId());}@Overridepublic boolean supportsPartialMessages() {return false;}
}

1.1.2 前端配置

TODO 说明下WebSocket 对象作用

<!DOCTYPE html>
<html>
<head><title>原始WebSocket示例</title>
</head>
<body>
<h1>测试默认websocket 接发消息</h1>
<div id="messages"></div>
<input type="text" id="message" placeholder="输入消息">
<button onclick="sendMessage()">发送</button><script>var socket = new WebSocket("ws://localhost:9090/websocket");socket.onopen = function(event) {console.log("WebSocket连接已打开");};socket.onmessage = function(event) {var messages = document.getElementById("messages");messages.innerHTML += "<p>" + event.data + "</p>";};function sendMessage() {var messageInput = document.getElementById("message");var message = messageInput.value;socket.send(message);messageInput.value = "";}
</script>
</body>
</html>

1.2 websocket使用sockjs

为了区别原生WebSocket处理器,以示区别,再注册一个接口/websocket-sockjs. 并且开启.withSockJS()

1.2.1 后端配置

@Configuration
@EnableWebSocket
@Import({WebSocketStompConfiguration.class})
public class WebSocketConfiguration implements WebSocketConfigurer {@Autowiredprivate EchoWebSocketHandler echoWebSocketHandler;@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {// 配置原生WebSocket处理器器registry.addHandler(echoWebSocketHandler, "/websocket").setAllowedOrigins("*");//WebSocket connection to 'ws://localhost:9090/websocket' failed: Error during WebSocket handshake: Unexpected response code: 200//.withSockJS();//.withSockJS()的作用是声明我们想要使用 SockJS 功能，如果WebSocket不可用的话，会使用 SockJS。(前端需要使用sockjs库)registry.addHandler(echoWebSocketHandler, "/websocket-sockjs").setAllowedOrigins("*").withSockJS();}@Beanpublic EchoWebSocketHandler echoWebSocketHandler() {return new EchoWebSocketHandler();}
}

1.2.2 前端配置

使用sockjs需要引入前端sockjs的库: https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js

<!DOCTYPE html>
<html>
<head><title>原始WebSocket示例</title><script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
</head>
<body>
<h1>测试websocket sockjs接发消息</h1>
<div id="messages"></div>
<input type="text" id="message" placeholder="输入消息">
<button onclick="sendMessage()">发送</button><script>// var socket = new WebSocket("ws://localhost:9090/websocket");//原始写法var socket = new SockJS('http://localhost:9090/websocket-sockjs');// 依赖sockjs库socket.onopen = function(event) {console.log("WebSocket连接已打开");};// 监听websockt消息回调socket.onmessage = function(event) {var messages = document.getElementById("messages");messages.innerHTML += "<p>" + event.data + "</p>";};// 定义连接关闭时的回调函数socket.onclose = function () {console.log('WebSocket 连接已关闭');};// 定义连接错误时的回调函数socket.onerror = function (e) {console.error('WebSocket 连接出错：', e);};function sendMessage() {var messageInput = document.getElementById("message");var message = messageInput.value;socket.send(message);messageInput.value = "";}
</script>
</body>
</html>

1.3 websocket使用stomp协议

步骤说明

  • 启用stomp协议, 通过@EnableWebSocketMessageBroker 并注册stomp的端点
    1. 定义stomp端点 WebSocketStompConfiguration
    2. 配置stomp消息路由 TestWebSocketStompController

1.3.1 后端配置

@EnableWebSocketMessageBroker //在 WebSocket 上启用 STOMP
public class WebSocketStompConfiguration {@Bean@ConditionalOnMissingBeanpublic WebSocketMessageBrokerConfigurer brokerConfigurer() {return new WebSocketMessageBrokerConfigurer() {/*** stomp 协议，一种格式比较简单且被广泛支持的通信协议，spring4提供了以stomp协议为基础的websocket通信实现。* spring 的websocket实现，实际上是一个简易版的消息队列（而且是主题-订阅模式的）* @param registry*/@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {// "/stomp-websocket"，客户端需要注册这个端点进行链接，// .withSockJS()的作用是声明我们想要使用 SockJS 功能，如果WebSocket不可用的话，会使用 SockJS。registry.addEndpoint("/websocket-stomp").setAllowedOrigins("*").withSockJS();}};}}
  • 配置消息转发路由
@Controller
public class TestWebSocketStompController {private static final Logger LOGGER = LoggerFactory.getLogger(TestWebSocketStompController.class);@AutowiredSimpMessagingTemplate messagingTemplate;@GetMapping("/websocket/print/{msg}")@ResponseBodypublic String print(@PathVariable String msg) {messagingTemplate.convertAndSend("/topic/print", msg);return msg;}@MessageMapping("/app/{destination}") // 使用 {destination} 占位符来捕获动态的目的地@SendTo("/topic/print") // 服务器广播消息的目的地public String handleMessage(@DestinationVariable String destination, String message) {// 处理接收到的消息LOGGER.info("Dynamic destination:[{}] Received message:{}", destination, message);// 根据动态目的地执行不同的操作if ("destination1".equals(destination)) {// 处理目的地1的操作} else if ("destination2".equals(destination)) {// 处理目的地2的操作} else {// 直接转发到对应订阅地址messagingTemplate.convertAndSend("/topic/" + destination, "copy:" + message);}// 可以根据需要添加更多的条件// 返回响应消息return message;}
}
  • 最后通过@Import导入WebSocketStompConfiguration配置
@Configuration
@EnableWebSocket
@Import({WebSocketStompConfiguration.class})
public class WebSocketConfiguration implements WebSocketConfigurer {@Autowiredprivate EchoWebSocketHandler echoWebSocketHandler;@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {// 配置原生WebSocket处理器registry.addHandler(echoWebSocketHandler, "/websocket").setAllowedOrigins("*");//WebSocket connection to 'ws://localhost:9090/websocket' failed: Error during WebSocket handshake: Unexpected response code: 200//.withSockJS();//.withSockJS()的作用是声明我们想要使用 SockJS 功能，如果WebSocket不可用的话，会使用 SockJS。(前端需要使用sockjs库)registry.addHandler(echoWebSocketHandler, "/websocket-sockjs").setAllowedOrigins("*").withSockJS();}@Beanpublic EchoWebSocketHandler echoWebSocketHandler() {return new EchoWebSocketHandler();}
}

1.3.2 前端配置

前端依赖sockjs及stomp.min.js的库

<!DOCTYPE html>
<html>
<head><title>WebSocket Example</title><script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.2/sockjs.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script></head>
<body>
<h1>测试websocket stomp协议接发消息</h1>
<h2>发送示例</h2>
<input type="text" id="sendDestination" placeholder="Enter send destination"><input type="text" id="message" placeholder="Enter your message">
<button onclick="sendMessage()">Send Message</button><hr>
<h2>订阅示例</h2>
<input type="text" id="listenDestination" placeholder="Enter listen destination">
<button onclick="subscribeToDestination()">Subscribe</button>
<div id="messages"></div><script>var stompClient = null;var listenDestination = null;function connect() {var socket = new SockJS('/websocket-stomp'); // WebSocket端点stompClient = Stomp.over(socket);stompClient.connect({}, function (frame) {console.log('stomp Connected: ' + frame);});}function sendMessage() {var sendDestination = document.getElementById('sendDestination').value; // 获取发送目的地var message = document.getElementById('message').value;stompClient.send('/app/' + sendDestination, {}, message); // 发送消息到指定的目的地}function subscribeToDestination() {listenDestination = document.getElementById('listenDestination').value; // 获取监听目的地stompClient.subscribe('/topic/' + listenDestination, function (message) {displayMessage(message.body);});}function displayMessage(message) {var messagesDiv = document.getElementById('messages');var p = document.createElement('p');p.appendChild(document.createTextNode(message));messagesDiv.appendChild(p);}connect();
</script>
</body>
</html>

2.websocket进阶

2.1 websocket与stomp有什么区别

  • WebSocket
    1. WebSocket 是一种通信协议： WebSocket 是一种在Web浏览器和服务器之间提供双向通信的协议。它允许在客户端和服务器之间创建持久性的连接，以便在连接建立后实时地发送和接收消息。
    2. 原始的、低级的协议： WebSocket 是一种相对较低级的协议，它允许在两端之间直接发送原始的消息帧（frames）。这意味着你可以通过WebSocket发送任意的二进制或文本数据。
    3. 需要自行处理消息格式和路由逻辑： WebSocket 本身并没有规定消息的格式或路由逻辑。在WebSocket上发送的消息可以是任意格式的数据，你需要自行定义消息的结构和处理逻辑。
  • STOMP
    1. STOMP 是一种消息协议： STOMP 是一种基于文本的简单消息协议，它定义了客户端和消息代理（broker）之间如何进行交互的规范。STOMP 通常运行在WebSocket之上，它提供了一种在客户端和服务器之间进行实时消息通信的方式。
    2. 面向文本的消息格式： STOMP 消息是文本格式的，它使用类似于HTTP报文的格式来定义消息的头部和体。这种面向文本的格式使得它易于阅读和调试。
    3. 定义了消息的结构和路由逻辑： STOMP 规定了消息的格式和消息目的地的语义。它定义了消息头部的各种属性（例如，目的地、消息类型等），并提供了一种简单的消息路由机制，使得消息能够被发送到特定的目的地。

2.2 websocket与stomp怎么选

如果你期望WebSocket连接之间是隔离的，不需要共享数据，那么使用原始的WebSocket通信是一个合适的选择。原始WebSocket通信提供了一种简单而轻量级的方式，每个连接都是独立的，不会共享会话数据。

STOMP协议通常用于需要高级消息传递功能和消息广播的场景，其中不同连接之间需要共享数据。如果你不需要这种复杂性，原始WebSocket通信足以满足需求，而且更容易理解和维护。

因此，你可以根据你的应用程序需求选择使用原始WebSocket通信或STOMP协议。如果只需要简单的双向通信并希望保持连接之间的隔离，原始WebSocket通信通常是一个更直接的选择

3.websocket实战

3.1 案例1:websocket 实现web-ssh

springboot实现webssh功能, 使用xterm(前端) + websocket + jsch技术实现。后端主要实现websocket消息与jsch命令收发即可。还在开发中, 篇幅关系，实现过程就不写了。有需要点赞或留言，开源后再通知。

在这里插入图片描述

3.2 案例2:websocket 实现控制台日志在线展示

web在线查看springboot后台日志，源码参考:https://github.com/easycode8/easy-log 的easy-log-web模块, 代码量很少。

在这里插入图片描述

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

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

相关文章

Redis性能压测、监控工具及优化方案

Redis性能压测、监控工具及优化方案

Redis是一款高性能的开源缓存数据库&#xff0c;但是在实际应用中&#xff0c;我们需要对Redis进行性能压测、监控以及优化&#xff0c;以确保其稳定性和高可用性。本文将介绍Redis性能压测、监控工具及优化方案。 01 Redis性能压测 常用的Redis性能压测工具有&#xff1a; …
阅读更多...
SQL知多少？这篇文章让你从小白到入门

SQL知多少？这篇文章让你从小白到入门

个人网站 本文首发公众号小肖学数据分析 SQL&#xff08;Structured Query Language&#xff09;是一种用于管理和处理关系型数据库的编程语言。 对于想要成为数据分析师、数据库管理员或者Web开发人员的小白来说&#xff0c;学习SQL是一个很好的起点。 本文将为你提供一个…
阅读更多...
知虾数据软件：电商人必备知虾数据软件，轻松掌握市场趋势

知虾数据软件：电商人必备知虾数据软件，轻松掌握市场趋势

在当今数字化时代&#xff0c;数据已经成为了企业决策的重要依据。对于电商行业来说&#xff0c;数据更是至关重要。如果你想在电商领域中脱颖而出&#xff0c;那么你需要一款强大的数据分析工具来帮助你更好地了解市场、分析竞争对手、优化运营策略。而知虾数据软件就是这样一…
阅读更多...
postgreSQL如何快速查询大表数据量

postgreSQL如何快速查询大表数据量

文章目录 场景方案结果 场景 我有一个非常大的表&#xff0c;估计几百万或者几千万。 我开始使用了 select count(*) from my_table_javapub 方式&#xff0c;查询非常慢。 如何解决&#xff1f;&#xff1f;&#xff1f; 方案 如果你需要更快地获取表中的行数&#xff0c…
阅读更多...
4G5G智能执法记录仪在保险公司车辆保险远程定损中的应用

4G5G智能执法记录仪在保险公司车辆保险远程定损中的应用

4G智能执法记录仪&#xff1a;汽车保险定损的**利器 随着科技的不断进步&#xff0c;越来越多的智能设备应用到日常生活中。而在车辆保险定损领域&#xff0c;4G智能执法记录仪的出现无疑是一大**。它不仅可以实现远程定损&#xff0c;还能实现可视化操作、打印保单以及数据融…
阅读更多...
完美解决：yum -y install nginx 报出 没有可用软件包 nginx。错误：无须任何处理

完美解决：yum -y install nginx 报出 没有可用软件包 nginx。错误：无须任何处理

目录 一、问题&#xff1a; 二、原因&#xff1a; 三、解决方法&#xff1a; 一、问题&#xff1a; [rootlocalhost ~]# yum -y install nginx 已加载插件&#xff1a;fastestmirror Loading mirror speeds from cached hostfile * base: mirrors.bfsu.edu.cn * extras: m…
阅读更多...
工业风格大屏：让数据更生动，直观更简单

工业风格大屏：让数据更生动，直观更简单

硬工业风格可视化大屏是一种以工业为主题的大屏展示方式&#xff0c;具有极强的视觉冲击力和直观性。它将大屏展示和硬件设计融为一体&#xff0c;将数据以可视化的方式呈现出来&#xff0c;帮助用户更好地理解数据背后的含义和价值。 硬工业风格可视化大屏如&#xff1a; 硬工…
阅读更多...
变态跳台阶，剑指offer

变态跳台阶，剑指offer

目录 题目&#xff1a; 我们直接看题解吧&#xff1a; 相似题目&#xff1a; 解题方法&#xff1a; 审题目事例提示&#xff1a; 解题思路&#xff1a; 代码实现&#xff1a; 题目地址&#xff1a; 【剑指Offer】9、变态跳台阶 难度&#xff1a;简单 今天刷变态跳台阶&#xf…
阅读更多...
LOIS: Looking Out of Instance Semanticsfor Visual Question Answering

LOIS: Looking Out of Instance Semanticsfor Visual Question Answering

目录 一、论文速读 1.1 摘要 1. 2 论文概要总结 二、论文精度 2.1 论文试图解决什么问题&#xff1f; 2.2 论文中提到的解决方案之关键是什么&#xff1f; 2.3 用于定量评估的数据集是什么&#xff1f;代码有没有开源&#xff1f; 2.4 这篇论文到底有什么贡献&#xff…
阅读更多...
m4s格式视频文件如何转mp4？三个方法教会你！

m4s格式视频文件如何转mp4？三个方法教会你！

m4s格式是一种视频分片格式&#xff0c;它将视频文件分成多个小块&#xff0c;方便网络传输和播放。这种格式常用于流媒体服务&#xff0c;如在线视频网站、直播平台等&#xff0c;比如B站哔哩哔哩下载下来的视频就是这种格式。 方法一&#xff1a;野葱视频转换器 一款音视频转…
阅读更多...
冷链运输车辆GPS定位及温湿度管理案例

冷链运输车辆GPS定位及温湿度管理案例

1.项目背景 项目名称&#xff1a;山西冷链运输车辆GPS定位及温湿度管理案例 项目需求&#xff1a;随着经济发展带动物流行业快速发展&#xff0c;运输规模逐步扩大&#xff0c;集团为了适应高速发展的行业现象&#xff0c;物流管理系统的完善成了现阶段发展的重中之重。因此&…
阅读更多...
设计一个实用好看的餐边柜或者酒柜需要知道这5点。福州中宅装饰，福州装修

设计一个实用好看的餐边柜或者酒柜需要知道这5点。福州中宅装饰，福州装修

餐厅旁边的餐边柜和酒柜是提升餐厅功能性和美观度的重要元素。它们不仅可以提供额外的储物空间&#xff0c;还可以展示精美的餐具和收纳酒品。下面为大家分享一些布置餐边柜和酒柜的灵感&#xff0c;让你的餐厅更加时尚和实用。 1. 餐边柜与酒柜的组合 将餐边柜和酒柜组合在一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023