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功能
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 {

    @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 += "<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 {

    @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 += "<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
	@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 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 规定了消息的格式和消息目的地的语义。它定义了消息头部的各种属性（例如，目的地、消息类型等），并提供了一种简单的消息路由机制，使得消息能够被发送到特定的目的地。