@@@消息推送实战

3.1 WebSocket、SockJs、STOMP三者关系

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

1. 假设HTTP协议并不存在，只能使用TCP套接字来编写web应用，你可能认为这是一件疯狂的事情。
2. 不过幸好，我们有HTTP协议，它解决了 web 浏览器发起请求以及 web 服务器响应请求的细节。
3. 直接使用 WebSocket（SockJS） 就很类似于 使用 TCP 套接字来编写 web 应用；因为没有高层协议，因此就需要我们定义应用间所发送消息的语义，还需要确保 连接的两端都能遵循这些语义。
4. 同HTTP在TCP套接字上添加请求-响应模型层一样，STOMP在 WebSocket之上提供了一个基于帧的线路格式层，用来定义消息语义。

 

 

1.WebSocketConfig.java

package com.yizhen.config;

 

import org.springframework.context.annotation.Bean;

import org.springframework.stereotype.Component;

import org.springframework.web.socket.server.standard.ServerEndpointExporter;

 

/**

 * Created by 廖师兄

 * 2017-07-30 23:17

 */

@Component

public class WebSocketConfig {

    @Bean

    public ServerEndpointExporter serverEndpointExporter() {

        return new ServerEndpointExporter();

    }

}

2.WebSocket.java

package com.yizhen.service;

 

import lombok.extern.slf4j.Slf4j;

import org.springframework.stereotype.Component;

 

import javax.websocket.OnClose;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

import java.util.concurrent.CopyOnWriteArraySet;

 

/**

 * Created by 廖师兄

 * 2017-07-30 23:19

 */

@Component

@ServerEndpoint("/webSocket")

@Slf4j

public class WebSocket {

 

    private Session session;

 

    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();

 

    @OnOpen

    public void onOpen(Session session) {

        this.session = session;

        webSocketSet.add(this);

        log.info("【websocket消息】有新的连接, 总数:{}", webSocketSet.size());

    }

 

    @OnClose

    public void onClose() {

        webSocketSet.remove(this);

        log.info("【websocket消息】连接断开, 总数:{}", webSocketSet.size());

    }

 

    @OnMessage

    public void onMessage(String message) {

        log.info("【websocket消息】收到客户端发来的消息:{}", message);

    }

 

    public void sendMessage(String message) {

        for (WebSocket webSocket: webSocketSet) {

            log.info("【websocket消息】广播消息, message={}", message);

            try {

                webSocket.session.getBasicRemote().sendText(message);

            } catch (Exception e) {

                e.printStackTrace();

            }

        }

    }

 

}

 3.需要消息提示的界面：

 <script  type="text/javascript">
        var websocket = null;
        if('WebSocket' in window) {
            websocket = new WebSocket('ws://bgyzuishuai.s1.natapp.cc/webSocket');
        }else {
            alert('该浏览器不支持订单提醒!');
        }
 
        websocket.onopen = function (event) {
            console.log('建立连接');
        }
 
        websocket.onclose = function (event) {
            console.log('连接关闭');
        }
 
        websocket.onmessage = function (event) {
            console.log('收到消息:' + event.data)
            //弹窗提醒, 播放音乐
            $('#dingdanxiaoxi').modal('show');
 
            document.getElementById('notice').play();
        }
 
        websocket.onerror = function () {
            alert('websocket通信发生错误！');
        }
 
        window.onbeforeunload = function () {
            websocket.close();
        }
 
    </script>

pom：

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

 作者：Wang_Coder
链接：https://www.jianshu.com/p/4ef5004a1c81