WebSocket簡單介紹 Java後端WebSocket的Tomcat實現
一.WebSocket簡單介紹
隨著網際網路的發展，傳統的HTTP協議已經很難滿足Web應用日益複雜的需求了。近年來，隨著HTML5的誕生，WebSocket協議被提出，它實現了瀏覽器與伺服器的全雙工通訊，擴充套件了瀏覽器與服務端的通訊功能，使服務端也能主動向客戶端傳送資料。
我們知道，傳統的HTTP協議是無狀態的，每次請求（request）都要由客戶端（如 瀏覽器）主動發起，服務端進行處理後返回response結果，而服務端很難主動向客戶端傳送資料；這種客戶端是主動方，服務端是被動方的傳統Web模式 對於資訊變化不頻繁的Web應用來說造成的麻煩較小，而對於涉及實時資訊的Web應用卻帶來了很大的不便，如帶有即時通訊、實時資料、訂閱推送等功能的應 用。在WebSocket規範提出之前，開發人員若要實現這些實時性較強的功能，經常會使用折衷的解決方法：輪詢（polling）
輪詢是最原始的實現實時Web應用的解決方案。輪詢技術要求客戶端以設定的時間間隔週期性地向服務端傳送請求，頻繁地查詢是否有新的資料改動。明顯地，這種方法會導致過多不必要的請求，浪費流量和伺服器資源。
Comet技術又可以分為長輪詢和流技術。長輪詢改進了上述的輪詢技術，減小了無用的請求。它會為某些資料設定過期時間，當資料過期後才會向服務端傳送請求；這種機制適合資料的改動不是特別頻繁的情況。流技術通常是指客戶端使用一個隱藏的視窗與服務端建立一個HTTP長連線，服務端會不斷更新連線狀態以保持HTTP長連線存活；這樣的話，服務端就可以通過這條長連線主動將資料傳送給客戶端；流技術在大併發環境下，可能會考驗到服務端的效能。
這兩種技術都是基於請求-應答模式，都不算是真正意義上的實時技術；它們的每一次請求、應答，都浪費了一定流量在相同的頭部資訊上，並且開發複雜度也較大。
伴隨著HTML5推出的WebSocket，真正實現了Web的實時通訊，使B/S模式具備了C/S模式的實時通訊能力。WebSocket的工作流程是這 樣的：瀏覽器通過JavaScript向服務端發出建立WebSocket連線的請求，在WebSocket連線建立成功後，客戶端和服務端就可以通過 TCP連線傳輸資料。因為WebSocket連線本質上是TCP連線，不需要每次傳輸都帶上重複的頭部資料，所以它的資料傳輸量比輪詢和Comet技術小 了很多。本文不詳細地介紹WebSocket規範，主要介紹下WebSocket在Java Web中的實現。
JavaEE 7中出了JSR-356:Java API for WebSocket規範。不少Web容器，如Tomcat,Nginx,Jetty等都支援WebSocket。Tomcat從7.0.27開始支援 WebSocket，從7.0.47開始支援JSR-356，下面的Demo程式碼也是需要部署在Tomcat7.0.47以上的版本才能執行。
二.WebSocket示例
2.1.新建JavaWeb測試專案
在pom.xml中新增Jar包依賴
1 <dependency> 2 <groupId>javax</groupId> 3 <artifactId>javaee-api</artifactId> 4 <version>7.0</version> 5 <scope>provided</scope> 6 </dependency>
客戶端（Web主頁）程式碼：
1 <%@ page language="java" pageEncoding="UTF-8" %> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <title>Java後端WebSocket的Tomcat實現</title> 6 </head> 7 <body> 8 Welcome<br/><input id="text" type="text"/> 9 <button onclick="send()">傳送訊息</button> 10 <hr/> 11 <button onclick="closeWebSocket()">關閉WebSocket連線</button> 12 <hr/> 13 <div id="message"></div> 14 </body> 15 16 <script type="text/javascript"> 17 var websocket = null; 18 //判斷當前瀏覽器是否支援WebSocket 19 if ('WebSocket' in window) { 20 websocket = new WebSocket("ws://localhost:8080/websocket"); 21 } 22 else { 23 alert('當前瀏覽器 Not support websocket') 24 } 25 26 //連線發生錯誤的回撥方法 27 websocket.onerror = function () { 28 setMessageInnerHTML("WebSocket連線發生錯誤"); 29 }; 30 31 //連線成功建立的回撥方法 32 websocket.onopen = function () { 33 setMessageInnerHTML("WebSocket連線成功"); 34 } 35 36 //接收到訊息的回撥方法 37 websocket.onmessage = function (event) { 38 setMessageInnerHTML(event.data); 39 } 40 41 //連線關閉的回撥方法 42 websocket.onclose = function () { 43 setMessageInnerHTML("WebSocket連線關閉"); 44 } 45 46 //監聽視窗關閉事件，當視窗關閉時，主動去關閉websocket連線，防止連線還沒斷開就關閉視窗，server端會拋異常。 47 window.onbeforeunload = function () { 48 closeWebSocket(); 49 } 50 51 //將訊息顯示在網頁上 52 function setMessageInnerHTML(innerHTML) { 53 document.getElementById('message').innerHTML += innerHTML + '<br/>'; 54 } 55 56 //關閉WebSocket連線 57 function closeWebSocket() { 58 websocket.close(); 59 } 60 61 //傳送訊息 62 function send() { 63 var message = document.getElementById('text').value; 64 websocket.send(message); 65 } 66 </script> 67 </html>
Java Web後端程式碼
1 package me.gacl.websocket; 2 3 import java.io.IOException; 4 import java.util.concurrent.CopyOnWriteArraySet; 5 6 import javax.websocket.*; 7 import javax.websocket.server.ServerEndpoint; 8 9 /** 10 * @ServerEndpoint 註解是一個類層次的註解，它的功能主要是將目前的類定義成一個websocket伺服器端, 11 * 註解的值將被用於監聽使用者連線的終端訪問URL地址,客戶端可以通過這個URL來連線到WebSocket伺服器端 12 */ 13 @ServerEndpoint("/websocket") 14 public class WebSocketTest { 15 //靜態變數，用來記錄當前線上連線數。應該把它設計成執行緒安全的。 16 private static int onlineCount = 0; 17 18 //concurrent包的執行緒安全Set，用來存放每個客戶端對應的MyWebSocket物件。若要實現服務端與單一客戶端通訊的話，可以使用Map來存放，其中Key可以為使用者標識 19 private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>(); 20 21 //與某個客戶端的連線會話，需要通過它來給客戶端傳送資料 22 private Session session; 23 24 /** 25 * 連線建立成功呼叫的方法 26 * @param session 可選的引數。session為與某個客戶端的連線會話，需要通過它來給客戶端傳送資料 27 */ 28 @OnOpen 29 public void onOpen(Session session){ 30 this.session = session; 31 webSocketSet.add(this); //加入set中 32 addOnlineCount(); //線上數加1 33 System.out.println("有新連線加入！當前線上人數為" + getOnlineCount()); 34 } 35 36 /** 37 * 連線關閉呼叫的方法 38 */ 39 @OnClose 40 public void onClose(){ 41 webSocketSet.remove(this); //從set中刪除 42 subOnlineCount(); //線上數減1 43 System.out.println("有一連線關閉！當前線上人數為" + getOnlineCount()); 44 } 45 46 /** 47 * 收到客戶端訊息後呼叫的方法 48 * @param message 客戶端傳送過來的訊息 49 * @param session 可選的引數 50 */ 51 @OnMessage 52 public void onMessage(String message, Session session) { 53 System.out.println("來自客戶端的訊息:" + message); 54 //群發訊息 55 for(WebSocketTest item: webSocketSet){ 56 try { 57 item.sendMessage(message); 58 } catch (IOException e) { 59 e.printStackTrace(); 60 continue; 61 } 62 } 63 } 64 65 /** 66 * 發生錯誤時呼叫 67 * @param session 68 * @param error 69 */ 70 @OnError 71 public void onError(Session session, Throwable error){ 72 System.out.println("發生錯誤"); 73 error.printStackTrace(); 74 } 75 76 /** 77 * 這個方法與上面幾個方法不一樣。沒有用註解，是根據自己需要新增的方法。 78 * @param message 79 * @throws IOException 80 */ 81 public void sendMessage(String message) throws IOException{ 82 this.session.getBasicRemote().sendText(message); 83 //this.session.getAsyncRemote().sendText(message); 84 } 85 86 public static synchronized int getOnlineCount() { 87 return onlineCount; 88 } 89 90 public static synchronized void addOnlineCount() { 91 WebSocketTest.onlineCount++; 92 } 93 94 public static synchronized void subOnlineCount() { 95 WebSocketTest.onlineCount--; 96 } 97 }
1.2.執行效果
同時開啟Google瀏覽器和火狐瀏覽器進行多客戶端模擬測試,執行效果如下:
該Demo在Jdk1.7+Tomcat7.0.65下環境測試過,示例專案程式碼下載
本篇部落格的大部分內容轉載自http://blog.chenzuhuang.com/archive/28.html,然後在此基礎上進行完善,在此對作者表示感謝