你知道什麼是WebSocket嗎？

前言

WebSocket不少人據說過，沒見過，沒用過，覺得是個很高大上的技術，實際上這個技術並不神祕，能夠說是個很容易就能掌握的技術，但願在看完本文以後，立刻把文中的栗子拿出來本身試一試，實踐出真知。

WebSocket的由來🤞

咱們平時在開發過程當中，接觸最多的就是HTTP協議了，正常狀況下，咱們經過客戶端向服務端發送HTTP請求，服務器響應請求資源，這個過程咱們熟悉的不能再熟悉了。

可是HTTP協議有一個問題就是通訊只能由客戶端發起，也就是說HTTP協議屬於單向通訊。

舉個栗子，咱們在股票中自選某個股票，咱們很關心它的價格高於多少時準備賣掉，咱們不可能時時刻刻盯着股價來看，這個時候就在想，若是交易所能夠自動推送股票的價格該多好，若是採用咱們平時HTTP協議作不到服務器主動向客戶端推送消息。

固然上述栗子也有辦法解決，咱們可使用輪詢，即每隔一段時間，客戶端就像服務端發起一個詢問，可是輪詢最大的問題就是效率很是低下，並且很浪費資源，打比方成千上萬的韭菜都在關注股票，都在發起請求，那這個請求量就很大了，所以，在不少大佬的努力下，WebSocket就橫空出世了！

WebSocket的優勢😊

從上述舉得股票栗子中就能夠很好的看出WebSocket的優勢：

1. 支持雙向通訊，實時性更好
2. 更好，更輕量與服務端進行通訊，由於WebSocket提供了簡單的消息規範，能夠更快的適應長鏈接的環境
3. 支持擴展。ws協議定義了擴展，用戶能夠擴展協議，或者實現自定義的子協議，同時能夠加密
4. 能夠發送文本，也能夠發送二進制數據
5. 沒有同源策略的限制，客戶端能夠任意服務器鏈接（沒有同源策略，那咱們也能夠用來進行解決跨域問題啦🤣）

WebSocket的應用🙈

如今WebSocket用處不少，最典型的有如下幾個

1. 聊天室
2. 網站視頻彈幕
3. 股票價格實時顯示
4. 物聯網數據推送

還有其餘的應用場景，你們能夠好好想想

舉個栗子🌰

說了這麼多，咱們能夠本身來實現一個WebSocket的栗子啦，例子包括了WebSocket服務端、WebSocket客戶端（網頁端）。完整代碼能夠在 這裏 找到，有幫助的能夠幫忙點個⭐️。

上面咱們提到WebSocket技術能夠應用於股票價格實時顯示，那咱們就擼一個這樣的例子。

先上效果

從效果上來看咱們能夠發現當咱們點擊開始的時候，客戶端就能夠請求服務端，服務端去推送實時股價。

好，看完效果咱們來擼具體代碼

1. 客戶端

客戶端先簡單說明一下，這裏爲了方便，採用了Vue和ElementUi，具體代碼能夠看這裏 。

//鏈接webscoekt
    vm.ws = new WebSocket('ws://localhost:8082')
    //打開websocket
    vm.ws.onopen = function (e) {
      console.log('Connection to server opened')
      //發送消息
      const stockName = vm.ws.send(
        JSON.stringify(
          vm.stockData.map((i) => {
            return i.name
          })
        )
      )
      console.log('sened a mesg')
    }
    //收到服務器返回消息
    vm.ws.onmessage = function (e) {
      //解析data
      vm.stockData = JSON.parse(e.data)
    }
複製代碼

2. 服務端

服務端用了ws這個庫。固然你們也能夠採用 socket.io

首先先安裝一下這個庫

//安裝 ws 庫
npm  i ws 
複製代碼

下面開始寫server.js

const WebSocket = require('ws')

//生成WebSocket服務端
const wss = new WebSocket.Server({ port: 8082 })

function randomInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min) / 100
}

//websocket鏈接
wss.on('connection', function (ws) {
  //接收信息
  ws.on('message', function (message) {
    stockRequest = JSON.parse(message)
    console.log('收到消息', stockRequest)
  })

  //模擬股票價格
  const clientStockUpdater = setInterval(function () {
    for (let i in stockRequest) {
      stockRequest[i].price += randomInterval(-100, 100)
      //推送消息
      ws.send(JSON.stringify(stockRequest))
    }
  }, 1000)

  //關閉websocket
  ws.on('close', function () {
    clearInterval(clientStockUpdater)
  })
})

複製代碼

結語✍️

看完以上是否是發現WebSocket很簡單，其實本文只是一個WebSocket入門教程，你們不妨本身動手寫一下，在我這個例子上在加深一下，探究一下WebSocket的加密以及心跳機制等。