springboot整合websocket

首先导入springboot-websocket依赖

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

配置WebSocketMessageBroker

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 {

    /**
     * 配置 WebSocket 进入点，及开启使用 SockJS，这些配置主要用配置连接端点，用于 WebSocket 连接
     *
     * @param registry STOMP 端点
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ssh").withSockJS();
    }

    /**
     * 配置消息代理选项
     *
     * @param registry 消息代理注册配置
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // 设置一个或者多个代理前缀，在 Controller 类中的方法里面发生的消息，会首先转发到代理从而发送到对应广播或者队列中。
        registry.enableSimpleBroker("/topiclog");
        // 配置客户端发送请求消息的一个或多个前缀，该前缀会筛选消息目标转发到 Controller 类中注解对应的方法里
        registry.setApplicationDestinationPrefixes("/listenlog");
    }
    
    

}

配置消息代理类

import lombok.Data;

@Data
public class MessageBody {
    /** 发送消息的用户 */
    private String from;
    /** 消息内容 */
    private String content;
    /** 目标用户（告知 STOMP 代理转发到哪个用户） */
    private String targetUser;
    /** 广播转发的目标地址（告知 STOMP 代理转发到哪个地方） */
    private String destination;
}

通过实现applicationListener可以监听websocket的连接 断开连接 关注  取消关注事件 比如：断开事件

@Component
@Slf4j
public class SocketDisConnectedEventListener implements ApplicationListener<SessionDisconnectEvent> {

    @Override
    public void onApplicationEvent(SessionDisconnectEvent event) {
        String sessionId = event.getSessionId();
        MessageController.istrue=false;
        //MessageController.SOCKET_MAP.put(sessionId, false);
        log.info("链接断开");
        log.debug(sessionId);
    }

}

推送消息

@Slf4j
@Controller
public class MessageController {
    
   /** 消息发送工具对象 */
    @Autowired
    private SimpMessageSendingOperations simpMessageSendingOperations;

   /** 广播发送消息，将消息发送到指定的目标地址 */
    @MessageMapping("/log/{topicname}")
    public void sendTopicMessage(MessageBody messageBody, @PathVariable String topicname) {

　　　　simpMessageSendingOperations.convertAndSend(messageBody.getDestination(),"test");

 } catch (Exception e) { 
　　e.printStackTrace(); 
} 

前端调用

// 设置 STOMP 客户端
var stompClient = null;
// 设置 WebSocket 进入端点
var SOCKET_ENDPOINT = "/ssh";
// 设置订阅消息的请求前缀
var SUBSCRIBE_PREFIX = "/topiclog"
// 设置订阅消息的请求地址
var SUBSCRIBE = "";
// 设置服务器端点，访问服务器中哪个接口
var TOPIC_NAME=$("#stype").val()=='collect'?$("#topicName").val():$("#topicName").val()+"_ANA";
var SEND_ENDPOINT = "/listenlog/log/"+TOPIC_NAME;
var sessionId="";

/* 进行连接 */
function connect() {
    loading.mask("请稍后", BOMF.CONST.SHOW_LOADING_ANIMATION_AFTER_SAVE);
    $("#logdiv").html("");
    // 设置 SOCKET
    var socket = new SockJS(SOCKET_ENDPOINT);
    // 配置 STOMP 客户端
    stompClient = Stomp.over(socket);
    // STOMP 客户端连接
    stompClient.connect({}, function (frame) {
        console.log("连接成功");
        subscribeSocket();
        setTimeout(() => {
            sendMessageNoParameter();
        }, 1000); 
    });
}

/* 订阅信息 */
function subscribeSocket(){
    var num=1;
    // 设置订阅地址
    SUBSCRIBE = SUBSCRIBE_PREFIX+"/"+TOPIC_NAME ;
    // 输出订阅地址
    console.log("设置订阅地址为：" + SUBSCRIBE);
    // 执行订阅消息
    var logdiv=document.getElementById("logdiv");
    stompClient.subscribe(SUBSCRIBE, function (responseBody) {
        //返回消息在这里处理
        // console.log();
        // if(num==1){
        //     num=2;
        //     sessionId=responseBody.body
        // }
        var body=responseBody.body;
        logdiv.scrollTop=logdiv.scrollHeight;
        loading.unmask();
        if(body.indexOf("over")==-1){
            if($("#logdiv").children().length>40){
                $("#logdiv").children().remove();
            }
            var htmlValue="<p style='white-space:nowrap;'>"+body+"</p>";
            $("#logdiv").append(htmlValue);
        }else{
            var time=body.split("====")[1];
            var htmlValue="<p style='white-space:nowrap;'>日志信息每次默认监听"+time+"秒，如需继续查看，请重新进入</p>";
            $("#logdiv").append(htmlValue);
            disconnect();
        }
        

    });
}

/* 断开连接 */
function disconnect() {
    // if(stompClient!=null){
        stompClient.disconnect(function() {
            console.log("断开连接");
        });
    // }
   
}


/* 发送消息并指定目标地址（这里设置的目标地址为自身订阅消息的地址，当然也可以设置为其它地址） */
function sendMessageNoParameter() {
    // 设置发送的内容
    //var sendContent = "nihao";
    // 设置待发送的消息内容
    var message = '{"destination": "' + SUBSCRIBE + '", "content": "' + TOPIC_NAME + '"}';
    // 发送消息
    stompClient.send(SEND_ENDPOINT, {}, message);
}

 页面调用 

<script src="/busicomps/ggdsj/content/sshmstsc/sshsocket.js"></script>
<div class="container-fluid app-container fullheight">
    <div class="app-content fullheight">
        <div class="panel panel-default  no-footer fullheight">
            <div class="panel-content" id="logdiv" style="height: 800px;" >
                
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        i18n: vue2 == true ? app.$i18n : null,
        created: function () {
            this.$nextTick(function () {
                connect();
            });
        }
    }).$mount(app.i18nDiv);
</script>