技術標籤：筆記javascript前端vue

let Socket = ''
let setIntervalWesocketPush = null
let url = ''
// 建立連線
export function createSocket (urls) {
  url = urls
  if (!Socket) {
    console.log('建立websocket連線')
    clearInterval(setIntervalWesocketPush)
    Socket = new WebSocket(urls)
    Socket.onopen = onopenWS
    Socket.
 
onmessage = im_msg
    Socket.onerror = onerrorWS
    Socket.onclose = oncloseWS
  } else {
    clearInterval(setIntervalWesocketPush)
    console.log('websocket已連線')
    onopenWS()
  }
}
// 開啟WS之後傳送心跳
export function onopenWS () {
  clearInterval(setIntervalWesocketPush)
  console.log('已連線')
  sendPing
 
() // 傳送心跳
}
// 連線失敗重連
export function onerrorWS () {
  console.log('連線失敗')
  clearInterval(setIntervalWesocketPush)
  Socket.close()
  Socket = ''
  // createSocket(url) // 重連
}
// WS資料接收統一處理
export function im_msg (e) {
  window.dispatchEvent(new CustomEvent('im_msg', {
    detail: {
      data: e
    }
  }
 
))
}
/** 傳送資料
 1. @param eventType
 */
export function sendWSPush (obj) {
  if (Socket !== null && Socket.readyState === 3) {
    Socket.close()
    createSocket(url) // 重連
  } else if (Socket.readyState === 1) {
    Socket.send(JSON.stringify(obj))
  } else if (Socket.readyState === 0) {
    setTimeout(() => {
      Socket.send(JSON.stringify(obj))
    }, 3000)
  }
}
/** 關閉WS */
export function oncloseWS () {
  let i = 0
  clearInterval(setIntervalWesocketPush)
  console.log('websocket已斷開')
  setIntervalWesocketPush = setInterval(() => {
    i++
    console.log('重連中', i)
    Socket = ''
    createSocket(url) // 重連
  }, 5000)
}
/** 傳送心跳 */
export function sendPing () {
  Socket.send('ping')
  console.log('心跳包傳送成功')
  setIntervalWesocketPush = setInterval(() => {
    console.log('連線狀態檢測中')
    Socket.send('ping')
  }, 5000)
}

使用方法

import { sendWSPush } from '../../utils/websocket'
// 引入封裝檔案中的傳送方法

 mounted () {
    window.addEventListener('im_msg', this.getmsg)
    // 掛載
  },
  destroyed () {
    window.removeEventListener('im_msg', this.getmsg)
    // 移除監聽
  },
  methods: {
    getmsg(e) {
    	console.log(e)
    	// 接收資料
    }
  }

websocket 連線會話

import { createSocket } from './utils/websocket'
createSocket(url)
// 呼叫封裝檔案中的連線方法