websocket學習（一）
阿新 • • 發佈：2018-11-23
WebSockets 規範定義了一個網頁瀏覽器和伺服器建立一個socket連結。在客戶端和伺服器保持有一個持久連結，兩邊可以在任意時間傳送資料
HTML5開始提供了一種了iu藍旗與伺服器進行全雙工通訊的網路技術
基於應用層協議，他基於TCP傳輸協議，並複用HTTP的握手通道
websocket的特點
- 支援雙向通訊，實時性強
- 更好的二進位制技術
- 較少的控制開銷，連結建立後，ws客戶端，服務端資料交換是，協議的控制資料包頭部較少
手寫一個簡單的websockt栗子
-
準備
新建一個目錄，使用npm初始化，新增index.html, server.js檔案
-
服務端
server.jslet express = require('express') let app = express() app.use(express.static(__dirname)) app.listen(8080) // ============================= // // websocket 伺服器分為兩個部分，分別是服務端和客戶端 let Server = require('ws').Server // 建立一個websocket伺服器示例， 監聽的埠是7777 let server = new Server({port: 7777}) // 監聽客戶端的連結和傳送過來的訊息, socket 代表客戶端的連結// 例如a給b撥打電話，如果b接通了，則相當於他們之間建立的連結，connection // 接通之後開始說話 server.on('connection', (socket) => { // 監聽客戶端傳送過來的訊息，相當於a的耳朵聽到了b說的話 socket.on('message', (message) => { console.log(message) socket.send(`伺服器對你說：${message}`) }) }) -
客戶端
index.html<!DOCTYPE html> <htmllang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div>hello webscoket</div> <script> // 建立一個socket物件，相當於買了一部手機 // socket 插座 let socket = new WebSocket('ws://localhost:7777') // 如果伺服器連結成功，會觸發此事件 socket.onopen = function () { console.log('連結已經建立好了') socket.send(('你好')) } // 如果客戶端接收到訊息，會觸發這個事件 socket.onmessage = (e) => { console.log(e.data) } </script> </body> </html>
如何建立連結
-
客戶端申請協議升級
客戶端發起請求。
GET ws://localhost:8888/ HTTP/1.1 Host: localhost:8888 Connection: Upgrade // 表示要升級協議 Upgrade: websocket // 要升級的協議型別 Sec-WebSocket-Version: 13 // 表示websocket的版本 Sec-WebSocket-Key: IHfMdf8a0aQXbwQO1pkGdA== // 與後面服務端響應首部的Sec-WebSocket-Accept是配套的，提供基本的防護，比如惡意的連線，或者無意的連線。 -
服務端相應協議升級
服務端相應內容如下，狀態嗎101表示協議切換。完成協議升級，後續的資料互動都按照新的協議來
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: aWAY+V/uyz5ILZEoWuWdxjnlb7E= -
Sec-Websocket-Accept的計算Sec-Websocket-Accept更具客戶端請求首部的SecWebSocket-Key計算出來，計算公式如下：
- 將Sec-WebSocket-Key跟258EAFA5-E914-47DA-95CA-C5AB0DC85B11拼接。
- 通過sha1計算出來摘要，並轉換成base64編碼字串
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: aWAY+V/uyz5ILZEoWuWdxjnlb7E= -
Sec-WebSocket-Key/Accept的作用
- 避免服務端接收到非法的websocket連結
- 去報伺服器連結websocket連結
- 用瀏覽器傳送Ajax請求，設定header時，Sec-Websocket-Accept是被禁止的
- Sec-Websocket-Accept最主要目的並不是確保資料的安全性，因為Sec-Websocket-Accept， Sec-websocket-key的轉換公式是公開的，而且非常簡單，最主要的作用是預防一些常見的意外情況(非惡意)
總結
以上是簡單的websocket學習，下一節學習websocket的資料幀，並實現一個基於tcp的簡單聊天室
嗯麼麼，附上完成程式碼