●環境
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");
}
}
●執行載入後:
按下按鈕,
沒有留言:
張貼留言