websocket---前端的實現(一)

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();