定義:webSocket是html5開始提供的一種在單個tcp連接上的一種全雙工通訊協議
我們所知道的
有如下特點:
1.建立在tcp協議之上的應用層
2.一旦建立,保持持久連接
3.雙方可以隨時向對方發送數據
沒有request和response的概念,兩者地位完全平等,不需要客戶端輪詢(ajax),服務端可以主動給客戶端發送信息
socket:socket是應用層與tcp/ip通信的中間軟件抽象層,是一組接口
如何使用websocket:
由於在支持webSocket的瀏覽器中提供了原生的webSocket對象,對於消息的接收數據的處理已經封裝好了因此我們在使用的時候只需要調用websocket類就好了
$(function(){
var websocket = null;
//判斷當前瀏覽器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new 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 = "測試一下,看能不能發!"
websocket.send(message);
}
}
其實最主要的還是接收到消息之後的處理方法
//接收到消息的回調方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
//具體的實現
}
適用場景:社交聊天(點對點通信),彈幕,多玩家遊戲,協同編輯等