HTML5 WebSocket使用詳解
阿新 • • 發佈：2019-01-08
1.使用Eclipse+Tomcat8環境進行演示
2.建立一個Servlet用於接收客戶端的請求資料，並進行處理
[java] view plain copy print?
- 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”)
- publicclass WebSocketTest {
- /**
- * 當伺服器接收到客戶端傳送的訊息時所呼叫的方法
- * 該方法可能包含一個javax.websocket.Session可選引數
- * 如果有這個引數，容器將會把當前傳送訊息客戶端的連線Session注入進去
- */
- @OnMessage
- publicvoid 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
- publicvoid onOpen(Session session) {
- System.out.println(”客戶端連線成功”);
- }
- /** 當一個使用者斷開連線時所呼叫的方法*/
- @OnClose
- publicvoid onClose() {
- System.out.println(”客戶端關閉”);
- }
- }
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("客戶端關閉");
}
}- <!DOCTYPE html>
- <html>
- <head>
- <title>HTML5 WebSocket測試</title>
- </head>
- <body>
- <div>
- <inputtype=“button”value=“Start”onclick=“start()”/>
- </div>
- <divid=“messages”></div>
- <scripttype=“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>
<!DOCTYPE html>
<html>
<head>
<title>HTML5 WebSocket測試</title>
</head>
<body>
<div>
<input type="button" value="Start" onclick="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>
5.執行測試結果
