1.使用websocket可以方便的實現服務器端主動的向客戶端推送消息,而不用在使用輪詢和定時器的方式獲取數據
2.websocket協議特點:
1)建立在TCP協議之上
2)與HTTP協議有着很好的兼容性,默認端口也是80和443,並且握手階段採用HTTP協議,因此握手時不容易屏蔽,能通過各種HTTP代理服務器
3)數據格式比較輕量,性能開銷小,通信高效
4)可以發送文本,也可以發送二進制數據
5)沒有同源限制,客戶端可以與任意服務器通信
6)協議標識是ws(如果加密,則爲wss),服務器網址是URL
一)h5原生的websocket的api
1.創建websocket的對象
var websocket = new WebSocket("ws://localhost:8080/websocket");
2.websocket實例的readyState屬性
websocket.readyState有四種結果代表當前websocket的狀態
a. CONNECTING: 值爲0,表示正在連接
b. OPEN:值爲1,表示連接成功,可以通信
c.CLOSING:值爲2,表示連接正在關閉
d.CLOSED:值爲3,表示連接已經關閉,或者打開連接失敗
3.websocket實例的onopen屬性
websocket.onopen,用於指定連接成功之後的回調函數
websocket.onopen = function () { console.log(websocket.readyState) }連接成功之後如果有多個回調函數的話,可以使用websocket的函數websocket.addEventListener();
websocket.addEventListener('open',function(event){
websocket.send(''hello websocket");
})
4.websocket實例的onclose屬性
websocket.onclose,用於指定連接關閉後的回調函數
websocket.onclose = function () { console.log("websocket連接關閉") }連接關閉之後多個回調函數的話,可以使用websocket的行數websocket.addEventListener();
websocket.addEventListener('close',function(event){
var code = event.code;
var reason = event.reason;
var wasClean = event.wasClean;
})
5.webSocket實例的onmessage屬性
webSocket.onmessage 用於指定收到服務器數據後的回調函數,同樣可以使用websocket.addEventListener('message',function(event){})接受消息
websocket.onmessage = function (event) { console.log(event.data); }
收到的消息可能是文本格式,也可能是二進制數據(blob對象或者Arraybuffer)
websocket.onmessage(function(event){
if(typeof event.data == string){
console.log('get data is string');
}
if(event.data interfaceof ArrayBuffer){
console.log('get data is ArrayBuffer');
}
})
可以使用websocke.binaryType指定收到的消息的格式 binaryType = 'blob';
6.websocket實例的send()方法向服務器端發送消息,可以是文本格式,可以是blob對象或者ArrayBuffer
websocket.send(document.getElementById('text').value);7.websocket實例的bufferedAmount屬性,表示還有多少二進制字節沒有發送出去,可以判斷髮送是否結束
websocket.send(document.getElementById('text').value); if(websocket.bufferedAmount == 0){ console.log('發送結束'); }else{ console.log('發送正在進行'); }8.websocket實例的onerror屬性,用於指定websocket連接發生錯誤時候的回調函數
二)sockJS.js模擬的websocket
sockJS模擬的websocket與h5的websocket的api相仿,特別注意sockJS連接的協議是http而非ws
var sock = new SockJS("http://localhost:8080/hello");
sock.onopen = function() {
console.log("連接成功");
};
sock.onmessage = function(event) {
console.log("接收的數據"+event.data)
};
sock.onclose = function() {
console.log("websocket連接關閉")
}
//向服務器發送消息
websocket.send(document.getElementById('text').value);
//關閉連接
websocket.close();