1. 程式人生 > >模擬webQQ實現簡單的聊天,基於WebSocket

模擬webQQ實現簡單的聊天,基於WebSocket

什麼是WebSocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。在這裡插入圖片描述

ajax輪詢

輪詢(Polling)是一種CPU決策如何提供周邊裝置服務的方式,又稱“程控輸出入”(Programmed I/O)。輪詢法的概念是,由CPU定時發出詢問,依序詢問每一個周邊裝置是否需要其服務,有即給予服務,服務結束後再問下一個周邊,接著不斷周而復始。
在這裡插入圖片描述

ajax輪詢示例程式碼

$(function() {
	to_page();
        setInterval("isHave();",3000);
});
function isHave(){
	$.ajax({
		url : "localhost/isHave",
		data : {},
		datatype: "json",
		type : "post",	
		success : function(result) {								console.log(result);
			},
		} 
	});
}

WebSocket的優點

1、WebSocket API的優勢在於伺服器和客戶端可以在固定的時間範圍內的任意時刻,相互推送訊息。在建立連線之後,伺服器可以主動傳送資料給客戶端;

2、WebSocket 並不限於以AJAX(或XHR)方式通訊,因為Ajax技術需要客戶端發起請求,而WebSocket伺服器和客戶端可以彼此相互推送資訊。

WebSocket的使用

1、加入Spring+websocket所依賴的Jar包(使用4.1.5之後的版本,因為在WebQQ裡需要呼叫到一個setAllowedOrigins()方法,這個方法只有4.1.5版本後才呼叫的出)在這裡插入圖片描述
2、註冊SebSocket處理器,名為websocket
在這裡插入圖片描述


3、建立握手攔截器,重寫beforeHandshake方法,這個方法負責攔截HttpSess中的資料,放到WebSocket Session 中在這裡插入圖片描述
4、處理頁面文字訊息,從WebSocket session中獲取資料,在頁面顯示,並儲存到資料庫。在這裡插入圖片描述
5、JS頁面在這裡插入圖片描述
6、執行

WebScoket總結

1.WebSocket協議
是由HTML5提供的、基於TCP的、對傳統HTTP協議(短連線)的升級版
解決的問題:
1.解決了多次握手的問題(長連線),提高效率
2.伺服器可以推送資料給客戶端,不需要客戶端輪詢等low操作
2.客戶端實現方式
JavaScript對WebSocket的支援:
2.1.建立客戶端連線的方式:
websocket = new WebSocket(“ws://localhost:9090/websocket”);
2.2.websocket物件常用事件:
onerror: 連線到服務端錯誤時觸發
onmessage: 收到伺服器推送的訊息時觸發
onclose: 連線關閉時觸發
onopen: 連線到服務端成功後觸發
3.Spring框架封裝的WebSocket用法
4.1.引入spring-websocket.jar
4.2.程式碼步驟
重寫握手攔截器(處理Session)
重寫訊息處理器
編寫一個配置類:
向Spring工廠註冊一個請求路徑和訊息處理器
向Spring工廠註冊一個握手攔截器