WebSocket模擬群聊
阿新 • • 發佈：2018-12-24
我們知道，傳統的HTTP協議是無狀態的，每次請求（request）都要由客戶端（如
瀏覽器）主動發起，服務端進行處理後返回response結果，而服務端很難主動向客戶端傳送資料；這種客戶端是主動方，服務端是被動方的傳統Web模式
對於資訊變化不頻繁的Web應用來說造成的麻煩較小，而對於涉及實時資訊的Web應用卻帶來了很大的不便，如帶有即時通訊、實時資料、訂閱推送等功能的應
用。在WebSocket規範提出之前，開發人員若要實現這些實時性較強的功能，經常會使用折衷的解決方法：輪詢（polling）和Comet技術。其實後者本質上也是一種輪詢，只不過有所改進。
輪詢是最原始的實現實時Web應用的解決方案。輪詢技術要求客戶端以設定的時間間隔週期性地向服務端傳送請求，頻繁地查詢是否有新的資料改動。明顯地，這種方法會導致過多不必要的請求，浪費流量和伺服器資源。 Comet技術又可以分為長輪詢和流技術。長輪詢改進了上述的輪詢技術，減小了無用的請求。它會為某些資料設定過期時間，當資料過期後才會向服務端傳送請求；這種機制適合資料的改動不是特別頻繁的情況。流技術通常是指客戶端使用一個隱藏的視窗與服務端建立一個HTTP長連線，服務端會不斷更新連線狀態以保持HTTP長連線存活；這樣的話，服務端就可以通過這條長連線主動將資料傳送給客戶端；流技術在大併發環境下，可能會考驗到服務端的效能。
WebSocket的工作流程是這
樣的：瀏覽器通過JavaScript向服務端發出建立WebSocket連線的請求，在WebSocket連線建立成功後，客戶端和服務端就可以通過
TCP連線傳輸資料。
WebSocket模擬群聊示例
jar包依賴
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>me.gacl</groupId> 客戶端
<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>Java後端WebSocket的Tomcat實現</title>
</head>
<body>
Welcome<br/><input id="text" type="text"/>
<button onclick="send()">傳送訊息</button>
<hr/>
<button onclick="closeWebSocket()">關閉WebSocket連線</button>
<hr/>
<div id="message"></div>
</body>
<script type="text/javascript">
var websocket = null;
//判斷當前瀏覽器是否支援WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://localhost:8080/websocket");
}
else {
alert('當前瀏覽器 Not support websocket')
}
//連線發生錯誤的回撥方法
websocket.onerror = function () {
setMessageInnerHTML("WebSocket連線發生錯誤");
};
//連線成功建立的回撥方法
websocket.onopen = function () {
setMessageInnerHTML("WebSocket連線成功");
}
//接收到訊息的回撥方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
//連線關閉的回撥方法
websocket.onclose = function () {
setMessageInnerHTML("WebSocket連線關閉");
}
//監聽視窗關閉事件，當視窗關閉時，主動去關閉websocket連線，防止連線還沒斷開就關閉視窗，server端會拋異常。
window.onbeforeunload = function () {
closeWebSocket();
}
//將訊息顯示在網頁上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//關閉WebSocket連線
function closeWebSocket() {
websocket.close();
}
//傳送訊息
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
</html>web後端
package me.gacl.websocket;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
/**
* @ServerEndpoint 註解是一個類層次的註解，它的功能主要是將目前的類定義成一個websocket伺服器端,
* 註解的值將被用於監聽使用者連線的終端訪問URL地址,客戶端可以通過這個URL來連線到WebSocket伺服器端
*/
@ServerEndpoint("/websocket")
public class WebSocketTest {
//靜態變數，用來記錄當前線上連線數。應該把它設計成執行緒安全的。
private static int onlineCount = 0;
//concurrent包的執行緒安全Set，用來存放每個客戶端對應的MyWebSocket物件。若要實現服務端與單一客戶端通訊的話，可以使用Map來存放，其中Key可以為使用者標識
private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();
//與某個客戶端的連線會話，需要通過它來給客戶端傳送資料
private Session session;
/**
* 連線建立成功呼叫的方法
* @param session 可選的引數。session為與某個客戶端的連線會話，需要通過它來給客戶端傳送資料7 */
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //線上數加1
System.out.println("有新連線加入！當前線上人數為" + getOnlineCount());
}
/**
* 連線關閉呼叫的方法
*/
@OnClose
public void onClose(){
webSocketSet.remove(this); //從set中刪除
subOnlineCount(); //線上數減1
System.out.println("有一連線關閉！當前線上人數為" + getOnlineCount());
}
/**
* 收到客戶端訊息後呼叫的方法
* @param message 客戶端傳送過來的訊息
* @param session 可選的引數
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("來自客戶端的訊息:" + message);
//群發訊息
for(WebSocketTest item: webSocketSet){
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
}
/**
* 發生錯誤時呼叫
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error){
System.out.println("發生錯誤");
error.printStackTrace();
}
/**
* 這個方法與上面幾個方法不一樣。沒有用註解，是根據自己需要新增的方法。
* @param message
* @throws IOException
*/
public void sendMessage(String message) throws IOException{
this.session.getBasicRemote().sendText(message);
//this.session.getAsyncRemote().sendText(message);
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebSocketTest.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebSocketTest.onlineCount--;
}
}可開多個頁面互聊
原始碼地址:https://gitee.com/OldMonster/websocket