前言

WebSocket很多人听说过，没见过，没用过，以为是个很高大上的技术，实际上这个技术并不神秘，可以说是个很容易就能掌握的技术，希望在看完本文之后，马上把文中的栗子拿出来自己试一试，实践出真知。

WebSocket的由来🤞

我们平时在开发过程中，接触最多的就是HTTP协议了，正常情况下，我们通过客户端向服务端发送HTTP请求，服务器响应请求资源，这个过程我们熟悉的不能再熟悉了。

但是HTTP协议有一个问题就是通信只能由客户端发起，也就是说HTTP协议属于单向通信。

举个栗子，我们在股票中自选某个股票，我们很关心它的价格高于多少时准备卖掉，我们不可能时时刻刻盯着股价来看，这个时候就在想，如果交易所可以自动推送股票的价格该多好，如果采用我们平时HTTP协议做不到服务器主动向客户端推送消息。

当然上述栗子也有办法解决，我们可以使用轮询，即每隔一段时间，客户端就像服务端发起一个询问，但是轮询最大的问题就是效率非常低下，而且很浪费资源，打比方成千上万的韭菜都在关注股票，都在发起请求，那这个请求量就很大了，因此，在很多大佬的努力下，WebSocket就横空出世了！

WebSocket的优点😊

从上述举得股票栗子中就可以很好的看出WebSocket的优点：

支持双向通信，实时性更好
更好，更轻量与服务端进行通信，因为WebSocket提供了简单的消息规范，可以更快的适应长连接的环境
支持扩展。ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议，同时可以加密
可以发送文本，也可以发送二进制数据
没有同源策略的限制，客户端可以任意服务器连接（没有同源策略，那我们也可以用来进行解决跨域问题啦🤣）

WebSocket的应用🙈

现在WebSocket用处很多，最典型的有以下几个

聊天室
网站视频弹幕
股票价格实时显示
物联网数据推送

还有其他的应用场景，大家可以好好想一想

举个栗子🌰

说了这么多，我们可以自己来实现一个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的加密以及心跳机制等。