初識Websocket

什麼是Websocket

WebSocket是一種通信協議，可在單個TCP連接上進行全雙工通信。WebSocket使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在WebSocket API中，瀏覽器和服務器只需要完成一次握手，兩者之間就可以建立持久性的連接，並進行雙向數據傳輸。

Websocket是一種通信協議，與HTTP不同，HTTP只能實現單項通信，也就是客戶端請求服務端，而Websocket是雙向數據通信即能使客戶端請求服務端又能使服務端推送數據到客戶端。

特點：

• 第一次握手時採用的是http協議
• 性能開銷小
• 自帶跨域請求
• 支持持久連接
• 二進制支持，可以發送文本，和二進制數據

爲什麼要使用Websocket
就前面的概念和特點就已經有充足的理由讓我們使用Websocket，不過他最大的特性是支持長連接，客戶端與服務端雙向通信，這種特性的好處實在太大了，先來看一個需求
每隔一段時間顯示後臺給的最新數據，如果沒有Websocket我們會用ajax來做，但是HTTP協議是單項通信，請求一次就沒了，爲了保持數據的更新我們每隔一段時間就要請求服務器或許幾秒幾分鐘，因此我們會給ajax添加一個定時器

 setInterval(()=>{
  	$.ajax({
      url: 'http://localhost:8080',
      dataType:'text',
      type:'GET',
      success:function(data){
      	console.log(data)
      }
    })

  },1000)

但是這樣的壞處在於隔一段時間就要請求服務器很浪費資源也給服務器帶來了很大的壓力。
而websocket就很好的解決了這個問題

Websocket協議
部分請求頭

Connection: Upgrade
Host: localhost:8080
Origin: file://
Pragma: no-cache
Sec-WebSocket-Key: infTM/NWqL6ded8db1onXg==
Sec-WebSocket-Version: 13
Upgrade: websocket

其中Connection:Upgrade和Upgrade: websocket表示協議將要升級爲websocket連接
Sec-WebSocket-Key標識連接
Sec-WebSocket-Version表示協議的版本
服務端返回請求頭

Connection: Upgrade
Sec-WebSocket-Accept: +bCqQLLmSn0zlNbbOdgyKO1FjUg=
Sec-WebSocket-Extensions: permessage-deflate
Upgrade: websocket

建立連接

狀態101表示連接的HTTP協議將被更改
type爲websocket
time : pending表示客戶端與服務器一直保持連接。

JS中使用websocket
常用事件
let ws = new WebSocket(‘ws://localhost:8080/’);//創建一個websocket
WebSocket.onopen： 連接成功後的回調
WebSocket.onclose： 連接正常關閉後的回調
WebSocket.onerror： 連接失敗後的回調
WebSocket.onmessage： 客戶端接收到服務端數據的回調
webSocket.bufferedAmount： 未發送至服務器的二進制字節數
WebSocket.binaryType： 使用二進制的數據類型連接
WebSocket.protocol ： 服務器選擇的下屬協議
WebSocket.url ： WebSocket 的絕對路徑
WebSocket.readyState： 當前連接狀態，對應的四個常量

常用方法
WebSocket.close() 關閉當前連接
WebSocket.send(data) 向服務器發送數據

使用socket.io建立連接
nodejs

//nodejs
const http = require('http');
const io = require('socket.io');

//
let server = http.createServer((req,res)=>{

}).listen(8080);
//建立websocket連接
let wsServer=io.listen(server);//監聽http如果有websocket連接轉交websocket
wsServer.on('connection',sock=>{

	sock.emit('name','數據');//向客戶端發送數據

	sock.on('name',function(datas){
	    //接收客戶端數據
		console.log(datas);//12
	})
})
//前臺js
let sock = io.connect('ws://localhost:8080/');
   sock.emit('name',12);//發送數據
   sock.on('name',name=>{
	   //接收服務端數據
	   console.log(name);//數據
   })