Spring Boot 构建应用——基于 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 的配置文件：

@Configuration
public 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 就能给客户端发送消息了。