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

原创 2018年04月16日 16:42:43

前言:

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

  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>
好了,文章到此结束,快去试下吧!



Spring WebSocket+SockJS+Stomp实现一对一、一对多通信

最近项目上要做扫码登录,所以研究了一下Spring WebSocket。网上找了很多资料 springmvc(18)使用WebSocket 和 STOMP 实现消息功能、spring websock...
  • haoyuyang
  • haoyuyang
  • 2016-11-27 14:30:14
  • 21563

spring+stomp+webSocket+SockJS 实现简单的订阅广播消息和订阅个人消息

个人第一篇CSDN的博客,记录自己的IT成长过程。
  • u013627689
  • u013627689
  • 2017-06-22 23:03:35
  • 3089

sockjs文件

  • 2017年11月23日 09:52
  • 362KB
  • 下载

使用maven搭建XML风格的Spring MVC+WebSocket+sockjs+STOMP+ActiveMQ应用

Spring4开始支持WebSocket,也支持通过STOMP协议连接JMS消息服务器如ActiveMQ等。Spring4官方给出了这么一个STOMP例子,不过是使用注解风格的,官方例子没有我们熟悉的...
  • aitangyong
  • aitangyong
  • 2016-01-21 18:46:55
  • 5995

springboot+websocket+sockjs进行消息推送

一,消息推送的服务端 1.创建简单的springboot工程。pom配置如下:
  • PandaWang1989
  • PandaWang1989
  • 2017-02-04 15:39:33
  • 4502

使用spring websocket stomp遇到的3个问题总结:路径匹配/自动注入/activemq连接超时

之前的这篇博客,详细地描述了如何搭建一个spring websocket工程,经过后面的实践发现了3个问题,这里总结下。 1.我们spring mvc的servlet拦截的是/*,这个范围太大,能不能...
  • aitangyong
  • aitangyong
  • 2016-01-25 19:05:23
  • 7102

[ Spring Boot ] 整合 Websocket 实现消息推送框架的设计笔记

前段时间,项目中用Websocket实现了一套后台向前端推送的Service层搭建,感兴趣的童鞋可以了解下^_^Maven pom&amp;lt;dependency&amp;gt; &amp...
  • sinat_28690417
  • sinat_28690417
  • 2017-12-14 09:44:21
  • 308

Spring boot WebSocket stomp简单例子

pom.xml org.springframework.boot spring-boot-starter-websocket StompApplication.java packag...
  • hxg117
  • hxg117
  • 2017-08-17 16:19:10
  • 1117

使用spring websocket 和stomp实现消息功能

实现一个消息驱动pojo public class MarcHandler extends AbstractWebSocketHandler{ private Logger LOGGER = ...
  • taotoxht
  • taotoxht
  • 2016-07-23 18:49:18
  • 7311

Java后台框架篇--spring websocket 和stomp实现消息功能

实现一个消息驱动pojo public class MarcHandler extends AbstractWebSocketHandler{ private Logger LOGGER =...
  • hello_worldee
  • hello_worldee
  • 2017-09-30 13:51:39
  • 724
收藏助手
不良信息举报
您举报文章:Spring boot 使用 WebSocket 的解决方案 包括sockjs stomp
举报原因:
原因补充:

(最多只允许输入30个字)