websocket：

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

websocket提供的api：

// 連接成功后的回調(diào)函數(shù)
ws.onopen = function (params) {console.log('客戶端連接成功')// 向服務(wù)器發(fā)送消息ws.send('hello')
};// 從服務(wù)器接受到信息時的回調(diào)函數(shù)
ws.onmessage = function (e) {console.log('收到服務(wù)器響應', 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)閉窗口，這樣服務(wù)端會拋異常。
window.onbeforeunload = function() {ws.close();
}  

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

/*** 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 cookieconst 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.datacommit('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) {}