Spring boot 使用 WebSocket 的解决方案 包括sockjs stomp

前言:

近日,项目开发中需要用到客户端扫码登录,第一时间想到了几种方案:

  1. Ajax轮询
  2. 长连接
  3. WebSocket
其中的优缺点想必我不用多说小伙伴们也清楚,既然来到这里,一定是想找到SpringBoot使用WebSocket的解决方案,首先说下我的环境:JDK 1.8,Tomcat 8.5,Spring Boot 2.0.1。好了,话不多说,开始吧!


后端:

第一步:添加依赖

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

第二步:编写WebSocket配置类

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {

        // 注册一个 stomp 终端(这个路径待会js里面会用到)
        // 如果需要跨域,在addEndpoint后面调用 setAllowedOrigins("*")
        registry.addEndpoint("/myEndpoint").withSockJS();

    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {

        // 注册多个(参数是可变参数)服务端接收消息前缀(这个路径待会js里面也会用到)
        registry.setApplicationDestinationPrefixes("/receiver");

        // 注册多个(参数是可变参数)服务端发送消息前缀(这个路径待会js里面会结合实现类路径用到)
        registry.enableSimpleBroker("/queueSender", "/topicSender");

    }

}

第三步:编写消息接收/发送实现类

@Slf4j
@Controller
public class WebSocketTestController {

    /**
     * 收到消息并推送给 发送人
     *
     * @param message 浏览器端发送的参数
     * @return 浏览器端接收的内容
     */
    @MessageMapping("/testQueueSend")
    @SendToUser("/queueSender/queueSend")
    public String testReceiveAndQueueSend(String message) {
        log.debug("{} 收到消息: {}", "testReceiveAndQueueSend", message);
        return "收到了消息" + message + ",并且发送给了发送人";
    }

    /**
     * 收到消息并推送给 所有人
     *
     * @param message 浏览器端发送的参数
     * @return 浏览器端接收的内容
     */
    @MessageMapping("/testTopicSend")
    @SendTo("/topicSender/topicSend")
    public String testReceiveAndTopicSend(String message) {
        log.debug("{} 收到消息: {}", "testReceiveAndTopicSend", message);
        return "收到了消息" + message + ",并且发送给了所有人";
    }

}

前端:

第一步及最后一步:ctrl+c, ctrl+v,请看代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>WebSocket测试</title>
    <script src="http://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script><!-- 请注意IE浏览器兼容性 -->
</head>
<body>

<input id="input_queue_send" type="text" placeholder="输入消息进行发送"/>
<button onclick="queueSend()">发送(将收到一对一消息)</button>
<br/>

<input id="input_topic_send" type="text" placeholder="输入消息进行发送"/>
<button onclick="topicSend()">发送(将收到广播消息)</button>
<br/>

<button onclick="unSubscription()">取消消息订阅</button>
<button onclick="disconnectWebSocket()">关闭连接</button>
<br/>
<hr/>
<div id="message_box">
</div>
<script type="application/javascript">

    // 定义一个sock连接(并没有进行连接),url和服务端定义的stomp终端是一致的
    var _sockJS = new SockJS("/myEndpoint");

    // 创建一个客户端对象
    var _stompClient = Stomp.over(_sockJS);

    // 连接服务端(参数依次为 header,success,error)
    _stompClient.connect({}, function () {
        printLog("WebSocket已连接!");
        // 订阅服务端发送的消息,用于接收消息
        doSubscribeQueue();
    }, function () {
        printLog("WebSocket连接失败!")
    });

    // 订阅消息对象,用于关闭订阅
    var _subscribeQueue, _subscribeTopic;

    // 参数依次为 订阅地址,收到消息做什么,header
    function doSubscribeQueue() {
        // 一对一消息(注意url前面需要加上/user)
        _subscribeQueue = _stompClient.subscribe("/user/queueSender/queueSend", function (data) {
            printLog("收到 一对一消息 " + data.body);
        }, {});
        printLog("已订阅 一对一消息");

        // 广播消息
        _subscribeTopic = _stompClient.subscribe("/topicSender/topicSend", function (data) {
            printLog("收到 广播消息 :" + data.body);
        }, {});
        printLog("已订阅 广播消息");
    }

    // 断开WebSocket连接
    function disconnectWebSocket() {
        if (_stompClient != null) {
            _stompClient.disconnect();
            printLog("WebSocket连接已断开!")
        }
    }

    // 取消订阅消息
    function unSubscription() {
        if (_subscribeQueue) {
            _subscribeQueue.unsubscribe();
        }
        if (_subscribeTopic) {
            _subscribeTopic.unsubscribe();
        }
        printLog("取消订阅消息");
    }

    // 向服务器发送消息(服务器将发送给发送者)
    function queueSend() {
        var message = $("#input_queue_send").val();
        // 参数依次为 发送地址,header,消息
        _stompClient.send("/receiver/testQueueSend", {}, message);
        printLog("发送 一对一消息 " + message);
    }

    // 向服务器发送消息(服务器将广播给所有客户端)
    function topicSend() {
        var message = $("#input_topic_send").val();
        // 参数依次为 发送地址,header,消息
        _stompClient.send("/receiver/testTopicSend", {}, message);
        printLog("发送 广播消息 " + message);
    }

    function printLog(log) {
        console.log(log);
        $("#message_box").append("<div>" + log + "</div>");
    }

</script>
</body>
</html>
好了,文章到此结束,快去试下吧!



阅读更多

没有更多推荐了,返回首页