當興趣結合工作時: 11月 2016

WebSocket 教學範例 - JAVA Tomcat8 Eclipse

●環境
IDE:Eclipse Mars, Container:GlassFish 4, Language:Java,

●Note
ws server及client端的port,Web Server的port,三者需一致.

●範例解說
Web端(Client)載入頁面時,與Server建立WebSocket連線,發送訊息給Server.
Server接收訊息後印出Client所發送之訊息,並發送訊息給Client,Client接收後印出.

●Code
Client Code如下:

<!DOCTYPE html>
<html>
<!-- 測試Websocket,載入頁面後,便自動建立Websocket連線,按下start按鈕,發送訊息給server,server再回應. -->
<head>
<title>Testing websockets</title>
</head>

<body>
<!--   發送訊息的按鈕 -->
  <div>
    <input type="submit" value="Start" onclick="start()" />
  </div>
<!--   接收訊息後,在此印出 -->
  <div id="messages">
  </div>
<!--   建立websocket連線 -->
  <script type="text/javascript">
    var webSocket =
      new WebSocket('ws://127.0.0.1:8081/websocket/echo');//ServerEndpoint監聽的URL.
 
    webSocket.onerror = function(event) {
      onError(event)
    };
 
    webSocket.onopen = function(event) {
      onOpen(event)
    };
 
    webSocket.onmessage = function(event) {
      onMessage(event)
    };
//  接收到server訊息時觸發.
    function onMessage(event) {
      document.getElementById('messages').innerHTML
        += '<br />' + event.data;
    }
//  建立與server的連接.
    function onOpen(event) {
      document.getElementById('messages').innerHTML
        = 'Connection established';
    }
//  連線錯誤時觸發
    function onError(event) {
      alert(event.data);
    }
//  按下按鈕後觸發,發送訊息給server
    function start() {
      webSocket.send('hello');
      return false;
    }
  </script>

</body>

</html>

Server Code如下:

package websocket;
 
import java.io.IOException;
 
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
 
@ServerEndpoint("/echo")//監聽client連接的URL.
public class WebSocketTest {
 
//收到client訊息便執行此方法.
//印出client所發送的訊息,傳送訊息給client.
  @OnMessage
  public void onMessage(String message, Session session)
    throws IOException, InterruptedException {
   
    System.out.println("Received: " + message);
   
    session.getBasicRemote().sendText("Server has been received message.");
   
   int sentMessages = 1;
    while(sentMessages < 4){
      Thread.sleep(1000);
      session.getBasicRemote().
        sendText("Server is counting 1 to 3. Count: "
          + sentMessages);
      sentMessages++;
    }
   
    session.getBasicRemote().sendText("End");
  }
   
  @OnOpen//client開啟連接.
  public void onOpen() {
    System.out.println("Client connected");
  }
 
  @OnClose//client關閉連接.
  public void onClose() {
    System.out.println("Connection closed");
  }
}

●執行
載入後:

按下按鈕,

當興趣結合工作時

2016年11月24日星期四

Java import lib 路徑

2016年11月9日星期三

WebSocket 教學範例 - JAVA Tomcat8 Eclipse

2016年11月24日 星期四

Java import lib 路徑

2016年11月9日 星期三

WebSocket 教學 範例 - JAVA Tomcat8 Eclipse

2016年11月24日星期四

2016年11月9日星期三

WebSocket 教學範例 - JAVA Tomcat8 Eclipse