springboog+websocket

最新推荐文章于 2024-03-29 22:40:58 发布

赶路人儿

最新推荐文章于 2024-03-29 22:40:58 发布

阅读量262

点赞数

分类专栏： java web前端文章标签： websocket

本文链接：https://blog.csdn.net/liuxiao723846/article/details/103888438

版权

java 同时被 2 个专栏收录

825 篇文章 73 订阅

订阅专栏

web前端

294 篇文章 13 订阅

订阅专栏

JavaEE 7中出了JSR-356:Java API for WebSocket规范；不少Web容器，如Tomcat,Nginx,Jetty等都支持WebSocket；同时绝大多数浏览器也支持webSocket。

接下来我们使用springboot来搭建一个websocket服务器部署到tomcat中，前端使用websocket的js库实现二者通讯。

需求：实时将系统日志输出的前端web页面，因为是实时输出，所有第一时间就想到了使用webSocket。而且在spring boot中，使用websocket超级方便。本文使用到的技术包括：spring boot自带的webSocket模块提供stomp的服务端，前端使用stomp.min.js做stomp的客户端，使用sockjs来链接。前端订阅后端日志端点的消息，后端实时推送，达到日志实时输出到web页面的目的，效果如下图

关键词相关技术，WebSocket（stopmp服务端），stomp协议，sockjs.min.js，stomp.min.js（stomp客户端），

首先了解下stomp：

STOMP即Simple (or Streaming) Text Orientated Messaging Protocol，简单(流)文本定向消息协议，它提供了一个可互操作的连接格式，允许STOMP客户端与任意STOMP消息代理（Broker）进行交互。STOMP协议由于设计简单，易于开发客户端，因此在多种语言和多种平台上得到广泛地应用。 STOMP协议的前身是TTMP协议（一个简单的基于文本的协议），专为消息中间件设计。 STOMP是一个非常简单和容易实现的协议，其设计灵感源自于HTTP的简单性。尽管STOMP协议在服务器端的实现可能有一定的难度，但客户端的实现却很容易。例如，可以使用Telnet登录到任何的STOMP代理，并与STOMP代理进行交互。

代码：

1）pom.xml：springboot websocket依赖

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

2）配置WebSocket消息代理端点，即stomp服务端：

@Configuration
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer{
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket")
                //.setAllowedOrigins("http://localhost:8976")
                .withSockJS();
    }
}

3）启动类，开启webSocket消息代理功能，并推送日志信息：

@SpringBootApplication
@EnableWebSocketMessageBroker
public class Application {
	public static void main(String[] args) throws Exception {
		 SpringApplication.run(Application.class, args);
	}
	
	@Autowired
	private SimpMessagingTemplate messagingTemplate;
	
	@PostConstruct
	public void pushLogger(){
		ExecutorService executorService=Executors.newFixedThreadPool(2);
		Runnable runnable=new Runnable() {
			@Override
			public void run() {
				while (true) {
					try {
						JSONObject log = new JSONObject();
						log.put("time", new Date().getTime());
						log.put("name", Thread.currentThread().getName());
						if(log!=null){
							if(messagingTemplate!=null)
							messagingTemplate.convertAndSend("/topic/pullLogger",log);
						}
					} catch (Exception e) {
						e.printStackTrace();
					}
				}
			}
		};
		executorService.submit(runnable);
		executorService.submit(runnable);
	}
}

通过SimpMessagingTemplate类推送数据。

4）前端页面：

<!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:8080/websocket?token=kl');
            stompClient = Stomp.over(socket);
            stompClient.connect({token:"kl"}, function(frame) {
                stompClient.subscribe('/topic/pullLogger', function(event) {
                    var content=JSON.parse(event.body);
                    $("#log-container div").append(content.timestamp +" "+ content.level+" --- ["+ content.threadName+"] "+ content.className+"   :"+content.body).append("<br/>");
                    $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
                },{
                    token:"kltoen"
                });
            });
        }
    }
    function closeSocket() {
        if (stompClient != null) {
            stompClient.disconnect();
            stompClient=null;
        }
    }
</script>
</body>
</html>

前端通过http方式访问tomcat的8080端口，并且指定springboot配置的代理节点/websocket，即可访问到websocket。（var socket = new SockJS('http://localhost:8080/websocket?token=kl');）

参考地址：

stomp.js客户端：http://jmesnil.net/stomp-websocket/doc/

scok.js客户端：https://github.com/sockjs/sockjs-client

spring webSocket：https://docs.spring.io/spring/docs/

https://cloud.tencent.com/developer/article/1096792

赶路人儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
springboog+websocket

JavaEE 7中出了JSR-356:Java API for WebSocket规范；不少Web容器，如Tomcat,Nginx,Jetty等都支持WebSocket；同时绝大多数浏览器也支持webSocket。接下来我们使用springboot来搭建一个websocket服务器部署到tomcat中，前端使用websocket的js库实现二者通讯。需求：实时将系统日志输出的前端web页面...
复制链接

扫一扫