springboog+websocket-CFANZ编程社区

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页面的目的，效果如下图

springboog+websocket_spring

关键词相关技术，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>