Springboot 结合SockJS和Stomp协议的实现

最新推荐文章于 2024-04-12 03:28:09 发布

小小运维石

最新推荐文章于 2024-04-12 03:28:09 发布

阅读量124

点赞数

文章标签： spring boot 后端 java websocket

本文链接：https://blog.csdn.net/m0_46491511/article/details/135010565

版权

服务端

需要写一个配置类

package com.example.websockjs;

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 configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/hh","/user");
        registry.setUserDestinationPrefix("/user");
    }

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

controller类

接口，客户端请求的接口。

package com.example.websockjs.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;

@Controller
public class ControllerSockJS {
    @Autowired
    private SimpMessagingTemplate template;

    /**
     * 群聊
     * @param message
     * @return message
     */
    @MessageMapping("/greetings")
    @SendTo("/huiyi/greetings")
    public String message(String message) {
        System.out.printf(message+"群发");
        return message;
    }
    @MessageMapping("/test")
    public void message1(String message) {
        System.out.println(message+"单发");
    }
    @MessageMapping("/testTo1")
    public void message2() {
        this.template.convertAndSend("/testTo","aaaaaa");
    }
}

客户端

客户端需引入SockJS，Stomp，jQuery文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <!--<script src="wsJS.js"></script>--> 
    <script src="js/jquery-3.5.0.min.js"></script>
    <script src="js/sockjs-1.1.2.min.js"></script>
    <script src="js/stomp.min.js"></script>
</head>
<body>
    <input id="test"></br>
    <button id="conn">连接</button></br>
    <button id="send">发送</button>
    <script>
        /*
          var send = document.getElementById("send")
        var a =  document.getElementById("test")
        send.onclick=function(){
            sendMessage(a.value)
        }
        console.log()
        
        */
       var mess = document.getElementById("test")
       var send = document.getElementById("send")
       var conn = document.getElementById("conn")
       var stompClient = null;

     //连接
    function onconnect() {
        var ws = new SockJS("http://localhost:8080/websocket/")
        stompClient= Stomp.over(ws);
        stompClient.connect({name:test},function (frame) {
            console.log('Connected',frame);
            stompClient.subscribe('/huiyi/greetings',function(message){
               console.log("订阅")
               console.log(message)
               console.log(message.body)
           });
           stompClient.subscribe("/testTo1",function(message){
               console.log(message)
           })
           console.log("开始连接")

})
    }
    conn.onclick = function () {
           onconnect();
        }
       send.onclick = function () {
        console.log(typeof(mess.value))
           //单发
        stompClient.send("/test",{},mess.value);
        stompClient.send("/greetings",{},mess.value);
       }

      
    </script>
</body>
</html>