websocket在vue项目的封装和使用

1.什么是websocket
websocket是一种在单个TCP连接上进行全双工通信的协议。websocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC 7936补充规范。webscoketAPI也被W3C定为标准。
websocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在websocketAPI中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

---

2.握手协议
websocket是独立的、创建在TCP上的协议
websocket通过HTTP/1.1协议的状态码进行握手
为了创建websocket连接，需要通过浏览器发出请求，之后服务器进行回应，这个过程通常称为握手

---

3.vue项目开发中怎么实现一次封装，全局使用websocket

在项目中的src文件夹下的api文件夹中创建 socket.js文件

image.png

var websock = null
var globalCallback = null

 // 初始化weosocket
function initWebSocket () {
  // ws地址 -->这里是你的请求路径
  var ws= 'ws://www.yourdomain.con/ws'
  websock = new WebSocket(ws)
  websock.onmessage = function (e) {
    websocketonmessage(e)
  }
  websock.onclose = function (e) {
    websocketclose(e)
  }
  websock.onopen = function () {
    websocketOpen()
  }

  // 连接发生错误的回调方法
  websock.onerror = function () {
    console.log('WebSocket连接发生错误')
  }
}

// 实际调用的方法
function sendSock (agentData, callback) {
  globalCallback = callback
  if (websock.readyState === websock.OPEN) {
    // 若是ws开启状态
    websocketsend(agentData)
  } else if (websock.readyState === websock.CONNECTING) {
    // 若是 正在开启状态，则等待1s后重新调用
    setTimeout(function () {
      sendSock(agentData, callback)
    }, 1000)
  } else {
    // 若未开启 ，则等待1s后重新调用
    setTimeout(function () {
      sendSock(agentData, callback)
    }, 1000)
  }
}

// 数据接收
function websocketonmessage (e) {
  globalCallback(JSON.parse(e.data))
}

// 数据发送
function websocketsend (agentData) {
  websock.send(JSON.stringify(agentData))
}

// 关闭
function websocketclose (e) {
  console.log('connection closed (' + e.code + ')')
}

// 创建 websocket 连接
function websocketOpen (e) {
  console.log('连接成功')
}

initWebSocket()

// 将方法暴露出去
export {
  sendSock
}

在main.js文件件下引用

// WebSocket封装方法
import * as socketApi from './api/socket'
Vue.prototype.socketApi = socketApi

export default {
  methods: {
    getConfigResult (res) {
      // 接收回调函数返回数据的方法
      console.log(res)
    },
    websocketToLogin () {
      // 【agentData：发送的参数；this.getConfigResult：回调方法】
      this.socketApi.sendSock(getPlaceRevenue, this.getConfigResult)
    }
  }
}

以上就是websocket在vue项目中的简单封装和使用。
但是我发现，如果需求是一个页面同时要发送多个请求，的话，好像有点小bug。
比如：同时写两个及以上对应的回调函数和发送数据的函数，后执行的发送数据的函数的回调函数会接收不到返回的数据，而是全部在最先执行的那个回调函数中返回。有点不解，还在解决中。。。
还有就是页面在F5刷新后，websocket会被强制断开连接，这也是个难题。还在找方法中，刚好手上开发的项目也有这个需求。

还得继续解bug

---

随手记，从2019慢慢成长。前端是条漫长的路，加油。