spring websocket入门

一、WebSocket简介

WebSocket协议RFC 6455为Web应用程序定义了一个重要的新功能：客户端和服务器之间的全双工，双向通信。

简单来说，他会使用HTTP用于初始握手，这取决于内置于HTTP中的机制来请求协议升级（或在这种情况下为协议交换机），服务器可以使用HTTP状态101对其进行响应（切换协议）如果它同意。假设握手成功，HTTP升级请求下面的TCP套接字保持打开，客户端和服务器都可以使用它来彼此发送消息。

Spring Framework 4包含一个全面的WebSocket支持模块spring-websocket。它与Java WebSocket API标准（JSR-356）兼容，并且还提供了额外的附加值

二、WebSocket应用场景

WebSocket最适合Web应用程序，客户端和服务器需要以高频率和低延迟交换事件。协同，游戏，聊天，金融股票展示等类型的应用，这样的应用对时间延迟非常敏感，并且还需要以高频率交换各种各样的消息。

三、WebSocket、SockJS、STOMP 的区别

1、WebSocket 可以看成是底层消息架构，但不要求使用任何特定的消息传递协议。将字节流转换为消息流（文本或二进制），由应用来解释消息的含义。在WebSocket协议中，框架或容器的传入消息中没有足够的信息来知道如何路由或处理它。

2、SockJS是一个浏览器JavaScript库，它提供了一个类似于网络的对象。SockJS提供了一个连贯的、跨浏览器的Javascript API，它在浏览器和web服务器之间创建了一个低延迟、全双工、跨域通信通道。

3、STOMP是一种简单的消息协议，简单说就是STOMP适合封装在websocket上面，提供了消息路由的功能，它的使用类似与Java中的消息队列，发布订阅模型，基于地址进行消息的路由。

四、前端三种websocket的调用方式：原生、sockjs、stomp

1、原生

var ws = new WebSocket('ws://localhost:8080/myWebsocket')
ws.onopen = () => {
  console.log('open');
}
ws.onmessage = (e) => {
  console.log('message', e.data);
}
ws.onclose = () => {
  console.log('close');
}
ws.send('test');
ws.close();

2、基于sockjs

var sock = new SockJS('http://localhost:8080/myWebsocket');  
sock.onopen = function() {
    console.log('open');
};
sock.onmessage = function(e) {
    console.log('message', e.data);
};
sock.onclose = function() {
    console.log('close');
};
sock.send('test');
sock.close();

3、基于stomp

var ws = new SockJS('http://localhost:8080/myWebsocket')
var stompClient = Stomp.over(ws)
stompClient.connect({},() => {
      console.log('链接成功');
    },(error) => {
      console.log('链接失败:' + error)
    })
stompClient.subscribe('/topic/send', function(msg) {
    console.log(JSON.parse(msg.body));
});
stompClient.send("/app/send", {}, JSON.stringify({
    'message' : message
}));
stompClient.disconnect();

五、后端spring 提供了基于sockjs和stomp的对websocket的支持

1、WebSocketConfig配置

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

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

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

}

上面代码说明：
config.setApplicationDestinationPrefixes("/app")
以/app 前缀开头的消息请求将被路由到应用程序 Controller 中的处理方法,被消息相关注解声明的方法中，后面会讲到。

config.enableSimpleBroker("/topic");
topic 作为广播前缀，以topic 前缀开始的路径将会被路由到消息代理中去。

2、发送接收订阅路由实现

@MessageMapping("/send")
@SendTo("/topic/send")
public SocketMessage send(SocketMessage message) throws Exception {
    DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    message.date = df.format(new Date());
    return message;
}

上面代码说明：
@MessageMapping : 该注解类似@RequestMapping,提供一个地址，前端只要访问这个地址，就会被映射到该方法中，即前端stompClient.send()中传入的地址。

@SendTo：该注解即前端stompClient.subscribe()中订阅的地址。在该方法中返回消息后前端在subscribe()方法的回调中会收到该消息。