WebSocket簡單樣例
阿新 • • 發佈：2018-12-03
WebSocket簡單樣例
1.目的：通過WebSocekt實現Java服務端將agent狀態實時推送到html頁面
2. 測試環境:win7 64位 旗艦版，jdk8，Tomcat8，Mycelispe2014
3.服務端程式碼：
import java.io.IOException; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; /** * @ServerEndpoint 註解是一個類層次的註解，它的功能主要是將目前的類定義成一個websocket服務端 * 註解的值將被用於監聽使用者連線的終端訪問URL地址,客戶端可以通過這個URL來連線到WebSocket伺服器端 */ @ServerEndpoint("/websocket/{agentcontact}") public class TestWebSocket { //concurrent包的執行緒安全Map,用來存放每個客戶端對應的WebSocket物件,其中Key為坐席標識 private static Map<String, TestWebSocket> agentclientmap = new ConcurrentHashMap<String, TestWebSocket>(); private String agentcontact; //使用者標識 private Session session; //與某個客戶端的連線會話，需要通過它來給客戶端傳送資料 /** * 連線建立成功呼叫的方法 * @param session可選的引數 session為與某個客戶端的連線會話，需要通過它來給客戶端傳送資料 */ @OnOpen public void onOpen(@PathParam("agentcontact") String agentcontact, Session session){ this.agentcontact = agentcontact; this.session = session; // ConcurrentHashMap key值不重複，保證每個使用者標識對應一個websocket類，避免重新整理，登入等操作出現一個使用者標識對應多個客戶端 agentclientmap.put(agentcontact,this); } /** * 連線關閉呼叫的方法 */ @OnClose public void onClose(){ //關閉ws連線，從map中移除對應的key agentclientmap.remove(agentcontact); } /** * 收到客戶端訊息後呼叫的方法 * @param message 客戶端傳送過來的訊息 * @param session 可選的引數 */ @OnMessage public void onMessage(String message, Session session) { System.out.println("來自客戶端的訊息:" + message); } /** * 發生錯誤時呼叫 * @param session * @param error */ @OnError public void onError(Session session, Throwable error){ System.out.println("發生錯誤"); error.printStackTrace(); } /** * server向client推送訊息方法 * @param message * @throws IOException */ public void pushMessage(String agentcontact,String message) throws IOException { //全部推送 /*for (TestWebSocket item : agentclientmap.values()) { item.session.getAsyncRemote().sendText(message); }*/ //點對點推送 if(agentclientmap.containsKey(agentcontact)){ TestWebSocket ws_push = agentclientmap.get(agentcontact); // getAsyncRemote() 非阻塞傳送方法，可以避免某客戶端推送延遲導致整個伺服器推送卡頓 ws_push.session.getAsyncRemote().sendText(message); } } }
4.客戶端程式碼：
<html> <head> </head> <body> Welcome<br/><input id="text" type="text"/> <button onclick="send()">傳送訊息</button> <hr/> <button onclick="closeWebSocket()">關閉WebSocket連線</button> <hr/> <div id="message"></div> </body> <script type="text/javascript"> var websocket = null; var agentcontact='[email protected]'; //判斷當前瀏覽器是否支援WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://10.1.30.72:8080/TestProject/websocket/"+agentcontact); } else { alert('當前瀏覽器 Not support websocket'); } //連線成功建立的回撥方法 websocket.onopen = function () { console.log('websocket.onopen'); setMessageInnerHTML("WebSocket連線成功"); }; //連線關閉的回撥方法 websocket.onclose = function () { console.log('websocket.onclose'); setMessageInnerHTML("WebSocket連線關閉"); }; //接收到訊息的回撥方法 websocket.onmessage = function (event) { console.log('websocket.onmessage:'+event+',event.data:'+event.data); setMessageInnerHTML(event.data); }; //連線發生錯誤的回撥方法 websocket.onerror = function () { setMessageInnerHTML("WebSocket連線發生錯誤"); }; //監聽視窗關閉事件，當視窗關閉時，主動去關閉websocket連線，防止連線還沒斷開就關閉視窗，server端會拋異常。 window.onbeforeunload = function () { websocket.close(); }; //將訊息顯示在網頁上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //傳送訊息 function send() { var message = document.getElementById('text').value; websocket.send(message); } </script> </html>