1.使用Eclipse+Tomcat8環境進行示範
2.建立一個Servlet用于接收用戶端的請求資料，并進行處理
package com.jCuckoo.server;
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;
/**
* 在tomcat7中存在WebSocketServlet類（但已經過時），在tomcat8中徹底删除
* 此處使用@ServerEndpoint注解，主要是将目前的類定義成一個websocket伺服器端
* 注解的值将被用于監聽使用者連接配接的終端通路URL位址
*/
@ServerEndpoint("/websocket")
public class WebSocketTest {
/**
* 當伺服器接收到用戶端發送的消息時所調用的方法
* 該方法可能包含一個javax.websocket.Session可選參數
* 如果有這個參數，容器将會把目前發送消息用戶端的連接配接Session注入進去
*/
@OnMessage
public void onMessage(String message,Session session) throws IOException, InterruptedException {
// 列印從用戶端擷取到的資訊
System.out.println("從用戶端接收到的資訊: " + message);
//向用戶端第一次發送資訊
session.getBasicRemote().sendText("=======向用戶端第一次發送資訊=======");
//每秒向用戶端發送一次資訊，連續發送3次
int sentMessages = 0;
while (sentMessages < 3) {
Thread.sleep(1000);
session.getBasicRemote().sendText("即時發送資訊，目前是第 " + sentMessages+"次...");
sentMessages++;
}
// 向用戶端發送最後一次資訊
session.getBasicRemote().sendText("=======向用戶端發送最後一次資訊=======");
}
/**
* 當一個新使用者連接配接時所調用的方法
* 該方法可能包含一個javax.websocket.Session可選參數
* 如果有這個參數，容器将會把目前發送消息用戶端的連接配接Session注入進去
*/
@OnOpen
public void onOpen(Session session) {
System.out.println("用戶端連接配接成功");
}
/** 當一個使用者斷開連接配接時所調用的方法*/
@OnClose
public void onClose() {
System.out.println("用戶端關閉");
}
}
3.在HTML5 頁面中使用WebSocket與伺服器端進行互動
<!DOCTYPE html>
<html>
<head>
<title>HTML5 WebSocket測試</title>
</head>
<body>
<div>
<input type="button" value="Start" οnclick="start()" />
</div>
<div id="messages"></div>
<script type="text/javascript">
var webSocket = new WebSocket('ws://localhost:8080/WebSocket/websocket');
webSocket.onerror = function(event) {
alert(event.data);
};
//與WebSocket建立連接配接
webSocket.onopen = function(event) {
document.getElementById('messages').innerHTML = '與伺服器端建立連接配接';
};
//處理伺服器傳回的資訊
webSocket.onmessage = function(event) {
document.getElementById('messages').innerHTML += '<br />'+ event.data;
};
function start() {
//向伺服器發送請求
webSocket.send('我是jCuckoo');
}
</script>
</body>
</html>
4.項目組織結構
5.運作測試結果
