spring springboot2 结合 websocket+sockJs+stomp 实现个人订阅和广播模式

一  名词解释

　　1.WebSocket

WebSocket 是发送和接收消息的底层API，WebSocket 协议提供了通过一个套接字实现全双工通信的功能。也能够实现 web 浏览器和 server 间的异步通信，全双工意味着 server 与浏览器间可以发送和接收消息。需要注意的是必须考虑浏览器是否支持

　　2.SockJs

为了应对许多浏览器不支持WebSocket协议的问题，设计了备选SockJs。

SockJS 是 WebSocket 技术的一种模拟。SockJS 会 尽可能对应 WebSocket API，但如果 WebSocket 技术不可用的话，就会选择另外的通信方式协议。

　　3.STOMP

SockJS 为 WebSocket 提供了 备选方案。但无论哪种场景，对于实际应用来说，这种通信形式层级过低。下面看一下如何 在 WebSocket 之上使用 STOMP协议，来为浏览器 和 server 间的 通信增加适当的消息语义。（STOMP—— Simple Text Oriented Message Protocol——面向消息的简单文本协议）

　　4.三者之间的关系

WebSocket 是底层协议，SockJS 是WebSocket 的备选方案，也是 底层协议，而 STOMP 是基于 WebSocket（SockJS） 的上层协议

二 springboot的config

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

　　1.基础配置

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic", "/queue", "/user"); //表示在topic和queue这两个域上服务端可以向客户端发消息
        registry.setApplicationDestinationPrefixes("/app");//客户端向服务器端发送时的主题上面需要加"/app"作为前缀
        registry.setUserDestinationPrefix("/user");//指定用户发送一对一的主题,前缀是"/user"
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/stomp/endpoint").withSockJS();
    }
}

第一步就是添加注解 此注解 这个配置类不仅配置了 WebSocket，还配置了基于代理的 STOMP 消息

第二步 配置一个消息代理..一个是允许服务器向客户端发送的域 一个是客户端想服务器发送的前缀,最后一个是指定一对第一发送的前缀

第三步 就是配置了节点,并且使用sockjs的方式

　　2.监听连接与断开

　　用到了redis管理session

    @Access(name = "监听websocket连接成功")
    @EventListener
    public void onConnectEvent(SessionConnectEvent event) {
        //获取Session连接信息
        StompHeaderAccessor sha = StompHeaderAccessor.wrap(event.getMessage());
        //获取SessionId
        String sessionId = sha.getSessionId();
        //存储redis
        Map<String, String> map = new HashMap<String, String>();
        map.put(sessionId, agentNo);
        redisTemplate.opsForHash().putAll("webSocket", map);
    }

    @Access(name = "监听websocket断开连接")
    @EventListener
    public void onDisconnectEvent(SessionDisconnectEvent event) {
        //获取Session连接信息
        StompHeaderAccessor sha = StompHeaderAccessor.wrap(event.getMessage());
        //获取SessionId
        String sessionId = sha.getSessionId();
        //redis删除此sessionId
        redisTemplate.opsForHash().delete("webSocket", sessionId);
    }
}

　　三.实现前端代码

　　　1.引入js　

<!-- websocket   ****代表自己的项目路径  这个写自己的  -->
<script src="/***/sockjs-client/sockjs.min.js"></script>
<script src="/***/stomp-websocket/stomp.min.js"></script>
<!-- 参考 -->
<!-- 
https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.4.0/sockjs.min.js
https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js
-->

　　2.连接和订阅消息

　　使用了agentNo 区分订阅广播消息与个人消息

var stompClient = null;
var socket = null;
function connect() {
    //从sesionStorage获取坐席工号  下面连接头需要  这个按照自己需求修改
    agentNo = sessionStorage.getItem("agentNo");
    //建立连接对象（还未发起连接）  地址更换成自己的  连接服务器注册端点endPoint时，写访问服务器的全路径URL：
    socket = new SockJS('地址');
    //获取 STOMP 子协议的客户端对象
    stompClient = Stomp.over(socket);
    //建立连接,并且连接头上定义了坐席工号
    stompClient.connect({
        userName: agentNo    // <---这是头 在后面的监听  连接成功的类可以获取到  业务代码需要 按需删除
    }, function (frame) {
        console.log('Connected: ' + frame);
        //订阅广播消息
        stompClient.subscribe('/topic/greetings', function (greeting) {
            var data = JSON.parse(greeting.body).data;
            //实现自己的需求
        });
        //订阅个人消息   
        stompClient.subscribe('/user/' + agentNo + '/message', function (greeting) {
            var data = JSON.parse(greeting.body);
            //实现自己的需求
        });
    });
}

　　2.发送消息

function send(data) {
    var param = {
        id: data,
        release: true
    }
    stompClient.send("/app/release", {}, JSON.stringify(param));  
 // <----- app 就是在config中定义的客户端往服务器发送的前缀,param是信息.必须用实体发送后台必须用实体接收
//release是后面controller中定义的 相当于RequestMapping中写的地址一样
}

　　四.实现后端代码

 　　　1.发送广播

    @Access(name = "发布公告")
    @MessageMapping("/release")
    @SendTo("/topic/greetings")
    public WebResult release(@RequestBody Announcement announcement) {
       //执行业务代码逻辑
    }

　　2.发送个人消息

    @Autowired
    private SimpMessagingTemplate messagingTemplate;

     public void demo() {
     // messagingTemplate.convertAndSend(url,"");  //方法1
    //方法2  相当于/user/' + agentNo + '/message'    对应前端订阅的地址
    messagingTemplate.convertAndSendToUser(ledgerQuery.getAgentNo(), "/message", "");
｝