整合WebSocket，前后端通信(可用于实现进度条功能)

1、在pom.xml引入WebSocket相关

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

 2、编写配置类

 

 

package com.yxbuild.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{
	
	@Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        stompEndpointRegistry.addEndpoint("/websocket").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
    }
}

 3、在启动类添加@EnableWebSocketMessageBroker注解

package com.yxbuild;


import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;


@SpringBootApplication
@EnableWebSocketMessageBroker
public class WebsocketApplication {
	
	public static void main(String[] args) {
		SpringApplication.run(WebsocketApplication.class, args);
	}
}

 4、编写消息属性类

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;


@Data
@AllArgsConstructor
@NoArgsConstructor
public class MessageResponse {

    private String responseMessage;

    private String status;
}

5、编写消息管理工具类

import java.util.concurrent.BlockingQueue;
import java.util.concurrent.LinkedBlockingQueue;


public class WebSocketUtils {

    // 队列大小
    public static final int QUEUE_MAX_SIZE = 10000;

    private static WebSocketUtils alarmWebSocketUtils = new WebSocketUtils();

    // 阻塞队列
    private BlockingQueue<Object> blockingQueue = new LinkedBlockingQueue<Object>(QUEUE_MAX_SIZE);

    private WebSocketUtils(){

    }

    public static WebSocketUtils getInstance() {
        return alarmWebSocketUtils;
    }

    /**
     * 消息入队 - 队列满了就抛出异常，不阻塞
     *
     * @param message
     * @return
     */
    public boolean push(Object message) {
        return this.blockingQueue.add(message);
    }

    /**
     * 消息出队
     *
     * @return
     */
    public Object poll() {
        Object result = null;
        try {
            result = this.blockingQueue.take();
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        return result;
    }
}

 6、编写Controller并且放置消息

@Controller
@RequestMapping(value = "/webSocket")
public class WebSocketController{
       @Autowired
       private SimpMessagingTemplate messagingTemplate;
      
       /**
        * 放置消息
        *
        */
       @RequestMapping(value = "/pushMessage")
       @ResponseBody
       public void pushMessage(){
           for(int i = 0;i < 10;i++){
                 MessageResponse messageResponse = new MessageResponse();
                 messageResponse.setResponseMessage("消息" + i);
                 messageResponse.setStatus("1");
                 WebSocketUtils.getInstance().push(messageResponse);
           }
       }

       /**
        * 将消息往页面发送
        *
        */
    @PostConstruct
    public void pushMessage(){
        ExecutorService executorService=Executors.newFixedThreadPool(2);
        Runnable runnable = new Runnable() {
            @Override
            public void run() {
                while (true) {
                    try {
                        MessageResponse messageResponse = 
                                  (MessageResponse)WebSocketUtils.getInstance().poll();
                        if(messageResponse != null){
                            if(messagingTemplate != null) {
                                messagingTemplate.convertAndSend("/topic/pullMessage"
                                       ,messageResponse);
                            }
                        }
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            }
        };
        executorService.submit(runnable);
        executorService.submit(runnable);
    }
}

 7、页面获取消息（需引入sockjs.js和stomp.js）

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="utf-8">
	    <title>WebSocket Logger</title>
	    <script th:src="@{/static/js/sockjs.js}"></script>
	    <script th:src="@{/static/js/stomp.js}"></script>
	    <script th:src="@{/static/js/jquery.min.js}"></script>
	</head>
	<body>
	    <button onclick="executeWebSocket()">获取消息</button>
	</body>
	<script>
	    
	    /**
             * 执行
             */
            function executeWebSocket(){
                openSocket();// 开始实时后台检测信息显示
                 $.ajax({
                     url:'pushMessage',

                     type:'post'
                 }); 
            }
	    /**
	     * 开启连接
	     *
	     */
            var stompClient = null;
	    function openSocket() {
	        if(stompClient==null){
	            var socket = new SockJS('/websocket');// 与配置类的一致
	            stompClient = Stomp.over(socket);
	            stompClient.connect({token:"kl"}, function(frame) {
                        // /topic/pullMessage与controller类的放置消息路径一致
	                stompClient.subscribe('/topic/pullMessage', function(event) {
	                    var content = JSON.parse(event.body);
	                    var message = content.responseMessage;
                             alert(message);
	                },{
	                    token : "kltoen"
	                });
	            });
	        }
	    }
	    
	    /**
	     * 断开连接
	     *
	     */
	    function closeSocket() {
	        if (stompClient != null) {
	            stompClient.disconnect();
	            stompClient=null;
	        }
	    }
	</script>
	</body>
</html>