簡說websocket

田小菜發表於2019-05-12
Web

一，什麼是websocket?

  1. websocket是一種協議，它的最大特點就是，伺服器可以主動向客戶端推送資訊，客戶端也可以主動向伺服器傳送資訊，是真正的雙向平等對話，屬於伺服器推送技術的一種。
有人會問：我們已經有了 HTTP 協議，
為什麼還需要另一個協議？它能帶來什麼好處？

答案很簡單，因為 HTTP 協議有一個缺陷：通訊只能由客戶端發起。

舉例來說，我們想了解今天的天氣，只能是客戶端向伺服器發出請求，
伺服器返回查詢結果。HTTP 協議做不到伺服器主動向客戶端推送資訊。
複製程式碼

簡說websocket

  1. WebSocket 協議在2008年誕生，2011年成為國際標準。所有瀏覽器都已經支援了。
  2. websocket特點
（1）建立在 TCP 協議之上，伺服器端的實現比較容易。
（2）與 HTTP 協議有著良好的相容性。預設埠也是80和443，
    並且握手階段採用 HTTP 協議，因此握手時不容易遮蔽，
    能通過各種 HTTP 代理伺服器。
（3）資料格式比較輕量，效能開銷小，通訊高效。
（4）可以傳送文字，也可以傳送二進位制資料。
（5）沒有同源限制，客戶端可以與任意伺服器通訊。
（6）協議識別符號是ws（如果加密，則為wss），伺服器網址就是 URL。
    （如：ws://example.com:80/some/path）
複製程式碼

二，websocket用來幹什麼?

  1. 支援雙向通訊，實時性更強(你可以來做個QQ，微信了)；
  2. 較少的控制開銷(連線建立後，ws客戶端、服務端進行資料交換時，協議控制的資料包頭部較少)

三，簡要實現一個websocket

  • html頁面
// 建立一個index.html檔案
// 下面直接寫WebSocket

// 只需要new一下就可以建立一個websocket的例項
// 我們要去連線ws協議

// 這裡對應的埠就是服務端設定的埠號9999
let ws = new WebSocket('ws://localhost:9999');

// onopen是客戶端與服務端建立連線後觸發
ws.onopen = function() {
    ws.send('收到服務端訊息了，開心');
};

// onmessage是當服務端給客戶端發來訊息的時候觸發
ws.onmessage = function(res) {
    console.log(res);   // 列印的是MessageEvent物件
    // 真正的訊息資料是 res.data
    console.log(res.data);
};

複製程式碼
  • 下面開始擼node.js這個server.js服務檔案吧
// 後臺需要安裝ws包
// npm i ws -S

const express = require('express');
const app = express();

// 設定靜態資料夾
app.use(express.static(__dirname));
// 監聽3000埠
app.listen(3000);

// 開始建立一個websocket服務
const Server = require('ws').Server;
// 這裡是設定伺服器的埠號，和上面的3000埠不用一致
const ws = new Server({ port: 9999 });

// 監聽服務端和客戶端的連線情況
ws.on('connection', function(socket) {
    // 監聽客戶端發來的訊息
    socket.on('message', function(msg) {
        console.log(msg);   // 這個就是客戶端發來的訊息
        // 來而不往非禮也，服務端也可以發訊息給客戶端
        socket.send(`這裡是服務端對你說的話： ${msg}`);
    });
});
複製程式碼

copy了一遍，還是挺簡單的。

接下來還沒完，由於websocket是H5標準出的東西，老版本的瀏覽器當然就不能很好的支援了，這時前端就要處理該死的相容問題了

正因如此，世上才會有了另外一個更好用的庫出現，這就是大名鼎鼎的socket.io，有興趣的可以去了解一下。

參考文章：

相關文章