Spring 架构篇——基于 WebSocket 的消息推送

转载请注明出处：http://blog.csdn.net/smartbetter/article/details/70853135

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

1.客户端开发（JavaScript）

这里使用的 WebSocket 是 HTML5 原生的 WebSocket：

<!-- 播放音乐 --><audio id="notice" loop="loop">    <source src="/mp3/song.mp3" type="audio/mpeg" /></audio><!-- WebSocket客户端 --><script>    var websocket = null;    if('WebSocket' in window) {        websocket = new WebSocket('ws://localhost:8080/webSocket');    } else {        alert('该浏览器不支持WebSocket!');    }    websocket.onopen = function (event) {        console.log('建立连接');    }    websocket.onclose = function (event) {        console.log('连接关闭');    }    websocket.onmessage = function (event) {        console.log('收到消息:' + event.data)        // 播放音乐,弹窗提醒        document.getElementById('notice').play();        if (confirm("提示")){            console.log('确定按钮');            //停止播放            document.getElementById('notice').pause();        }    }    websocket.onerror = function () {        alert('WebSocket通信发生错误！');    }    window.onbeforeunload = function () {        websocket.close();    }</script>

2.服务端开发（Java）

Spring Boot 使用 WebSocket 需要添加起步依赖：

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

添加 WebSocket 的配置文件：

@Configurationpublic class WebSocketConfig {    @Bean    public ServerEndpointExporter serverEndpointExporter() {        return new ServerEndpointExporter();    }}

编写 WebSocket 代码：

import javax.websocket.Session;@Component@ServerEndpoint("/webSocket")public class WebSocket {    private Logger logger = LoggerFactory.getLogger(getClass());    private Session session;    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();    @OnOpen    public void onOpen(Session session) {        this.session = session;        webSocketSet.add(this);        logger.info("[WebSocket消息] 有新的连接, 总数:{}", webSocketSet.size());    }    @OnClose    public void onClose() {        webSocketSet.remove(this);        logger.info("[WebSocket消息] 连接断开, 总数:{}", webSocketSet.size());    }    @OnMessage    public void onMessage(String message) {        logger.info("[WebSocket消息] 收到客户端发来的消息:{}", message);    }    public void sendMessage(String message) {        for (WebSocket webSocket: webSocketSet) {            logger.info("[WebSocket消息] 广播消息, message={}", message);            try {                webSocket.session.getBasicRemote().sendText(message);            } catch (Exception e) {                e.printStackTrace();            }        }    }}

这样，在服务端调用 sendMessage 就能给客户端发送消息了。