首页 > 其他分享 >spring boot集成WebSocket

spring boot集成WebSocket

时间：2023-06-25 14:46:56浏览次数：43  
标签：WebSocket spring boot 消息 websocket public 服务端 客户端

原文：https://blog.csdn.net/hry2015/article/details/79829616

1. 概述

本文介绍webSocket相关的内容，主要有如下内容：

  • WebSocket的诞生的背景、运行机制和抓包分析
  • WebSocket 的应用场景、服务端和浏览器的版本要求
  • Spring 内嵌的简单消息代理 和 消息流程图
  • 在Spring boot中集成websocket，并介绍stomp、sockjs的用法
  • 介绍拦截器HandshakeInterceptor和ChannelInterceptor，并演示拦截器的用法
  • @SendTo和@SendToUser用法和区别

2. WebSocket的诞生的背景、运行机制和抓包分析

2.1. Websocket诞生的背景

对于需要实时响应、高并发的应用，传统的请求-响应模式的 Web的效率不是很好。在处理此类业务场景时，通常采用的方案有:

  • 轮询,此方法容易浪费带宽，效率低下
  • 基于 Flash，AdobeFlash 通过自己的 Socket 实现完成数据交换，再利用 Flash 暴露出相应的接口为 JavaScript 调用，从而达到实时传输目的。但是现在flash没落了，此方法不好用
  • MQTT，Comet 开源框架，这些技术在大流量的情况，效果不是很好

在此背景下， HTML5规范中的(有 Web TCP 之称的) WebSocket ，就是一种高效节能的双向通信机制来保证数据的实时传输。

2.2. WebSocket 运行机制

WebSocket 是 HTML5 一种新的协议。它建立在 TCP 之上，实现了客户端和服务端全双工异步通信.

它和 HTTP 最大不同是：
- WebSocket 是一种双向通信协议，WebSocket 服务器和 Browser/Client Agent 都能主动的向对方发送或接收数据；
- WebSocket 需要类似 TCP 的客户端和服务器端通过握手连接，连接成功后才能相互通信。

传统 HTTP 请求响应客户端服务器交互图
这里写图片描述

对比上面两图，相对于传统 HTTP 每次请求-应答都需要客户端与服务端建立连接的模式，WebSocket 一旦 WebSocket 连接建立后，后续数据都以帧序列的形式传输。在客户端断开 WebSocket 连接或 Server 端断掉连接前，不需要客户端和服务端重新发起连接请求，这样保证websocket的性能优势，实时性优势明显

2.3. WebSocket抓包分析

我们再通过客户端和服务端交互的报文看一下 WebSocket 通讯与传统 HTTP 的不同：

WebSocket 客户连接服务端端口，执行双方握手过程，客户端发送数据格式类似：
请求 ：

  • “Upgrade：websocket”参数值表明这是 WebSocket 类型请求
  • “Sec-WebSocket-Key”是 WebSocket 客户端发送的一个 base64
    编码的密文，要求服务端必须返回一个对应加密的“Sec-WebSocket-Accept”应答，否则客户端会抛出“Error during WebSocket handshake”错误，并关闭连接。

这里写图片描述

服务端收到报文后返回的数据格式类似：

  • “Sec-WebSocket-Accept”的值是服务端采用与客户端一致的密钥计算出来后返回客户端的
  • “HTTP/1.1 101” : Switching Protocols”表示服务端接受 WebSocket 协议的客户端连接，经过这样的请求-响应处理后，客户端服务端的 WebSocket 连接握手成功, 后续就可以进行 TCP 通讯了
    这里写图片描述

3. WebSocket 的应用场景、服务端和浏览器的版本要求

3.1. 使用websocket的场景

客户端和服务器需要以高频率和低延迟交换事件。 对时间延迟都非常敏感，并且还需要以高频率交换各种各样的消息

3.2. 服务端和浏览器的版本要求

WebSocket 服务端在各个主流应用服务器厂商中已基本获得符合 JEE JSR356 标准规范 API 的支持。当前支持websocket的版本:Tomcat 7.0.47+, Jetty 9.1+, GlassFish 4.1+, WebLogic 12.1.3+, and Undertow 1.0+ (and WildFly 8.0+).

浏览器的支持版本：
查看所有支持websocket浏览器的连接：

这里写图片描述

4. Spring 内嵌的简单消息代理 和 消息流程图

4.1. Simple Broker

Spring 内置简单消息代理。这个代理处理来自客户端的订阅请求，将它们存储在内存中，并将消息广播到具有匹配目标的连接客户端

4.2. 消息流程图

下图是使用简单消息代理的流程图
这里写图片描述

上图3个消息通道说明如下：

  • “clientInboundChannel” — 用于传输从webSocket客户端接收的消息 
  • “clientOutboundChannel” — 用于传输向webSocket客户端发送的消息
  • “brokerChannel” — 用于传输从服务器端应用程序代码向消息代理发送消息

5. 在Spring boot中集成websocket，并介绍stomp、sockjs的用法

5.1. pom.xml

<!-- 引入 websocket 依赖类-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
  • 1
  • 2
  • 3
  • 4
  • 5

5.2. POJO类

RequestMessage： 浏览器向服务端请求的消息

public class RequestMessage {
    private String name;

// set/get略
}
  • 1
  • 2
  • 3
  • 4
  • 5

ResponseMessage: 服务端返回给浏览器的消息

public class ResponseMessage {
    private String responseMessage;

// set/get略
}
  • 1
  • 2
  • 3
  • 4
  • 5

5.3. BroadcastCtl

此类是@Controller类

  • broadcastIndex()方法：使用 @RequestMapping转到的页面
  • broadcast()方法上的注解说明
    • @MessageMapping：指定要接收消息的地址，类似@RequestMapping
    • @SendTo默认消息将被发送到与传入消息相同的目的地，但是目的地前面附加前缀（默认情况下为“/topic”}
@Controller
public class BroadcastCtl {
    private static final Logger logger = LoggerFactory.getLogger(BroadcastCtl.class);

    // 收到消息记数
    private AtomicInteger count = new AtomicInteger(0);

    /**
     * @MessageMapping 指定要接收消息的地址，类似@RequestMapping。除了注解到方法上，也可以注解到类上
     * @SendTo默认 消息将被发送到与传入消息相同的目的地
     * 消息的返回值是通过{@link org.springframework.messaging.converter.MessageConverter}进行转换
     * @param requestMessage
     * @return
     */
    @MessageMapping("/receive")
    @SendTo("/topic/getResponse")
    public ResponseMessage broadcast(RequestMessage requestMessage){
        logger.info("receive message = {}" , JSONObject.toJSONString(requestMessage));
        ResponseMessage responseMessage = new ResponseMessage();
        responseMessage.setResponseMessage("BroadcastCtl receive [" + count.incrementAndGet() + "] records");
        return responseMessage;
    }

    @RequestMapping(value="/broadcast/index")
    public String broadcastIndex(HttpServletRequest req){
        System.out.println(req.getRemoteHost());
        return "websocket/simple/ws-broadcast";
    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

5.4. WebSocketMessageBrokerConfigurer

配置消息代理，默认情况下使用内置的消息代理。
类上的注解@EnableWebSocketMessageBroker：此注解表示使用STOMP协议来传输基于消息代理的消息，此时可以在@Controller类中使用@MessageMapping

  • 在方法registerStompEndpoints()里addEndpoint方法：添加STOMP协议的端点。这个HTTP URL是供WebSocket或SockJS客户端访问的地址;withSockJS：指定端点使用SockJS协议
  • 在方法configureMessageBroker()里设置简单消息代理，并配置消息的发送的地址符合配置的前缀的消息才发送到这个broker
@Configuration
// 此注解表示使用STOMP协议来传输基于消息代理的消息，此时可以在@Controller类中使用@MessageMapping
@EnableWebSocketMessageBroker
public class WebSocketMessageBrokerConfigurer extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        /**
         * 注册 Stomp的端点
         * addEndpoint：添加STOMP协议的端点。这个HTTP URL是供WebSocket或SockJS客户端访问的地址
         * withSockJS：指定端点使用SockJS协议
          */
        registry.addEndpoint("/websocket-simple")
                .setAllowedOrigins("*") // 添加允许跨域访问
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        /**
         * 配置消息代理
         * 启动简单Broker，消息的发送的地址符合配置的前缀来的消息才发送到这个broker
         */
        registry.enableSimpleBroker("/topic","/queue");
    }

    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        super.configureClientInboundChannel(registration);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

5.5. 前端stomp、sockjs的配置

Stomp
websocket使用socket实现双工异步通信能力。但是如果直接使用websocket协议开发程序比较繁琐，我们可以使用它的子协议Stomp

SockJS
sockjs是websocket协议的实现，增加了对浏览器不支持websocket的时候的兼容支持
SockJS的支持的传输的协议有3类: WebSocket, HTTP Streaming, and HTTP Long Polling。默认使用websocket，如果浏览器不支持websocket，则使用后两种的方式。
SockJS使用”Get /info”从服务端获取基本信息。然后客户端会决定使用哪种传输方式。如果浏览器使用websocket，则使用websocket。如果不能，则使用Http Streaming，如果还不行，则最后使用 HTTP Long Polling

ws-broadcast.jsp
前端页面

引入相关的stomp.js、sockjs.js、jquery.js

<!-- jquery  -->
<script src="/websocket/jquery.js"></script>
<!-- stomp协议的客户端脚本 -->
<script src="/websocket/stomp.js"></script>
<!-- SockJS的客户端脚本 -->
<script src="/websocket/sockjs.js"></script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

前端访问websocket，重要代码说明如下：

  • var socket = new SockJS(‘/websocket-simple’)：websocket的连接地址，此值等于WebSocketMessageBrokerConfigurer中registry.addEndpoint(“/websocket-simple”).withSockJS()配置的地址
  • stompClient.subscribe(‘/topic/getResponse’, function(respnose){ … }): 客户端订阅消息的目的地址：此值和BroadcastCtl中的@SendTo(“/topic/getResponse”)注解的配置的值相同
  • stompClient.send(“/receive”, {}, JSON.stringify({ ‘name’: name })): 客户端消息发送的目的地址：服务端使用BroadcastCtl中@MessageMapping(“/receive”)注解的方法来处理发送过来的消息
<body onl oad="disconnect()">
<div>
    <div>
        <button id="connect" onclick="connect();">连接</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
    </div>
    <div id="conversationDiv">
        <label>输入你的名字</label><input type="text" id="name" />
        <button id="sendName" onclick="sendName();">发送</button>
        <p id="response"></p>
    </div>
</div>

<script type="text/javascript">
    var stompClient = null;

    function setConnected(connected) {
        document.getElementById('connect').disabled = connected;
        document.getElementById('disconnect').disabled = !connected;
        document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
        $('#response').html();
    }

    function connect() {
        // websocket的连接地址，此值等于WebSocketMessageBrokerConfigurer中registry.addEndpoint("/websocket-simple").withSockJS()配置的地址
        var socket = new SockJS('/websocket-simple'); 
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function(frame) {
            setConnected(true);
            console.log('Connected: ' + frame);
            // 客户端订阅消息的目的地址：此值BroadcastCtl中被@SendTo("/topic/getResponse")注解的里配置的值
            stompClient.subscribe('/topic/getResponse', function(respnose){ 
                showResponse(JSON.parse(respnose.body).responseMessage);
            });
        });
    }


    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");
    }

    function sendName() {
        var name = $('#name').val();
        // 客户端消息发送的目的：服务端使用BroadcastCtl中@MessageMapping("/receive")注解的方法来处理发送过来的消息
        stompClient.send("/receive", {}, JSON.stringify({ 'name': name }));
    }

    function showResponse(message) {
        var response = $("#response");
        response.html(message + "\r\n" + response.html());
    }
</script>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59

5.6. 测试

启动服务WebSocketApplication
在打开多个标签，执行请求： http://127.0.0.1:8080//broadcast/index
点击”连接”，然后”发送”多次，结果如下：
可知websocket执行成功，并且将所有的返回值发送给所有的订阅者
这里写图片描述

6. 介绍拦截器HandshakeInterceptor和ChannelInterceptor，并演示拦截器的用法

我们可以为websocket配置拦截器，默认有两种：

  • HandshakeInterceptor：拦截websocket的握手请求。在服务端和客户端在进行握手时会被执行
  • ChannelInterceptor：拦截Message。可以在Message对被在发送到MessageChannel前后查看修改此值，也可以在MessageChannel接收MessageChannel对象前后修改此值

6.1. HandShkeInceptor

拦截websocket的握手请求。实现 接口 HandshakeInterceptor或继承类DefaultHandshakeHandler
这里写图片描述

HttpSessionHandshakeInterceptor：关于httpSession的操作，这个拦截器用来管理握手和握手后的事情，我们可以通过请求信息，比如token、或者session判用户是否可以连接，这样就能够防范非法用户
OriginHandshakeInterceptor：检查Origin头字段的合法性

自定义HandshakeInterceptor ：

@Component
public class MyHandShakeInterceptor implements HandshakeInterceptor {
    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception {
        System.out.println(this.getClass().getCanonicalName() + "http协议转换websoket协议进行前, 握手前"+request.getURI());
        // http协议转换websoket协议进行前，可以在这里通过session信息判断用户登录是否合法
        return true;
    }

    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception ex) {
        //握手成功后,
        System.out.println(this.getClass().getCanonicalName() + "握手成功后...");
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

6.2. ChannelInterceptor

ChannelInterceptor：可以在Message对象在发送到MessageChannel前后查看修改此值，也可以在MessageChannel接收MessageChannel对象前后修改此值

在此拦截器中使用StompHeaderAccessor 或 SimpMessageHeaderAccessor访问消息

自定义ChannelInterceptorAdapter

@Component
public class MyChannelInterceptorAdapter extends ChannelInterceptorAdapter {

    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;

    @Override
    public boolean preReceive(MessageChannel channel) {
        System.out.println(this.getClass().getCanonicalName() + " preReceive");
        return super.preReceive(channel);
    }

    @Override
    public Message<?> preSend(Message<?> message, MessageChannel channel) {
        System.out.println(this.getClass().getCanonicalName() + " preSend");
        StompHeaderAccessor accessor = StompHeaderAccessor.wrap(message);
        StompCommand command = accessor.getCommand();
        //检测用户订阅内容（防止用户订阅不合法频道）
        if (StompCommand.SUBSCRIBE.equals(command)) {
            System.out.println(this.getClass().getCanonicalName() + " 用户订阅目的地=" + accessor.getDestination());
            // 如果该用户订阅的频道不合法直接返回null前端用户就接受不到该频道信息
            return super.preSend(message, channel);
        } else {
            return super.preSend(message, channel);
        }

    }
    @Override
    public void afterSendCompletion(Message<?> message, MessageChannel channel, boolean sent, Exception ex) {
        System.out.println(this.getClass().getCanonicalName() +" afterSendCompletion");
        StompHeaderAccessor accessor = StompHeaderAccessor.wrap(message);
        StompCommand command = accessor.getCommand();
        if (StompCommand.SUBSCRIBE.equals(command)){
            System.out.println(this.getClass().getCanonicalName() + " 订阅消息发送成功");
            this.simpMessagingTemplate.convertAndSend("/topic/getResponse","消息发送成功");
        }
        //如果用户断开连接
        if (StompCommand.DISCONNECT.equals(command)){
            System.out.println(this.getClass().getCanonicalName() + "用户断开连接成功");
                simpMessagingTemplate.convertAndSend("/topic/getResponse","{'msg':'用户断开连接成功'}");
        }

        super.afterSendCompletion(message, channel, sent, ex);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

6.3. 在WebSocketMessageBrokerConfigurer中配置拦截器

  • 在registerStompEndpoints()方法中通过registry.addInterceptors(myHandShakeInterceptor)添加自定义HandShkeInceptor 拦截
  • 在configureClientInboundChannel()方法中registration.setInterceptors(myChannelInterceptorAdapter)添加ChannelInterceptor拦截器
@Configuration
// 此注解表示使用STOMP协议来传输基于消息代理的消息，此时可以在@Controller类中使用@MessageMapping
@EnableWebSocketMessageBroker
public class WebSocketMessageBrokerConfigurer extends AbstractWebSocketMessageBrokerConfigurer {

    @Autowired
    private MyHandShakeInterceptor myHandShakeInterceptor;

    @Autowired
    private MyChannelInterceptorAdapter myChannelInterceptorAdapter;

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        /**
         * 注册 Stomp的端点
         *
         * addEndpoint：添加STOMP协议的端点。这个HTTP URL是供WebSocket或SockJS客户端访问的地址
         * withSockJS：指定端点使用SockJS协议
          */
        registry.addEndpoint("/websocket-simple")
                .setAllowedOrigins("*") // 添加允许跨域访问
          //. setAllowedOrigins("http://mydomain.com");
                .addInterceptors(myHandShakeInterceptor) // 添加自定义拦截
                .withSockJS();
    }

    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        ChannelRegistration channelRegistration = registration.setInterceptors(myChannelInterceptorAdapter);
        super.configureClientInboundChannel(registration);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

6.4. 测试：

和上个例子相同的方式进行测试，这里略

7. @SendTo和@SendToUser用法和区别

上文@SendTo会将消息推送到所有订阅此消息的连接，即订阅/发布模式。@SendToUser只将消息推送到特定的一个订阅者，即点对点模式

@SendTo：会将接收到的消息发送到指定的路由目的地，所有订阅该消息的用户都能收到，属于广播。
@SendToUser：消息目的地有UserDestinationMessageHandler来处理，会将消息路由到发送者对应的目的地, 此外该注解还有个broadcast属性，表明是否广播。就是当有同一个用户登录多个session时，是否都能收到。取值true/false.

7.1. BroadcastSingleCtl

此类上面的BroadcastCtl 大部分相似，下面只列出不同的地方
broadcast()方法：这里使用 @SendToUser注解

@Controller
public class BroadcastSingleCtl {
    private static final Logger logger = LoggerFactory.getLogger(BroadcastSingleCtl.class);

    // 收到消息记数
    private AtomicInteger count = new AtomicInteger(0);

    // @MessageMapping 指定要接收消息的地址，类似@RequestMapping。除了注解到方法上，也可以注解到类上
    @MessageMapping("/receive-single")
    /**
     * 也可以使用SendToUser，可以将将消息定向到特定用户
     * 这里使用 @SendToUser，而不是使用 @SendTo
     */
    @SendToUser("/topic/getResponse")
    public ResponseMessage broadcast(RequestMessage requestMessage){
        ….
    }


    @RequestMapping(value="/broadcast-single/index")
    public String broadcastIndex(){
        return "websocket/simple/ws-broadcast-single";
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

7.2. 在WebSocketMessageBrokerConfigurer中配置

@Configuration
@MessageMapping
@EnableWebSocketMessageBroker
public class WebSocketMessageBrokerConfigurer extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        ….
        registry.addEndpoint("/websocket-simple-single").withSockJS();
    }
    ….
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

7.3. ws-broadcast-single.jsp页面

ws-broadcast-single.jsp页面：和ws-broadcast.jsp相似，这里只列出不同的地方
最大的不同是 stompClient.subscribe的订阅的目的地的前缀是/user，后面再上@SendToUser(“/topic/getResponse”)注解的里配置的值

<script type="text/javascript">
    var stompClient = null;
 …

    function connect() {
        // websocket的连接地址，此值等于WebSocketMessageBrokerConfigurer中registry.addEndpoint("/websocket-simple-single").withSockJS()配置的地址
        var socket = new SockJS('/websocket-simple-single'); //1
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function(frame) {
            setConnected(true);
            console.log('Connected: ' + frame);
            // 客户端订阅消息的目的地址：此值等于BroadcastCtl中@SendToUser("/topic/getResponse")注解的里配置的值。这是请求的地址必须使用/user前缀
            stompClient.subscribe('/user/topic/getResponse', function(respnose){ //2
                showResponse(JSON.parse(respnose.body).responseMessage);
            });
        });
    }


    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");
    }

    function sendName() {
        var name = $('#name').val();
         客户端消息发送的目的：服务端使用BroadcastCtl中@MessageMapping("/receive-single")注解的方法来处理发送过来的消息
        stompClient.send("/receive-single", {}, JSON.stringify({ 'name': name }));
    }
…
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

7.4. 测试

启动服务WebSocketApplication
执行请求： http://127.0.0.1:8080//broadcast-single/index
点击”连接”，在两个页面各发送两次消息，结果如下：
可知websocket执行成功，并且所有的返回值只返回发送者，而不是所有的订阅者
这里写图片描述

8. 代码

所有的详细代码见github代码，请尽量使用tag v0.19，不要使用master，因为master一直在变，不能保证文章中代码和github上的代码一直相同

2023/6/25 14:34 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理_configuremessagebroker_hry2015的博客-CSDN博客https://blog.csdn.net/hry2015/article/details/79829616 1/131. 概述本文介绍webSocket相关的内容，主要有如下内容：WebSocket的诞生的背景、运行机制和抓包分析WebSocket 的应用场景、服务端和浏览器的版本要求Spring 内嵌的简单消息代理 和 消息流程图在Spring boot中集成websocket，并介绍stomp、sockjs的用法介绍拦截器HandshakeInterceptor和ChannelInterceptor，并演示拦截器的用法@SendTo和@SendToUser用法和区别2. WebSocket的诞生的背景、运行机制和抓包分析2.1. Websocket诞生的背景对于需要实时响应、高并发的应用，传统的请求-响应模式的 Web的效率不是很好。在处理此类业务场景时，通常采用的方案有:轮询,此方法容易浪费带宽，效率低下基于 Flash，AdobeFlash 通过自己的 Socket 实现完成数据交换，再利用 Flash 暴露出相应的接口为 JavaScript 调用，从而达到实时传输目的。但是现在flash没落了，此方法不好用MQTT，Comet 开源框架，这些技术在大流量的情况，效果不是很好在此背景下， HTML5规范中的(有 Web TCP 之称的) WebSocket ，就是一种高效节能的双向通信机制来保证数据的实时传输。2.2. WebSocket 运行机制WebSocket 是 HTML5 一种新的协议。它建立在 TCP 之上，实现了客户端和服务端全双工异步通信.它和 HTTP 最大不同是：- WebSocket 是一种双向通信协议，WebSocket 服务器和 Browser/Client Agent 都能主动的向对方发送或接收数据；- WebSocket 需要类似 TCP 的客户端和服务器端通过握手连接，连接成功后才能相互通信。2023/6/25 14:34 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理_configuremessagebroker_hry2015的博客-CSDN博客https://blog.csdn.net/hry2015/article/details/79829616 2/13传统 HTTP 请求响应客户端服务器交互图WebSocket 请求响应客户端服务器交互图对比上面两图，相对于传统 HTTP 每次请求-应答都需要客户端与服务端建立连接的模式，WebSocket 一旦 WebSocket 连接建立后，后续数据都以帧序列的形式传输。在客户端断开WebSocket 连接或 Server 端断掉连接前，不需要客户端和服务端重新发起连接请求，这样保证websocket的性能优势，实时性优势明显2.3. WebSocket抓包分析我们再通过客户端和服务端交互的报文看一下 WebSocket 通讯与传统 HTTP 的不同：WebSocket 客户连接服务端端口，执行双方握手过程，客户端发送数据格式类似：请求 ：“Upgrade：websocket”参数值表明这是 WebSocket 类型请求“Sec-WebSocket-Key”是 WebSocket 客户端发送的一个 base64编码的密文，要求服务端必须返回一个对应加密的“Sec-WebSocket-Accept”应答，否则客户端2023/6/25 14:34 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理_configuremessagebroker_hry2015的博客-CSDN博客https://blog.csdn.net/hry2015/article/details/79829616 3/13会抛出“Error during WebSocket handshake”错误，并关闭连接。服务端收到报文后返回的数据格式类似：“Sec-WebSocket-Accept”的值是服务端采用与客户端一致的密钥计算出来后返回客户端的“HTTP/1.1 101” : Switching Protocols”表示服务端接受 WebSocket 协议的客户端连接，经过这样的请求-响应处理后，客户端服务端的 WebSocket 连接握手成功, 后续就可以进行 TCP 通讯了3. WebSocket 的应用场景、服务端和浏览器的版本要求3.1. 使用websocket的场景客户端和服务器需要以高频率和低延迟交换事件。 对时间延迟都非常敏感，并且还需要以高频率交换各种各样的消息3.2. 服务端和浏览器的版本要求2023/6/25 14:34 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理_configuremessagebroker_hry2015的博客-CSDN博客https://blog.csdn.net/hry2015/article/details/79829616 4/13WebSocket 服务端在各个主流应用服务器厂商中已基本获得符合 JEE JSR356 标准规范 API 的支持。当前支持websocket的版本:Tomcat 7.0.47+, Jetty 9.1+, GlassFish 4.1+, WebLogic 12.1.3+,and Undertow 1.0+ (and WildFly 8.0+).浏览器的支持版本：查看所有支持websocket浏览器的连接：4. Spring 内嵌的简单消息代理 和 消息流程图4.1. Simple BrokerSpring 内置简单消息代理。这个代理处理来自客户端的订阅请求，将它们存储在内存中，并将消息广播到具有匹配目标的连接客户端4.2. 消息流程图下图是使用简单消息代理的流程图上图3个消息通道说明如下：“clientInboundChannel” — 用于传输从webSocket客户端接收的消息“clientOutboundChannel” — 用于传输向webSocket客户端发送的消息“brokerChannel” — 用于传输从服务器端应用程序代码向消息代理发送消息2023/6/25 14:34 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理_configuremessagebroker_hry2015的博客-CSDN博客https://blog.csdn.net/hry2015/article/details/79829616 5/135. 在Spring boot中集成websocket，并介绍stomp 、sockjs的用法5.1. pom.xml5.2. POJO类RequestMessage： 浏览器向服务端请求的消息ResponseMessage: 服务端返回给浏览器的消息5.3. BroadcastCtl此类是@Controller类broadcastIndex()方法：使用 @RequestMapping转到的页面broadcast()方法上的注解说明@MessageMapping：指定要接收消息的地址，类似@RequestMapping@SendTo默认消息将被发送到与传入消息相同的目的地，但是目的地前面附加前缀（默认情况下为“/topic”}<!-- 引入 websocket 依赖类--><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId></dependency>12345public class RequestMessage { private String name;// set/get略}12345public class ResponseMessage { private String responseMessage;// set/get略}12345@Controllerpublic class BroadcastCtl { private static final Logger logger = LoggerFactory.getLogger(BroadcastCtl.cla123452023/6/25 14:34 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理_configuremessagebroker_hry2015的博客-CSDN博客https://blog.csdn.net/hry2015/article/details/79829616 6/135.4. WebSocketMessageBrokerConfigurer配置消息代理，默认情况下使用内置的消息代理。类上的注解@EnableWebSocketMessageBroker：此注解表示使用STOMP协议来传输基于消息代理的消息，此时可以在@Controller类中使用@MessageMapping在方法registerStompEndpoints()里addEndpoint方法：添加STOMP协议的端点。这个HTTPURL是供WebSocket或SockJS客户端访问的地址;withSockJS：指定端点使用SockJS协议在方法configureMessageBroker()里设置简单消息代理，并配置消息的发送的地址符合配置的前缀的消息才发送到这个broker // 收到消息记数 private AtomicInteger count = new AtomicInteger(0); /** * @MessageMapping 指定要接收消息的地址，类似@RequestMapping。除了注解到方法上，也 * @SendTo默认 消息将被发送到与传入消息相同的目的地 * 消息的返回值是通过{@link org.springframework.messaging.converter.MessageConv * @param requestMessage * @return */ @MessageMapping("/receive") @SendTo("/topic/getResponse") public ResponseMessage broadcast(RequestMessage requestMessage){ logger.info("receive message = {}" , JSONObject.toJSONString(requestMessa ResponseMessage responseMessage = new ResponseMessage(); responseMessage.setResponseMessage("BroadcastCtl receive [" + count.incre return responseMessage; } @RequestMapping(value="/broadcast/index") public String broadcastIndex(HttpServletRequest req){ System.out.println(req.getRemoteHost()); return "websocket/simple/ws-broadcast"; }}5678910111213141516171819202122232425262728293031@Configuration// 此注解表示使用STOMP协议来传输基于消息代理的消息，此时可以在@Controller类中使用@Messa@EnableWebSocketMessageBrokerpublic class WebSocketMessageBrokerConfigurer extends AbstractWebSocketMessageBro @Override12345672023/6/25 14:34 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理_configuremessagebroker_hry2015的博客-CSDN博客https://blog.csdn.net/hry2015/article/details/79829616 7/135.5. 前端stomp、sockjs的配置Stompwebsocket使用 socket 实现双工异步通信能力。但是如果直接使用websocket协议开发程序比较繁琐，我们可以使用它的子协议StompSockJSsockjs是websocket协议的实现，增加了对浏览器不支持websocket的时候的兼容支持SockJS的支持的传输的协议有3类: WebSocket, HTTP Streaming, and HTTP Long Polling。默认使用websocket，如果浏览器不支持websocket，则使用后两种的方式。SockJS使用”Get /info”从服务端获取基本信息。然后客户端会决定使用哪种传输方式。如果浏览器使用websocket，则使用websocket。如果不能，则使用Http Streaming，如果还不行，则最后使用HTTP Long Pollingws-broadcast.jsp前端页面引入相关的stomp.js、sockjs.js、jquery.js public void registerStompEndpoints(StompEndpointRegistry registry) { /** * 注册 Stomp的端点 * addEndpoint：添加STOMP协议的端点。这个HTTP URL是供WebSocket或SockJS客户端 * withSockJS：指定端点使用SockJS协议 */ registry.addEndpoint("/websocket-simple") .setAllowedOrigins("*") // 添加允许跨域访问 .withSockJS(); } @Override public void configureMessageBroker(MessageBrokerRegistry registry) { /** * 配置消息代理 * 启动简单Broker，消息的发送的地址符合配置的前缀来的消息才发送到这个broker */ registry.enableSimpleBroker("/topic","/queue"); } @Override public void configureClientInboundChannel(ChannelRegistration registration) { super.configureClientInboundChannel(registration); }}8910111213141516171819202122232425262728293031322023/6/25 14:34 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理_configuremessagebroker_hry2015的博客-CSDN博客https://blog.csdn.net/hry2015/article/details/79829616 8/13前端访问websocket，重要代码说明如下：var socket = new SockJS(‘/websocket-simple’)：websocket的连接地址，此值等于WebSocketMessageBrokerConfigurer中registry.addEndpoint(“/websocketsimple”).withSockJS()配置的地址stompClient.subscribe(‘/topic/getResponse’, function(respnose){ … }): 客户端订阅消息的目的地址：此值和BroadcastCtl中的@SendTo(“/topic/getResponse”)注解的配置的值相同stompClient.send(“/receive”, {}, JSON.stringify({ ‘name’: name })): 客户端消息发送的目的地址：服务端使用BroadcastCtl中@MessageMapping(“/receive”)注解的方法来处理发送过来的消息5.6. 测试启动服务WebSocketApplication在打开多个标签，执行请求： http://127.0.0.1:8080//broadcast/index点击”连接”，然后”发送”多次，结果如下：<!-- jquery --><script src="/websocket/jquery.js"></script><!-- stomp协议的客户端脚本 --><script src="/websocket/stomp.js"></script><!-- SockJS的客户端脚本 --><script src="/websocket/sockjs.js"></script>123456<body onl oad="disconnect()"><div> <div> <button id="connect" onclick="connect();">连接</button> <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连 </div> <div id="conversationDiv"> <label>输入你的名字</label><input type="text" id="name" /> <button id="sendName" onclick="sendName();">发送</button> <p id="response"></p> </div></div><script type="text/javascript">1234567891011121314152023/6/25 14:34 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理_configuremessagebroker_hry2015的博客-CSDN博客https://blog.csdn.net/hry2015/article/details/79829616 9/13可知websocket执行成功，并且将所有的返回值发送给所有的订阅者6. 介绍拦截器 HandshakeInterceptor和ChannelInterceptor，并演示拦截器的用法我们可以为websocket配置拦截器，默认有两种：HandshakeInterceptor：拦截websocket的握手请求。在服务端和客户端在进行握手时会被执行ChannelInterceptor：拦截Message。可以在Message对被在发送到MessageChannel前后查看修改此值，也可以在MessageChannel接收MessageChannel对象前后修改此值6.1. HandShkeInceptor拦截websocket的握手请求。实现 接口 HandshakeInterceptor或继承类DefaultHandshakeHandlerHttpSessionHandshakeInterceptor：关于httpSession的操作，这个拦截器用来管理握手和握手后的事情，我们可以通过请求信息，比如token、或者session判用户是否可以连接，这样就能够防范非法用户OriginHandshakeInterceptor：检查Origin头字段的合法性自定义HandshakeInterceptor ：@Componentpublic class MyHandShakeInterceptor implements HandshakeInterceptor { @Override12342023/6/25 14:34 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理_configuremessagebroker_hry2015的博客-CSDN博客https://blog.csdn.net/hry2015/article/details/79829616 10/136.2. ChannelInterceptorChannelInterceptor：可以在Message对象在发送到MessageChannel前后查看修改此值，也可以在MessageChannel接收MessageChannel对象前后修改此值在此拦截器中使用StompHeaderAccessor 或 SimpMessageHeaderAccessor访问消息自定义ChannelInterceptorAdapter6.3. 在WebSocketMessageBrokerConfigurer中配置拦截器在registerStompEndpoints()方法中通过registry.addInterceptors(myHandShakeInterceptor)添加自定义HandShkeInceptor 拦截在configureClientInboundChannel()方法中registration.setInterceptors(myChannelInterceptorAdapter)添加ChannelInterceptor拦截器 public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse System.out.println(this.getClass().getCanonicalName() + "http协议转换webso // http协议转换websoket协议进行前，可以在这里通过session信息判断用户登录是否合 return true; } @Override public void afterHandshake(ServerHttpRequest request, ServerHttpResponse resp //握手成功后, System.out.println(this.getClass().getCanonicalName() + "握手成功后..."); }}45678910111213141516@Componentpublic class MyChannelInterceptorAdapter extends ChannelInterceptorAdapter { @Autowired private SimpMessagingTemplate simpMessagingTemplate; @Override public boolean preReceive(MessageChannel channel) { System.out.println(this.getClass().getCanonicalName() + " preReceive"); return super.preReceive(channel); } @Override public Message<?> preSend(Message<?> message, MessageChannel channel) {1234567891011121314152023/6/25 14:34 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理_configuremessagebroker_hry2015的博客-CSDN博客https://blog.csdn.net/hry2015/article/details/79829616 11/136.4. 测试：和上个例子相同的方式进行测试，这里略7. @SendTo和@SendToUser用法和区别上文@SendTo会将消息推送到所有订阅此消息的连接，即订阅/发布模式。@SendToUser只将消息推送到特定的一个订阅者，即点对点模式@SendTo：会将接收到的消息发送到指定的路由目的地，所有订阅该消息的用户都能收到，属于广播。@SendToUser：消息目的地有UserDestinationMessageHandler来处理，会将消息路由到发送者对应的目的地, 此外该注解还有个broadcast属性，表明是否广播。就是当有同一个用户登录多个session时，是否都能收到。取值true/false.7.1. BroadcastSingleCtl此类上面的BroadcastCtl 大部分相似，下面只列出不同的地方broadcast()方法：这里使用 @SendToUser注解@Configuration// 此注解表示使用STOMP协议来传输基于消息代理的消息，此时可以在@Controller类中使用@Messa@EnableWebSocketMessageBrokerpublic class WebSocketMessageBrokerConfigurer extends AbstractWebSocketMessageBro @Autowired private MyHandShakeInterceptor myHandShakeInterceptor; @Autowired private MyChannelInterceptorAdapter myChannelInterceptorAdapter; @Override public void registerStompEndpoints(StompEndpointRegistry registry) { /** * 注册 Stomp的端点123456789101112131415@Controllerpublic class BroadcastSingleCtl { private static final Logger logger = LoggerFactory.getLogger(BroadcastSingleC // 收到消息记数 private AtomicInteger count = new AtomicInteger(0); // @MessageMapping 指定要接收消息的地址，类似@RequestMapping。除了注解到方法上，也 @MessageMapping("/receive-single") /**12345678910112023/6/25 14:34 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理_configuremessagebroker_hry2015的博客-CSDN博客https://blog.csdn.net/hry2015/article/details/79829616 12/137.2. 在WebSocketMessageBrokerConfigurer中配置7.3. ws-broadcast-single.jsp页面ws-broadcast-single.jsp页面：和ws-broadcast.jsp相似，这里只列出不同的地方最大的不同是 stompClient.subscribe的订阅的目的地的前缀是/user，后面再上@SendToUser(“/topic/getResponse”)注解的里配置的值7.4. 测试 * 也可以使用SendToUser，可以将将消息定向到特定用户 * 这里使用 @SendToUser，而不是使用 @SendTo */ @SendToUser("/topic/getResponse")public ResponseMessage broadcast(RequestMessage requestMessage){1112131415@Configuration@MessageMapping@EnableWebSocketMessageBrokerpublic class WebSocketMessageBrokerConfigurer extends AbstractWebSocketMessageBro @Override public void registerStompEndpoints(StompEndpointRegistry registry) { …. registry.addEndpoint("/websocket-simple-single").withSockJS(); } ….}123456789101112<script type="text/javascript"> var stompClient = null; … function connect() { // websocket的连接地址，此值等于WebSocketMessageBrokerConfigurer中registry. var socket = new SockJS('/websocket-simple-single'); //1 stompClient = Stomp.over(socket); stompClient.connect({}, function(frame) { setConnected(true); console.log('Connected: ' + frame); // 客户端订阅消息的目的地址：此值等于BroadcastCtl中@SendToUser("/topic/g stompClient.subscribe('/user/topic/getResponse', function(respnose){ showResponse(JSON.parse(respnose.body).responseMessage);1234567891011121314152023/6/25 14:34 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理_configuremessagebroker_hry2015的博客-CSDN博客https://blog.csdn.net/hry2015/article/details/79829616 13/13启动服务WebSocketApplication执行请求： http://127.0.0.1:8080//broadcast-single/index点击”连接”，在两个页面各发送两次消息，结果如下：可知websocket执行成功，并且所有的返回值只返回发送者，而不是所有的订阅者8. 代码所有的详细代码见github代码，请尽量使用tag v0.19，不要使用master，因为master一直在变，不能保证文章中代码和github上的代码一直相同

标签：WebSocket,spring,boot,消息,websocket,public,服务端,客户端
From： https://www.cnblogs.com/BambooLamp/p/17502885.html

相关文章

  • spring的Environment类使用介绍
    org.springframework.core.env.Environment接口是Spring框架的一部分，而不是SpringBoot的特定功能。它提供了一种统一的方式来访问应用程序的配置属性，无论这些属性是通过配置文件、命令行参数、环境变量还是其他来源设置的。通过Environment接口，可以获取应用程序的各种属性值，包括......
  • springboot里的@ConfigurationProperties注解介绍
    在SpringBoot中，@ConfigurationProperties注解用于将外部配置文件中的属性值绑定到Java类的字段或属性上。通过使用该注解，可以方便地将一组配置属性统一绑定到一个POJO类中，然后在应用程序中使用。以下是@ConfigurationProperties注解的主要特点和使用方式：绑......
  • springboot里的@PropertySource注解介绍
    在SpringBoot中，@PropertySource注解用于加载外部的属性源文件，将其作为配置文件来使用。该注解可以用于标记在Java类上，并指定要加载的属性源文件的位置。使用@PropertySource注解可以很方便地将外部的属性文件加载到Spring的环境中，并可以通过@Value注解或Environ......
  • spring profile 原理
    springboot是如何做到根据配置的springprofile值来决定引用不同环境的application.yml配置文件的？ SpringBoot通过使用Spring框架的Profile功能，实现了根据配置的SpringProfile值来决定引用不同环境的application.yml配置文件。在SpringBoot中，可以通过在......
  • 时速云使用 Higress 替换 Ngnix Ingress + Spring Cloud Gateway 的生产实践
    作者：王金山，北京云思畅想科技有限公司技术部微服务架构师，负责公司API网关和服务网格等研发工作时速云介绍时速云成立于2014年10月，致力于通过云原生技术帮助企业实现数字化转型，拥有云原生应用平台TCAP和云原生数据平台KubeData两大核心产品体系，产品包含云原生DevOps、容器......
  • Spring和Spring MVC中的常用注解
    spring中的常用注解@Compontent:表示这是spring管理的一个组件@Controller：控制层的组件@Service：业务层的组件@Repository：持久层组件@Autoeire：自动装配注解@Qualifier：Autowired默认是根据类型进行注入的，Qualifier限定描述符除了能根据名字进行注入，更能进行更细粒度的控制如......
  • 【转】SpringBoot 线上服务假死，CPU 内存正常
    文章来源：blog.csdn.net/zhangcongyi420/article/details/1311395991、背景开发小伙伴都知道线上服务挂掉，基本都是因为cpu或者内存不足，出现GC频繁OOM之类的情况。本篇文章区别以上的情况给小伙伴们带来不一样的服务挂掉。 2、问题排查老规矩在集群环境中同一个服务......
  • spring源码笔记
    Bean创建流程获取对象的BeanDefinition通过反射创建空对象填充属性调用init方法  Bean创建关键方法（按顺序）getBeandoGetBeancreateBeandoCreateBeancreateBeanInstancepopulateBean  解决循环依赖：三级缓存循环依赖原因单例，每个类只有一个对象。A引用B，B又......
  • spring-boot-maven-plugin插件详解
    一、为什么SpringBoot项目自带这个插件当我们在SpringBoot官方下载一个脚手架时,会发现pom.xml会自带spring-boot-maven-plugin插件<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2......
  • 11.springboot 原理 ( 起步依赖-自动配置)
    springboot原理springframeworkspringboot(配置起步依赖-自动配置)spring-boot-starter-web起步依赖（其他依赖自动传递）自动配置原理：自动将内置类存入IOC容器中，不用收到配置，只能扫描包内即子包的类，可以指定扫描的包内容：@ComponentScan("com.alex","com.ite");@Import导......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99