深入淺出實作Electron應用圖檔下載下傳無感更新渲染程序視圖

需求：應用在使用過程中，在背景更新應用的背景圖檔，這時候應用接收更新推送後實作背景圖檔的下載下傳和實時更新視圖。

難點：

1、圖檔下載下傳

2、無感重新整理背景圖檔

3、websocket推送

項目架構：Electron + Vue編譯後dist檔案作為渲染程序視圖

解決思路：

1、Vue項目中配置websocket推送監聽

// 初始化weosocket
function initWebSocket () {
  let wsurl = `${type}://${url}/xxxxx/websocket?code=${code唯一辨別}`
  if (websocket) {
    websocket.close()
    websocket = null
  }
  websocket = new WebSocket(wsurl)
  websocket.onmessage = websocketonmessage
  websocket.onopen = websocketonopen
  websocket.onerror = websocketonerror
  websocket.onclose = websocketclose
}
// 連接配接成功事件
function websocketonopen () {
  console.log('連接配接成功，開啟心跳')
  reconnectCount = 0 // 重連成功後置零
  /* state.commit('UPDATE_STATE', [
     { name: 'isAbnormal', value: false } ])*/
  startHeart() // 開啟心跳
}

// 連接配接建立失敗重連
function websocketonerror () {
  websocketReconnect()
}