2015年1月9日 星期五

[HTML5] WebSocket 筆記 (2) - 實做echo server - Java with GlassFish.

在上一篇[HTML5] WebSocket 筆記 (1) -在網頁中使用websocket後,去爬了一下文要怎麼快速建立

一個像Echo Server一樣的功能,查到一個用Web Applaction實做。


環境如下


Web Application  
GlassFish 4.1
SDK                    
JDK 8
IDE                        
Netbean 8.0.1




WebSocket Server Code  (EchoServer.java)

 import java.io.IOException;  
 import java.util.Collections;  
 import java.util.HashSet;  
 import java.util.Set;  
 import javax.websocket.OnClose;  
 import javax.websocket.OnError;  
 import javax.websocket.OnMessage;  
 import javax.websocket.OnOpen;  
 import javax.websocket.Session;  
 import javax.websocket.server.ServerEndpoint;  
 @ServerEndpoint("/echo")  
 public class EchoServer {  
   @OnOpen  
   public void onOpen(Session session) {  
     session.setMaxBinaryMessageBufferSize(1024 * 512);  
     System.out.println(session.getId()+" open");  
   }    
   @OnClose  
   public void onClose(Session session) {  
     System.out.println(session.getId()+" close");  
   }  
   @OnMessage  
   public void onMessage(Session session, String message) throws IOException {  
     session.getBasicRemote().sendText(message);  
     System.out.println(session.getId()+" message: "+message);  
   }  
   @OnError  
   public void onError(Throwable t) {  
     t.printStackTrace();  
   }  
 }  



Web Socect Client  (echoTest.html)

 <!DOCTYPE html>  
 <html>  
   <head>  
     <title>WebSocket Echo Test</title>  
     <meta charset="UTF-8">  
     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
     <script language="javascript" type="text/javascript">  
       //echo server的網址  
       var wsUri = "ws://localhost:8080/DemoEchoServer/echo";  
       //定義元件  
       var outputElement;  
       //初始化function   
       function init()  
       {  
         outputElement = document.getElementById("output");  
         testWebSocket();  
       }  
       //執行websocket測試  
       function testWebSocket() {  
         //連線到echo server  
         websocket = new WebSocket(wsUri);  
         //連線成功要執行的function  
         websocket.onopen = function (evt) {  
           onOpen(evt)  
         };  
         //連結結速要執行的function  
         websocket.onclose = function (evt) {  
           onClose(evt)  
         };  
         //收到echo server傳來的訊息要做的function  
         websocket.onmessage = function (evt) {  
           onMessage(evt)  
         };  
         //當發生錯誤時要執行的function  
         websocket.onerror = function (evt) {  
           onError(evt)  
         };  
       }  
       //連線成功後,在outputElement顯示 ,並傳送一個測試訊息  
       function onOpen(evt) {  
         writeToScreen("連線成功");  
         doSend("hello blogger");  
       }  
       //當中斷連線時輸出訊息在outputElement上        
       function onClose(evt) {  
         writeToScreen("中斷連線");  
       }  
       //收到訊息時顯示在螢幕上  
       function onMessage(evt) {  
         writeToScreen('<span style="color: blue;">接收到: ' + evt.data + '</span>');  
         websocket.close();  
       }  
       //發生錯誤時顯示訊息在outputElement上  
       function onError(evt) {  
         writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);  
       }  
       //發送訊息  
       function doSend(message) {  
         writeToScreen("己傳送 " + message);  
         websocket.send(message);  
       }  
       //輸出訊息在outputElement上  
       function writeToScreen(message) {  
         var pre = document.createElement("p");  
         pre.style.wordWrap = "break-word";  
         pre.innerHTML = message;  
         output.appendChild(pre);  
       }  
       //加入事件,當載入完成後執行init()  
       window.addEventListener("load", init, false);  
     </script>  
   </head>  
   <body>  
     <div id="output"></div>  
   </body>  
 </html>  


執行結果 - Client


















執行結果 -Server




參考資料

https://tyrus.java.net/documentation/1.9/index/websocket-api.html#d0e645

http://javawebsocketsvideo.blogspot.tw/

沒有留言:

張貼留言