public class WebSocketConfig {
    /**
     * 如果使用Springboot默認(rèn)內(nèi)置的tomcat容器，則必須注入ServerEndpoint的bean；
     * 如果使用外置的web容器，則不需要提供ServerEndpointExporter，下面的注入可以注解掉
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}
 
 
public class WebSocketServer {
?
    //與某個(gè)客戶端的連接會(huì)話，需要通過它來給客戶端發(fā)送數(shù)據(jù)
    private Session session;
?
    private static CopyOnWriteArraySet<WebSocketServer> webSockets = new CopyOnWriteArraySet<>();
    //用來存放每個(gè)客戶端對(duì)應(yīng)的WebSocket對(duì)象。
    private static Map<String,Session> sessionPool = new HashMap<>();
?
    /**
     * 連接成功后調(diào)用的方法
     * @param session
     * @param key
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("key") String key) throws IOException {
        //key為前端傳給后端的token
        this.session = session;
        //從token中獲取到userid當(dāng)做區(qū)分websocket客戶端的key
        Long userId = JwtHelper.getUserId(key);
        sessionPool.put(String.valueOf(userId),session);
        if (sessionPool.get(String.valueOf(userId))==null){
            webSockets.add(this);
        }
        webSockets.add(this);
        System.out.println("webSocket連接成功");
        System.out.println("WebSocket有新的連接，連接總數(shù)為："+webSockets.size());
    }
?
    /**
     * 連接關(guān)閉調(diào)用的方法
     */
    @OnClose
    public void onClose() {
        webSockets.remove(this);
        System.out.println("webSocket連接關(guān)閉");
    }
?
    /**
     * 收到客戶端消息后調(diào)用的方法，根據(jù)業(yè)務(wù)要求進(jìn)行處理，這里就簡(jiǎn)單地將收到的消息直接群發(fā)推送出去
     * @param message 客戶端發(fā)送過來的消息
     */
    @OnMessage
    public void onMessage(String message) {
        //心跳檢測(cè)
        int beginIndex = 10;
        if ("HeartBeat".equals(message.substring(0,9))){
            String token = message.substring(beginIndex);
            System.out.println("token1"+token);
            if (!"".equals(token)){
                System.out.println("token2"+token);
                Long userId = JwtHelper.getUserId(token);
                sendTextMessage(String.valueOf(userId),"ok");
            }
        }
        System.out.println("WebSocket收到客戶端消息："+message);
    }
    /**
     * 發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("發(fā)生錯(cuò)誤");
        error.printStackTrace();
    }
?
    /**
     * 實(shí)現(xiàn)服務(wù)器主動(dòng)推送消息
     */
    //單點(diǎn)消息發(fā)送
    public void sendTextMessage(String key,String message){
        Session session = sessionPool.get(key);
        if (session!=null){
            try {
                session.getBasicRemote().sendText(message);
            }catch (Exception e){
                e.printStackTrace();
            }
        }
    }
?
}

// 提示信息
import { Message } from 'element-ui'
// 引入token 解析用戶id在后端處理
import { getToken } from '@/utils/auth'
?
var url = 'ws://后端地址/equipment/websocket/'
?
var ws
var tt
var lockReconnect = false //避免重復(fù)連接
var clientId = getToken() //cookies中獲取token值
?
var websocket = {
// 建立連接
  Init: function (clientId) {
    if ('WebSocket' in window) {
      ws = new WebSocket(url + clientId)
    } else if ('MozWebSocket' in window) {
      ws = new MozWebSocket(url + clientId)
    } else {
      // console.log('您的瀏覽器不支持 WebSocket!')
      return
    }
    // websocket 生命周期根據(jù)websocket狀態(tài)自己會(huì)執(zhí)行
    // websocket 成功 失敗 錯(cuò)誤 斷開 這里會(huì)自動(dòng)執(zhí)行
    // 這個(gè)方法后端通過send調(diào)用 這個(gè)方法會(huì)執(zhí)行和接收參數(shù)
    ws.onmessage = function (e) {
      // console.log('接收消息:' + e.data)
      heartCheck.start()
      if (e.data == 'ok') {
        //心跳消息不做處理
        return
      }
      Message({
        message: e.data,
        type: 'success'
      })
      //messageHandle(e.data)
    }
    ws.onclose = function () {
      console.log('連接已關(guān)閉')
      Message({
        message: '報(bào)警功能連接已關(guān)閉',
        type: 'error'
      })
      reconnect(clientId)
    }
    ws.onopen = function () {
      // console.log('連接成功')
      Message({
        message: '報(bào)警功能連接成功',
        type: 'success'
      })
      heartCheck.start()
    }
?
    ws.onerror = function (e) {
      // console.log('數(shù)據(jù)傳輸發(fā)生錯(cuò)誤')
      Message({
        message: '數(shù)據(jù)傳輸發(fā)生錯(cuò)誤',
        type: 'error'
      })
      reconnect(clientId)
    }
  },
  // 我們單獨(dú)寫了一個(gè)方法 調(diào)用ws的關(guān)閉方法，這樣就可以在退出登錄的時(shí)候主動(dòng)關(guān)閉連接
  //關(guān)閉連接
  onClose: function () {
    console.log('主動(dòng)關(guān)閉連接！')
    //關(guān)閉websocket連接和關(guān)閉斷開重連機(jī)制
    lockReconnect = true
    // 調(diào)用 上面的websocket關(guān)閉方法
    ws.close()
  },
  // 前端的send給后端發(fā)信息
  Send: function (sender, reception, body, flag) {
    let data = {
      sender: sender,
      reception: reception,
      body: body,
      flag: flag
    }
    let msg = JSON.stringify(data)
    // console.log('發(fā)送消息：' + msg)
    ws.send(msg)
  },
  // 返回ws對(duì)象
  getWebSocket () {
    return ws
  },
  // websocket 自帶的狀態(tài)碼意思提示
  getStatus () {
    if (ws.readyState == 0) {
      return '未連接'
    } else if (ws.readyState == 1) {
      return '已連接'
    } else if (ws.readyState == 2) {
      return '連接正在關(guān)閉'
    } else if (ws.readyState == 3) {
      return '連接已關(guān)閉'
    }
  }
}
?
// 刷新頁面后需要重連 
if (window.performance.navigation.type == 1 && getToken() != null) {
  //刷新后重連
  // reconnect(clientId);
  websocket.Init(clientId)
  //如果websocket沒連接成功，則開始延遲連接
  if (ws == null) {
    reconnect(clientId)
  }
}
?
export default websocket
?
//根據(jù)消息標(biāo)識(shí)做不同的處理
function messageHandle (message) {
  let msg = JSON.parse(message)
  switch (msg.flag) {
    case 'command':
      // console.log('指令消息類型')
      break
    case 'inform':
      // console.log('通知')
      break
    default:
    // console.log('未知消息類型')
  }
}
// 重連方法 刷新頁面 連接錯(cuò)誤 連接關(guān)閉時(shí)調(diào)用
function reconnect (sname) {
  if (lockReconnect) {
    return
  }
  lockReconnect = true
  //沒連接上會(huì)一直重連，設(shè)置延遲避免請(qǐng)求過多
  tt && clearTimeout(tt)
  tt = setTimeout(function () {
    // console.log('執(zhí)行斷線重連...')
    websocket.Init(sname)
    lockReconnect = false
  }, 4000)
}
?
//心跳檢測(cè) 跟后端是對(duì)應(yīng)的 會(huì)進(jìn)行處理
// 連接成功 和后端推消息時(shí)調(diào)用
var heartCheck = {
  timeout: 1000 * 60 * 3,
  timeoutObj: null,
  serverTimeoutObj: null,
  start: function () {
    // console.log('開始心跳檢測(cè)')
    var self = this
    this.timeoutObj && clearTimeout(this.timeoutObj)
    this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj)
    this.timeoutObj = setTimeout(function () {
      //這里發(fā)送一個(gè)心跳，后端收到后，返回一個(gè)心跳消息，
      //onmessage拿到返回的心跳就說明連接正常
      // console.log('心跳檢測(cè)...')
      ws.send('HeartBeat:' + clientId)
      self.serverTimeoutObj = setTimeout(function () {
        if (ws.readyState != 1) {
          ws.close()
        }
        // createWebSocket();
      }, self.timeout)
    }, this.timeout)
  }
}
?

// 引入外部文件
import websocket from '@/utils/websocket'
// 請(qǐng)求
const actions = {
  // 登錄
  async login (ctx, data) {
    // 調(diào)用mutations里的方法存到state
    // 登錄成功后創(chuàng)建websocket連接
    // res.data 是token
    websocket.Init(res.data)
    ctx.commit('SET_TOKEN', res.data)
  },
 
  // 退出登錄
  logout (ctx) {
   // 主動(dòng)關(guān)閉連接
    websocket.onClose()
    Message.success('退出成功，請(qǐng)重新登錄')
  }
}

// 引入websocket文件
import websocket from '@/utils/websocket'
?
// 登錄成功一進(jìn)到頁面的時(shí)候調(diào)用
created() {
   this.getWebSocket()
 },
?
// getWebSocket()方法
method: {
   // websocket 接受消息
    getWebSocket() {
      // websocket.getWebSocket()這個(gè)是websocket里面方法返回ws對(duì)象（websocket.js）
      let ws = websocket.getWebSocket()
      // 通過ws這個(gè)對(duì)象獲取這個(gè)websocket里面后端推消息前端執(zhí)行的方法onmessage。
      // 給他賦給我們自己方法 this.websocketonmessage
     websocketonmessage(e)就會(huì)執(zhí)行
      ws.onmessage = this.websocketonmessage
    },
    //接收到消息的回調(diào)函數(shù)
    websocketonmessage(e) {
      // e后端傳回來參數(shù)
      // console.log(e.data);
      // 防止心跳監(jiān)測(cè)，返回來的ok 對(duì)方法執(zhí)行的影響（心跳監(jiān)測(cè)方法也會(huì)執(zhí)行一次）
      if (e.data == 'ok') {
        //心跳消息不做處理
        return
      }
      // 需要監(jiān)測(cè)的接口 我們查詢數(shù)據(jù)的接口 在進(jìn)行處理
        this.alarmerlist()
    },
}
?