前言：最近接到的需求是前端需要實現(xiàn)一個全局告警彈窗，如果使用ajax請求http接口只能用定時器定時去請求是否有告警，這樣既消耗資源，又不能實時監(jiān)測到告警信息。所以這個時候就可以采用websocket來實現(xiàn)通信，因為websocket不用請求一次才響應一次，它可以實現(xiàn)服務器主動發(fā)送。

websocket：

• WebSocket是HTML5下一種新的協(xié)議（websocket協(xié)議本質(zhì)上是一個基于tcp的協(xié)議）
• 它實現(xiàn)了瀏覽器與服務器全雙工通信，能更好的節(jié)省服務器資源和帶寬并達到實時通訊的目的
• Websocket是一個持久化的協(xié)議

websocket提供的api：

// 連接成功后的回調(diào)函數(shù)
ws.onopen = function (params) {
  console.log('客戶端連接成功')
  // 向服務器發(fā)送消息
  ws.send('hello')
};

// 從服務器接受到信息時的回調(diào)函數(shù)
ws.onmessage = function (e) {
  console.log('收到服務器響應', e.data)
};

// 連接關(guān)閉后的回調(diào)函數(shù)
ws.onclose = function(evt) {
  console.log("關(guān)閉客戶端連接");
};

// 連接失敗后的回調(diào)函數(shù)
ws.onerror = function (evt) {
  console.log("連接失敗了");
};


// 監(jiān)聽窗口關(guān)閉事件，當窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，這樣服務端會拋異常。
window.onbeforeunload = function() {
    ws.close();
}  

接下來陳列一個vue2項目內(nèi)使用websocket的過程：

一、首先寫一個websocket的工具，方便直接調(diào)用websocket方法

目錄?

websocket.js代碼：

/**
 * websocket創(chuàng)建
 */

export function websocket() {
  return new Promise((res, req) => {
    if ('WebSocket' in window) {
      const ws = new WebSocket(`${'wss://'+ document.location.host+'/ws/notify_warning/'}`)
//這里用的document.location.host取url地址，在調(diào)試時也可以先寫死，wss還是ws需要和后端同事確認
      res(ws)
    } else {
      req('您的瀏覽器不支持 WebSocket!')
    }
  })
}

?二、寫一個狀態(tài)機來管理數(shù)據(jù)，將后端傳來的數(shù)據(jù)存到state.message

import { websocket } from '@/utils/websocket'
import store from './../index'
import { getToken } from '@/utils/auth' // get token from cookie

const state = {
  message: {},
  ws: null
}

const mutations = {
  SET_MESSAGE: (state, message) => {
    state.message = message
  },
  SET_WS: (state, ws) => {
    state.ws = ws
  }
}

const actions = {
  websocketMsg({ commit }) {
    return new Promise((resolve, reject) => {
      websocket().then((ws) => {
        commit('SET_WS', ws)
        ws.onopen = function() {
          // Web Socket 已連接上，使用 send() 方法發(fā)送數(shù)據(jù)
          ws.send('發(fā)送數(shù)據(jù)')
        }

        ws.onmessage = function(evt) {
          var received_msg = evt.data
          commit('SET_MESSAGE', received_msg)
        }
        ws.onerror = function(error) {
          reject(error)
        }
        ws.onclose = function() {
          // 關(guān)閉 websocket
          // alert("連接已關(guān)閉...");
          if (getToken()) {
            store.dispatch('message/websocketMsg')
          }
        }
        resolve()
      })
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

三、在合適的地方去調(diào)用：

 try {
          await store.dispatch("message/websocketMsg");
        } 
catch (err) {}

這樣websocket傳過來的值就存在了message中，可以將其渲染在頁面中文章來源地址http://www.zghlxwxcb.cn/news/detail-657901.html

到了這里，關(guān)于前端實現(xiàn)websocket通信講解（vue2框架）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！