一、WebSocket介紹與原理
WebSocket protocol 是HTML5一種新的協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信。一開始的握手需要借助HTTP請(qǐng)求完成。
原理
WebSocket同HTTP一樣也是應(yīng)用層的協(xié)議，但是它是一種雙向通信協(xié)議，是建立在TCP之上的。
-- 連接過(guò)程
- 瀏覽器、服務(wù)器建立TCP連接，三次握手
- WebSocket握手
- 瀏覽器發(fā)送請(qǐng)求
- 服務(wù)器收到客戶端的握手請(qǐng)求后，同樣采用HTTP協(xié)議回饋數(shù)據(jù)
-
斷開TCP連接
-- 如下圖所示
websocket
二、WebSocket與HTTP的關(guān)系
相同點(diǎn)
- 都是一樣基于TCP
- 都是應(yīng)用層協(xié)議
不同點(diǎn)
- WebSocket是雙向通信協(xié)議，模擬Socket協(xié)議，可以雙向發(fā)送或接受信息。HTTP是單向的
-
WebSocket是需要握手進(jìn)行建立連接的
如下圖所示：
websocket
三、WebSocket JS Client
1、WebSocket屬性
props.png
2、WebSocket事件
WX20200419-173139@2x.png
3、 創(chuàng)建WebSocket 實(shí)例
example
4、收發(fā)數(shù)據(jù)
- 收發(fā)數(shù)據(jù)
connection.send("hello world!")
- 接受數(shù)據(jù)
ws.onmessage = data => {
console.log(data.data)
}
- 錯(cuò)誤處理
通過(guò)onerror函數(shù)進(jìn)行回調(diào)
ws.onerror = e => {
console.log(ws.readyState, 'websocket.readyState onerror')
}
- 關(guān)閉事件
ws.onclose = data => {
console.log(ws.readyState,'關(guān)閉時(shí)狀態(tài)')
}
四、WebSocket Node Server
- 建立Node Http Server
var http = require('http')
var server = http.createServer((request,response) =>{} )
- 監(jiān)聽端口
server.listen(3000, () => {
console.log('server is listening on port 3000')
})
- 建立webSocket Sever
var websocket = require('websocket').server
var wsServer = new webSocket({httpServer: server})
總結(jié)
WebSocket在用于雙向傳輸、推送消息方面能夠做到靈活、簡(jiǎn)便、高效，但在普通的Request-Response過(guò)程中并沒(méi)有太大用武之地，比起普通的HTTP請(qǐng)求來(lái)反倒麻煩了許多，甚至更為低效。比如某些場(chǎng)景只需要簡(jiǎn)單的Request-Response，如果換做WebSocket還需要增加一個(gè)請(qǐng)求標(biāo)識(shí)RequestId，增加成本。每項(xiàng)技術(shù)都有自身的優(yōu)缺點(diǎn)，在適合它的地方能發(fā)揮出最大長(zhǎng)處，而看到它的幾個(gè)優(yōu)點(diǎn)就不分場(chǎng)合地全方位推廣的話，可能會(huì)適得其反。
