使用WebSocket、SockJS、STOMP实现消息功能

2024-02-22 11:41:28

一、WebSocket

1、http：http超文本传输协议，http有1.0、1.1、 2.0几个版本，从http1.1起，默认都开启了Keep-Alive，保持连接持续性，简单地说，当一个网页打开完成后，客户端和服务器之间用于传输http数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接，这样就降低了资源的消耗优化性能，但是Keep-Alive也是有时间限制的，还有一个客户端只能主动发起请求才能获取返回数据，并不能主动接收后台推送的数据，websocket便应运而生。

2、websocket：是 html5 新增加特性之一，目的是浏览器与服务端建立全双工的通信方式，解决 http 请求-响应带来过多的资源消耗，同时对特殊场景应用提供了全新的实现方式，比如聊天、股票交易、游戏等对对实时性要求较高的行业领域。

　　http与websocket都是基于TCP(传输控制协议)的，websocket可以看做是对http协议的一个补充。

　　WebSocket协议提供了通过一个套接字实现全双工通信的功能。除了其他的功能之外，它能够实现Web浏览器和服务器之间的异步通信。全双工意味着服务器可以发送消息给浏览器，浏览器也可以发送消息给服务器。

3、SockJs：SockJS是一个JavaScript库，为了应对许多浏览器不支持WebSocket协议的问题，设计了备选SockJs。SockJS 是 WebSocket 技术的一种模拟。SockJS会尽可能对应 WebSocket API，但如果WebSocket 技术不可用的话，会自动降为轮询的方式。

　　SockJS会优先选择WebSocket进行连接，但是当服务器或客户端不支持WebSocket时，会自动在 XHR流、XDR流、iFrame事件源、iFrame HTML文件、XHR轮询、XDR轮询、iFrame XHR轮询、JSONP轮询这几个方案中择优进行连接。

4、Stompjs：STOMP—— Simple Text Oriented Message Protocol——面向消息的简单文本协议。SockJS 为 WebSocket 提供了备选方案。但无论哪种场景，对于实际应用来说，这种通信形式层级过低。

　　STOMP协议，来为浏览器和 server 间的通信增加适当的消息语义。

5、WebSocket、SockJs、STOMP三者关系

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

（1）HTTP协议解决了 web 浏览器发起请求以及 web 服务器响应请求的细节，假设 HTTP 协议并不存在，只能使用 TCP 套接字来编写 web 应用。

（2）直接使用 WebSocket（SockJS）就很类似于使用 TCP 套接字来编写 web 应用，因为没有高层协议，就需要我们定义应用间所发送消息的语义，还需要确保连接的两端都能遵循这些语义；

（3）同HTTP在TCP 套接字上添加请求-响应模型层一样，STOMP在WebSocket 之上提供了一个基于帧的线路格式层，用来定义消息语义；

二、SockJS

1、概述

　　WebSocket是一个相对比较新的规范，在Web浏览器和应用服务器上没有得到一致的支持。所以我们需要一种WebSocket的备选方案，而这恰恰是SockJS所擅长的。

　　SockJS是WebSocket技术的一种模拟，在表面上，它尽可能对应WebSocket API，但是在底层非常智能。如果WebSocket技术不可用的话，就会选择另外的通信方式。

2、使用SockJS

　　WebSocketConfig.java

@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(marcoHandler(), "/marco").withSockJS();
}

　　只需加上withSockJS()方法就能声明我们想要使用SockJS功能，如果WebSocket不可用的话，SockJS的备用方案就会发挥作用。

　　JavaScript客户端代码

　　要在客户端使用SockJS，需要确保加载了SockJS客户端库。

<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>

　　除了加载SockJS客户端库外，要使用SockJS只需要修改两行代码即可：

var url = 'marco';
var sock = new SockJS(url);
//SockJS所处理的URL是http://或https://,不再是ws://和wss://

　　运行效果一样，但是客户端–服务器之间通信的方式却有了很大的变化。

三、使用STOMP消息

1、概述

　　STOMP在WebSocket之上提供了一个基于帧的线路格式层，用来定义消息的语义。

　　STOMP帧由命令、一个或多个头信息以及负载所组成。例如如下就是发送数据的一个STOMP帧：

>>> SEND
destination:/app/marco
content-length:20

{"message":"Maeco!"}

　　在这个简单的样例中，STOMP命令是SEND，表明会发送一些内容。紧接着是两个头信息：一个用来表示消息要发送到哪里的目的地，另外一个则包含了负载的大小。然后，紧接着是一个空行，STOMP帧的最后是负载内容。

　　STOMP帧中最有意思的是destination头信息了。它表明STOMP是一个消息协议。消息会发布到某个目的地，这个目的地实际上可能真的有消息代理作为支撑。另一方面，消息处理器也可以监听这些目的地，接收所发送过来的消息。

四、启用STOMP消息功能

　　WebSocketStompConfig.java

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketStompConfig extends AbstractWebSocketMessageBrokerConfigurer{

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        
        registry.addEndpoint("/marcopolo").withSockJS();//为/marcopolo路径启用SockJS功能
    }
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry)
    {
        
        //表明在topic、queue、users这三个域上可以向客户端发消息。
        registry.enableSimpleBroker("/topic","/queue","/users");
        //客户端向服务端发起请求时，需要以/app为前缀。
        registry.setApplicationDestinationPrefixes("/app");
        //给指定用户发送一对一的消息前缀是/users/。
        registry.setUserDestinationPrefix("/users/");
    }
    
}

@Override
protected Class<?>[] getServletConfigClasses() {
　　return new Class<?>[] {WebSocketStompConfig.class,WebConfig.class};
}

　　WebSocketStompConfig 重载了registerStompEndpoints() 方法，将/marcopolo注册为STOMP端点。

　　这个路径与之前接收和发送消息的目的地路径有所不同。这是一个端点，客户端在订阅或发布消息到目的地前，要连接该端点。

　　WebSocketStompConfig还通过重载configureMessageBroker() 方法配置了一个简单的消息代理。这个方法是可选的，如果不重载它的话，将会自动配置一个简单的内存消息代理，用它来处理以“/topic”为前缀的消息。

五、处理来自客户端的STOMP消息

　　testConroller.java

@Controller
public class testConroller {
    @MessageMapping("/marco")
    public void handleShout(Shout incoming) 
    {
    System.out.println("Received message:"+incoming.getMessage());
    }
    
    @SubscribeMapping("/subscribe")
    public Shout handleSubscribe() 
    {
    Shout  outing = new Shout();
    outing.setMessage("subscribes");
    return outing;
    }
}

　　@MessageMapping注解，表明handleShout（）方法能够处理指定目的地上到达的消息。本例中目的地也就是“/app/marco”。（“/app”前缀是隐含的，因为我们将其配置为应用的目的地前缀）

　　@SubscribeMapping注解，与@MessageMapping注解相似，当收到了STOMP订阅消息的时候，带有@SubscribeMapping注解的方法将会被触发。

　　客户端JavaScript代码

<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
<script>
var url = 'http://'+window.location.host+'/yds/marcopolo';
var sock = new SockJS(url);  //创建SockJS连接。
var stomp = Stomp.over(sock);//创建STOMP客户端实例。实际上封装了SockJS,这样就能在WebSocket连接上发送STOMP消息。
var payload = JSON.stringify({'message':'Marco!'});
stomp.connect('guest','guest',function(frame){
　　stomp.send("/app/marco",{},payload);
　　stomp.subscribe('/app/subscribe', function(message){

　　});
});
</script>

六、发送消息到客户端

　　如果你想要在接收消息的时候，同时在响应中发送一条消息，那么需要做的仅仅是将内容返回就可以了。

@MessageMapping("/marco")    
public Shout handleShout(Shout incoming) {
    System.out.println("Received message:"+incoming.getMessage());
    Shout  outing = new Shout();
    outing.setMessage("Polo");
    return outing;
}

　　当@MessageMapping注解标示的方法有返回值的时候，返回的对象将会进行转换（通过消息转换器）并放到STOMP帧的负载中，然后发给消息代理。

　　默认情况下，帧所发往的目的地会与触发处理器方法的目的地相同，只不过会加上“/topic”前缀。

stomp.subscribe('/topic/marco', function(message){    // 订阅后将会接收到消息。
});

　　不过我们可以通过为方法添加@SendTo注解，重载目的地：

@MessageMapping("/marco")
@SendTo("/queue/marco")
public Shout handleShout(Shout incoming) {
    System.out.println("Received message:"+incoming.getMessage());
    Shout  outing = new Shout();
    outing.setMessage("Polo");
    return outing;
}

stomp.subscribe('/queue/marco', function(message){ 
});

七、在应用的任意地方发送消息

　　Spring的SimpMessagingTemplate能够在应用的任何地方发送消息，甚至不必以首先接收一条消息作为前提。使用SimpMessagingTemplate的最简单方式是将它（或者其接口SimpMessageSendingOperations）自动装配到所需的对象中。

@Autowired
 private SimpMessageSendingOperations simpMessageSendingOperations;


@RequestMapping("/test")
public void sendMessage()
{
    simpMessageSendingOperations.convertAndSend("/topic/test", "测试SimpMessageSendingOperations ");
}

八、为目标用户发送消息

　　使用@SendToUser注解，表明它的返回值要以消息的形式发送给某个认证用户的客户端。

    @MessageMapping("/message")
    @SendToUser("/topic/sendtouser")
    public Shout message()
    {
        Shout  outing = new Shout();
        outing.setMessage("SendToUser");
        return outing;
    }

stomp.subscribe('/users/topic/sendtouser', function(message){//给指定用户发送一对一的消息前缀是/users/。
});

　　这个目的地使用了/users作为前缀，以/users作为前缀的目的地将会以特殊的方式进行处理。以/users为前缀的消息将会通过UserDestinationMessageHandler进行处理。

　　UserDestinationMessageHandler的主要任务是将用户消息重新路由到某个用户独有的目的地上。在处理订阅的时候，它会将目标地址中的/users前缀去掉，并基于用户的会话添加一个后缀。

九、为指定用户发送消息

　　SimpMessagingTemplate还提供了convertAndSendToUser()方法。convertAndSendToUser()方法能够让我们给特定用户发送消息。

simpMessageSendingOperations.convertAndSendToUser("1", "/message", "测试convertAndSendToUser");

stomp.subscribe('/users/1/message', function(message){ 

});

　　客户端接收一对一消息的主题是"/users/"+usersId+"/message",这里的用户Id可以是一个普通字符串，只要每个客户端都使用自己的Id并且服务器端知道每个用户的Id就行了。

　　具体代码实现可以看这篇博客，还比较清晰：springboot+websocket+sockjs进行消息推送【基于STOMP协议】

码农公寓