一个websocket消息通知案例

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012796085/article/details/86287274

1,pom

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

2,WebSocketConfig.class

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        //注册一个名字为"exportNotify" 的endpoint,并指定 SockJS协议。   点对点-用
        registry.addEndpoint("/exportNotify").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //点对点式增加一个/queue 消息代理
        registry.enableSimpleBroker("/queue");
    }

}

3,消息查询的Controller

    @ResponseBody
	@GetMapping("/message")
	public PageUtils list() {
		List<NotifyDO> list = notifyService.get(getUserId());
		PageUtils res = new PageUtils(list);
		return res;
	}

4,前端js

<script th:src="@{/js/plugins/chartJs/sockjs.min.js}"></script>
<script th:src="@{/js/plugins/chartJs/stomp.min.js}"></script>
<script th:src="@{/js/plugins/toastr/toastr.min.js}"></script>
    //exportNotify前必须要加项目根节点
    var sock = new SockJS("/witdbct/exportNotify");
    var stomp = Stomp.over(sock);
    //定义消息的显示样式
    toastr.options = {
        "positionClass": "toast-bottom-center",
        "timeOut": "2000", //展现时间
        "hideDuration": "1000"//消失的动画时间
    };
    ///queue前加user是为了向指定用户发送消息
    stomp.connect('guest', 'guest', function(frame) {
        stomp.subscribe("/user/queue/notifications",
            function handleNotification(message) {
                wrapper.notify();
                toastr.info(message.body);
        });
    });

用来接收消息的vue对象

var wrapper = new Vue({
    el: '#wrapper',
    data: {
        total: '',
        rows: '',
    },
    methods: {
        notify: function () {
            $.getJSON('/witdbct/notify/message', function (r) {
                wrapper.total = r.total;
                wrapper.rows = r.rows;
            });
        }
    },
    created: function () {
        this.notify()
    }
});

html

<div id="wrapper">
 <!--消息通知开始-->
    <div class="small-chat-box fadeInRight animated">
        <div class="heading" draggable="true">
                 系统消息
        </div>
        <div  id="version">
            <ul class="dropdown-messages" style="list-style: none;">
                <li v-for="row in rows" class="m-t-xs">
                    <div class="dropdown-messages-box">
                        <a class="pull-left" style="padding-right: 7px;">
                            <i class="fa fa-cloud-download fa-2x"></i>
                        </a>
                        <div class="media-body">
                            <small class="pull-right">{{row.before}}</small>
                            <strong>{{row.oper_table}}</strong><br/>
                            <small class="text-muted">{{row.crt_tm}}</small>
                        </div>
                    </div>
                    <div class="divider"></div>
                </li>
                <li>
                    <div class="text-center link-block" style="border-top: 1px solid #000;">
                        <a class="J_menuItem" href="#"> <i class="fa fa-envelope"></i> <strong> 查看所有消息</strong></a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="small-chat" draggable="true">
        <span class="badge badge-warning pull-right">{{total}}</span>
        <a class="open-small-chat">
            <i class="fa fa-envelope"></i>
        </a>
    </div>
    <!--消息通知结束-->
</div>

5,测试

消息通知是服务器主动向客户发送消息，可以使用另一个用户模拟后台下载任务完成给888888用户发送消息，不嫌麻烦可以写定时任务测试

    <button onclick="refMessage()">测试</button>
    function refMessage(){
        $.ajax({
            type: "GET",dataType: "STRING",
            url:"/witdbct/notify/test",
            async : false,
            success: function(){
                console.log("发送成功");
            }
        });
    }

	@ResponseBody
	@GetMapping("/test")
	public void list2() {
		UserDO aa =userService.getUserById("888888");
		template.convertAndSendToUser(aa.toString(), "/queue/notifications", "新消息：XXX报表下载任务完成");
	}