溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何使用WebSocket實現即時通訊，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
隨著互聯網的發展，傳統的HTTP協議已經很難滿足Web應用日益復雜的需求了。近年來，隨著HTML5的誕生，WebSocket協議被提出，它實現了瀏覽器與服務器的全雙工通信，擴展了瀏覽器與服務端的通信功能，使服務端也能主動向客戶端發送數據。
傳統的HTTP協議是無狀態的，每次請求（request）都要由客戶端（如瀏覽器）主動發起，服務端進行處理后返回response結果，而服務端很難主動向客戶端發送數據；這種客戶端是主動方，服務端是被動方的傳統Web模式對于信息變化不頻繁的Web應用來說造成的麻煩較小，而對于涉及實時信息的Web應用卻帶來了很大的不便，如帶有即時通信、實時數據、訂閱推送等功能的應用。在WebSocket規范提出之前，開發人員若要實現這些實時性較強的功能，經常會使用折衷的解決方法：輪詢（polling）和Comet技術。其實后者本質上也是一種輪詢，只不過有所改進。
輪詢是最原始的實現實時Web應用的解決方案。輪詢技術要求客戶端以設定的時間間隔周期性地向服務端發送請求，頻繁地查詢是否有新的數據改動。明顯地，這種方法會導致過多不必要的請求，浪費流量和服務器資源。
Comet技術又可以分為長輪詢和流技術。長輪詢改進了上述的輪詢技術，減小了無用的請求。它會為某些數據設定過期時間，當數據過期后才會向服務端發送請求；這種機制適合數據的改動不是特別頻繁的情況。流技術通常是指客戶端使用一個隱藏的窗口與服務端建立一個HTTP長連接，服務端會不斷更新連接狀態以保持HTTP長連接存活；這樣的話，服務端就可以通過這條長連接主動將數據發送給客戶端；流技術在大并發環境下，可能會考驗到服務端的性能。
這兩種技術都是基于請求-應答模式，都不算是真正意義上的實時技術；它們的每一次請求、應答，都浪費了一定流量在相同的頭部信息上，并且開發復雜度也較大。
**伴隨著HTML5推出的WebSocket，真正實現了Web的實時通信，使B/S模式具備了C/S模式的實時通信能力。**WebSocket的工作流程是這樣的：瀏覽器通過JavaScript向服務端發出建立WebSocket連接的請求，在WebSocket連接建立成功后，客戶端和服務端就可以通過TCP連接傳輸數據。因為WebSocket連接本質上是TCP連接，不需要每次傳輸都帶上重復的頭部數據，所以它的數據傳輸量比輪詢和Comet技術小了很多。本文不詳細地介紹WebSocket規范，主要介紹下WebSocket在Java Web中的實現,并使用WebSocket實現一個聊天室。
JavaEE 7中出了JSR-356:Java API for WebSocket規范。不少Web容器，如Tomcat,Nginx,Jetty等都支持WebSocket。Tomcat從7.0.27開始支持WebSocket，從7.0.47開始支持JSR-356。下面的代碼也必須運行在Tomcat7.0.27以上的版本。
WebSocket服務端的代碼
//該注解用來指定一個URI，客戶端可以通過這個URI來連接到WebSocket。類似Servlet的注解mapping。無需在web.xml中配置。
@ServerEndpoint("/webSocket")
public class WebSocketDemo {
// 靜態變量，用來記錄當前在線連接數。應該把它設計成線程安全的。
private static final AtomicInteger onlineCount = new AtomicInteger(0);
// concurrent包的線程安全Set，用來存放每個客戶端對應的MyWebSocket對象。若要實現服務端與單一客戶端通信的話，可以使用Map來存放，其中Key可以為用戶標識
private static CopyOnWriteArraySet<WebSocketDemo> webSocketSet = new CopyOnWriteArraySet<WebSocketDemo>();
//定義一個記錄客戶端的聊天昵稱
private final String nickname;
// 與某個客戶端的連接會話，需要通過它來給客戶端發送數據
private Session session;
public WebSocketDemo() {
nickname = "訪客"+onlineCount.getAndIncrement();
}
/*
*使用@Onopen注解的表示當客戶端鏈接成功后的回掉。參數Session是可選參數
這個Session是WebSocket規范中的會話，表示一次會話。并非HttpSession
*/
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSocketSet.add(this);
String message = String.format("[%s,%s]",nickname,"加入聊天室");
broadcast(message);
System.out.println("onOpen");
}
/*
*使用@OnMessage注解的表示當客戶端發送消息后的回掉，第一個參數表示用戶發送的數據。參數Session是可選參數，與OnOpen方法中的session是一致的
*/
@OnMessage
public void onMessage(String message,Session session){
//這里當然會打印true
System.out.println(this.session==session);
broadcast(String.format("%s:%s",nickname,filter(message)));
}
/*
*用戶斷開鏈接后的回調，注意這個方法必須是客戶端調用了斷開鏈接方法后才會回調
*/
@OnClose
public void onClose() {
webSocketSet.remove(this);
String message = String.format("[%s,%s]",nickname,"離開了聊天室鏈接");
broadcast(message);
}
//完成群發
private void broadcast(String info){
for(WebSocketDemo w:webSocketSet){
try {
synchronized (WebSocketDemo.class) {
w.session.getBasicRemote().sendText(info);
}
} catch (IOException e) {
System.out.println("向客戶端"+w.nickname+"發送消息失敗");
webSocketSet.remove(w);
try {
w.session.close();
} catch (IOException e1) {}
String message = String.format("[%s,%s]",w.nickname,"已經斷開鏈接");
broadcast(message);
}
}
}
//對用戶的消息可以做一些過濾請求，如屏蔽關鍵字等等。。。
public static String filter(String message){
if(message==null){
return null;
}
return message;
}
}客戶端（Web主頁）代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var ws = new WebSocket("ws://localhost:8080/WebSocketTest/webSocket");
/*
*監聽三種狀態的變化 。js會回調
*/
ws.onopen = function(message) {
};
ws.onclose = function(message) {
};
ws.onmessage = function(message) {
showMessage(message.data);
};
//監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。
window.onbeforeunload = function() {
ws.close();
};
//關閉連接
function closeWebSocket() {
ws.close();
}
//發送消息
function send() {
var input = document.getElementById("msg");
var text = input.value;
ws.send(text);
input.value = "";
}
function showMessage(message) {
var text = document.createTextNode(message);
var br = document.createElement("br")
var div = document.getElementById("showChatMessage");
div.appendChild(text);
div.appendChild(br);
}
</script>
</head>
<body>
<div
id="show">
<div id="showChatMessage"></div>
<input type="text" size="80" id="msg" name="msg" placeholder="輸入聊天內容" />
<input type="button" value="發送" id="sendBn" name="sendBn"
onclick="send()">
</body>
</html>以上是“如何使用WebSocket實現即時通訊”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
