你知道什么是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的加密以及心跳机制等。