vue使用封装websocket

用electron-vue 做一个桌面项目需要用到websocket

• 封装websocket,src_>api_>socket.js

var websock = null
// var globakCallback = null
var serverPort = '7181' // webSocket连接端口

function getWebIP () {
  var curIP = window.location.hostname
  return curIP
}

function initWebSocket () {
  // 初始化weosocket
  // ws地址
  var wsuri = 'ws://' + getWebIP() + ':' + serverPort
  websock = new WebSocket(wsuri)
  websock.onmessage = function (e) {
    websocketonmessage(e)
  }
  websock.onclose = function () {
    websocketclose()
  }
  websock.onopen = function () {
    websocketOpen()
  }
  // 连接发生错误的回调方法
  websock.onerror = function () {
    console.log('WebSocket连接发生错误')
  }
}

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

// 数据接收
function websocketonmessage (e) {
  // globakCallback(JSON.parse(e.data))
  console.log(e.data)
  // localStorage.setItem('loginResult', e.data)
}

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

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

function websocketOpen () {
  console.log('websoket 连接成功')
}

initWebSocket()

export { sendSock }

• 在main.js中导入

import * as socketApi from './api/socket'
Vue.prototype.socketApi = socketApi

• 在components的js中使用

methods:{
	submit(){
		this.socketApi.sendSock(loginForm)
	}
}