SpringBoot WebSocket 最简单的使用方法（实现网页动态打印后台消息）

最新推荐文章于 2025-10-06 00:15:00 发布

最新推荐文章于 2025-10-06 00:15:00 发布 · 2.5k 阅读

文章标签：

#spring websocket

Spring 专栏收录该内容

7 篇文章

订阅专栏

一、背景介绍

最近研究 Jenkins，发现它的日志能动态输出到网页，十分不错，

本文就基于 SpringBoot 简单实现下如何把后台消息源源不断地打印到网页上

二、实现步骤

2.1 在你的 SpringBoot 项目中引入 websocket 依赖

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

2.2 编写 Configuration，配置 websocket 的 endpoint

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer {

	@Override
	public void registerStompEndpoints(StompEndpointRegistry registry) {
		registry.addEndpoint("/websocket").setAllowedOrigins("*").withSockJS();
	}

}

2.3 编写一个测试 Controller（实际非必需，这里是为了向网页客户端发送数据）

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
public class WebSocketController {

	@Autowired
	SimpMessagingTemplate messagingTemplate;
	

	@GetMapping("/websocket/print/{msg}")
	public String print(@PathVariable  String msg) {
		messagingTemplate.convertAndSend("/topic/print",msg);
		return msg;
	}

}

2.4 编写客户端网页程序

// 这里连接 endpoint 地址，即 /websocket

var socket = new SockJS('http://localhost:9000/websocket');

// 这里要与messagingTemplate.convertAndSend()地址一致，即 /topic/print

stompClient.subscribe('/topic/print', function(event) {...});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebSocket Logger</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
<button onclick="openSocket()">开启日志</button><button onclick="closeSocket()">关闭日志</button>
<div id="log-container" style="height: 450px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
    <div></div>
</div>
</body>
<script>
    var stompClient = null;
    $(document).ready(function() {openSocket();});
    function openSocket() {
        if(stompClient==null){
            var socket = new SockJS('http://localhost:9000/websocket');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                stompClient.subscribe('/topic/print', function(event) {
                    $("#log-container div").append(event.body).append("<br/>");
                    $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
                },{});
            });
        }
    }
    function closeSocket() {
        if (stompClient != null) {
            stompClient.disconnect();
            stompClient=null;
        }
    }
</script>
</body>
</html>

2.5 实验截图