WebSocket：扫码登录

WebSocket是一种在单个 TCP 连接上进行全双工通讯的协议。

只要建立连接，它就允许服务器主动向客户端发送数据，使得客户端和浏览器可以进行双向数据传输。

比如：扫码登录。

一般情况，需要用到用户唯一标识，可以借助uuid生成。

uuid 是通用唯一识别码（Universally Unique Identifier）的缩写。

npm install uuid --save

安装之后在页面中引入。uuid有5个版本，这里以v4为例

import { v4 as uuidv4 } from 'uuid'

准备工作就好啦，接下来扫码登录流程

1. 生成用户唯一标识uuid

this.uuid = uuidv4()

2. 调用后端接口获取二维码

this.getQrCode(this.uuid)

3. 连接websocket

openSocket() {
      var socket
      if (typeof WebSocket == 'undefined') {
        console.log('您的浏览器不支持WebSocket')
      } else {
        console.log('您的浏览器支持WebSocket')
        var protocol = window.location.protocol
        if (protocol.indexOf('https') != -1) {
          var ws = 'wss://'
        } else {
          var ws = 'ws://'
        }
        var socketUrl = ws + window.location.host + process.env.VUE_APP_BASE_API + '请求的websocket地址' + this.uuid
        if (socket != null) {
          socket.close()
          socket = null
        }
        //实例化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        socket = new WebSocket(socketUrl)
        //打开事件
        socket.onopen = function () {
          console.log('websocket已打开')
          //socket.send("这是来自客户端的消息" + location.href + new Date());
        }
        //获得消息事件
        socket.onmessage = msg => {
          console.log(msg)
          //发现消息进入    开始处理前端触发逻辑：验证、跳转（此处省略）
        }
        //发生了错误事件
        socket.onerror = function () {
          console.log('websocket发生了错误')
        }
        //关闭事件
        socket.onclose = function () {
          console.log('websocket已关闭')
        }
      }
    },

到此就结束啦。