WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后浏览器和服务器之间就形成了一条快速通道,两者之间就可以直接进行数据传送。当你获取 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 就能给客户端发送消息了。