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的主要特点和概念：
- WebSocket协议支持: Spring Boot WebSocket支持WebSocket通信协议，允许双向的、实时的通信。WebSocket允许服务器主动向客户端推送数据，而不需要客户端发起请求。
- STOMP协议支持: 除了原始WebSocket，Spring Boot WebSocket还支持STOMP（Simple Text Oriented Messaging Protocol）协议。STOMP是一个基于文本的协议，它提供了更高级的消息传递功能，例如消息订阅、目标广播和认证等。
- 消息处理器: Spring Boot WebSocket允许你定义消息处理器，用于处理WebSocket消息。你可以编写处理器来处理接收到的消息，并决定如何响应。
- 消息代理: Spring Boot WebSocket支持消息代理，你可以配置一个消息代理服务器（如RabbitMQ或ActiveMQ），用于处理WebSocket消息的分发和广播。这使得构建分布式和扩展的WebSocket应用程序更容易。
- 消息广播: Spring Boot WebSocket允许你将消息广播到多个订阅者。这对于实现群聊、广播通知和实时数据展示等功能非常有用。
- 安全性: Spring Boot WebSocket提供了与Spring Security集成的方式，可以轻松实现WebSocket连接的安全性和认证。
- SockJS支持: Spring Boot WebSocket还支持SockJS，这是一个JavaScript库，用于处理浏览器不支持WebSocket的情况下的降级处理，使得WebSocket通信在各种浏览器上都能正常工作
1.1 websocket最小化配置
步骤说明
- 后端通过@EnableWebSocket注解开启websocket功能
- 定义websocket的访问端点 （作用: 定义对外暴露websocket接口）
- 定义websocket的处理器 （作用: 解决websocket建立后消息怎么处理）
- 前端通过new WebSocket(“ws://localhost:9090/websocket”); 打开websocket连接并监听消息
1.1.1 后端配置
- maven 依赖
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-websocketartifactId>
dependency>
- WebSocketConfiguration 实现WebSocketConfigurer注册websocket接口及处理器
@Configuration
@EnableWebSocket
public class WebSocketConfiguration implements WebSocketConfigurer {
@Autowired
private EchoWebSocketHandler echoWebSocketHandler;
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
// 配置原生WebSocket处理器
registry.addHandler(echoWebSocketHandler, "/websocket")
.setAllowedOrigins("*"); //允许跨域
}
@Bean
public EchoWebSocketHandler echoWebSocketHandler() {
return new EchoWebSocketHandler();
}
}
- EchoWebSocketHandler 实现WebSocketHandler接口, 接受消息后简单打印转发消息
public class EchoWebSocketHandler implements WebSocketHandler {
private static final Logger LOGGER = LoggerFactory.getLogger(EchoWebSocketHandler.class);
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
// 连接建立时的处理逻辑
LOGGER.info("[websocket-echo] session:{} ConnectionEstablished", session.getId());
}
@Override
public 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));
}
@Override
public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
// 处理传输错误
}
// 连接关闭时的处理逻辑
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
LOGGER.info("[websocket-echo] WebSocketSession[{}] close all ssh connection", session.getId());
}
@Override
public 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 += ""
+ event.data + "";
};
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 {
@Autowired
private EchoWebSocketHandler echoWebSocketHandler;
@Override
public 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();
}
@Bean
public 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 += ""
+ event.data + "";
};
// 定义连接关闭时的回调函数
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的端点
- 定义stomp端点 WebSocketStompConfiguration
- 配置stomp消息路由 TestWebSocketStompController
1.3.1 后端配置
@EnableWebSocketMessageBroker //在 WebSocket 上启用 STOMP
public class WebSocketStompConfiguration {
@Bean
@ConditionalOnMissingBean
public WebSocketMessageBrokerConfigurer brokerConfigurer() {
return new WebSocketMessageBrokerConfigurer() {
/**
* stomp 协议，一种格式比较简单且被广泛支持的通信协议，spring4提供了以stomp协议为基础的websocket通信实现。
* spring 的websocket实现，实际上是一个简易版的消息队列（而且是主题-订阅模式的）
* @param registry
*/
@Override
public 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);
@Autowired
SimpMessagingTemplate messagingTemplate;
@GetMapping("/websocket/print/{msg}")
@ResponseBody
public 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 {
@Autowired
private EchoWebSocketHandler echoWebSocketHandler;
@Override
public 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();
}
@Bean
public EchoWebSocketHandler echoWebSocketHandler() {
return new EchoWebSocketHandler();
}
}
1.3.2 前端配置
前端依赖sockjs及stomp.min.js的库
DOCTYPE html>
<html>
<head>
<title>WebSocket Exampletitle>
<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 Messagebutton>
<hr>
<h2>订阅示例h2>
<input type="text" id="listenDestination" placeholder="Enter listen destination">
<button onclick="subscribeToDestination()">Subscribebutton>
<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
- WebSocket 是一种通信协议： WebSocket 是一种在Web浏览器和服务器之间提供双向通信的协议。它允许在客户端和服务器之间创建持久性的连接，以便在连接建立后实时地发送和接收消息。
- 原始的、低级的协议： WebSocket 是一种相对较低级的协议，它允许在两端之间直接发送原始的消息帧（frames）。这意味着你可以通过WebSocket发送任意的二进制或文本数据。
- 需要自行处理消息格式和路由逻辑： WebSocket 本身并没有规定消息的格式或路由逻辑。在WebSocket上发送的消息可以是任意格式的数据，你需要自行定义消息的结构和处理逻辑。
- STOMP
- STOMP 是一种消息协议： STOMP 是一种基于文本的简单消息协议，它定义了客户端和消息代理（broker）之间如何进行交互的规范。STOMP 通常运行在WebSocket之上，它提供了一种在客户端和服务器之间进行实时消息通信的方式。
- 面向文本的消息格式： STOMP 消息是文本格式的，它使用类似于HTTP报文的格式来定义消息的头部和体。这种面向文本的格式使得它易于阅读和调试。
- 定义了消息的结构和路由逻辑： 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模块, 代码量很少。
