伺服器實時通知客戶端方案，伺服器傳送/推送事件方案（1）websocket
阿新 • • 發佈：2018-12-12
服務端
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
@ServerEndpoint("/websocket") @Component public class WebSocketTest { private static int onlineCount = 0; private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<>(); private Session session; @OnOpen public void onOpen(Session session) { this.session = session; webSocketSet.add(this); addOnlineCount(); System.out.println("有新連結加入!當前線上人數為" + getOnlineCount()); } @OnClose public void onClose() { webSocketSet.remove(this); subOnlineCount(); System.out.println("有一連結關閉!當前線上人數為" + getOnlineCount()); } @OnMessage public void onMessage(String message, Session session) throws IOException { System.out.println("來自客戶端的訊息:" + message); // 群發訊息 for (WebSocketTest item : webSocketSet) { item.sendMessage(message); item.sendMessage(message); item.sendMessage(message); } } public void sendMessage(String message) throws IOException { this.session.getBasicRemote().sendText(message); } public static synchronized int getOnlineCount() { return WebSocketTest.onlineCount; } public static synchronized void addOnlineCount() { WebSocketTest.onlineCount++; } public static synchronized void subOnlineCount() { WebSocketTest.onlineCount--; } }
客戶端
<!DOCTYPE HTML> <html> <head> <base href="localhost://localhost:8080/"> <title>My WebSocket</title> </head> <body> Welcome <br /> <input id="text" type="text" /> <button onclick="send()">Send</button> <button onclick="closeWebSocket()">Close</button> <div id="message"></div> </body> <script type="text/javascript"> var websocket = null; //判斷當前瀏覽器是否支援WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://localhost:8084/websocket"); } else { alert('Not support websocket') } //連線發生錯誤的回撥方法 websocket.onerror = function() { setMessageInnerHTML("error"); }; //連線成功建立的回撥方法 websocket.onopen = function(event) { setMessageInnerHTML("open"); } //接收到訊息的回撥方法 websocket.onmessage = function(event) { setMessageInnerHTML(event.data); } //連線關閉的回撥方法 websocket.onclose = function() { setMessageInnerHTML("close"); } //監聽視窗關閉事件，當視窗關閉時，主動去關閉websocket連線，防止連線還沒斷開就關閉視窗，server端會拋異常。 window.onbeforeunload = function() { websocket.close(); } //將訊息顯示在網頁上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //關閉連線 function closeWebSocket() { websocket.close(); } //傳送訊息 function send() { var message = document.getElementById('text').value; websocket.send(message); } </script> </html>