前言

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

从效果上来看我们可以发现当我们点击开始的时候,客户端就可以请求服务端,服务端去推送实时股价。

好,看完效果我们来撸具体代码

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的加密以及心跳机制等。