最近在做一個后臺實時通知的項目，項目中用到了socket來實現前后端建立通信，在此記錄一下。

<template> <div> <h1>測試webSocket</h1><div id ="aaa" style="height: 300px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;"></div></div> </template> <script>var that; export default {data(){return {data:0,timeout: 30 * 1000,//30秒一次心跳timeoutObj: null,//心跳心跳倒計時serverTimeoutObj: null,//心跳倒計時timeoutnum: null,//斷開 重連倒計時websocket: null,}},created() { // 頁面創建生命周期函數 that = this;that.initWebSocket()}, destroyed: function () { // 離開頁面生命周期函數 that.websocketclose();}, methods: { initWebSocket: function () { // WebSocket與普通的請求所用協議有所不同，ws等同于http，wss等同于https that.websocket = new WebSocket("wss://127.0.0.1:9231/kh_snmptrap/websocket/lsmsp");that.websocket.onopen = that.websocketonopen;that.websocket.onerror = that.websocketonerror;that.websocket.onmessage = that.setOnmessageMessage;that.websocket.onclose = that.websocketclose;// 監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。// window.onbeforeunload = that.onbeforeunload},reconnect: function () { // 重新連接if(that.lockReconnect) return;that.lockReconnect = true;//沒連接上會一直重連，設置延遲避免請求過多that.timeoutnum && clearTimeout(that.timeoutnum);that.timeoutnum = setTimeout(() => {//新連接that.initWebSocket();that.lockReconnect = false;}, 5000);},reset: function () { // 重置心跳// 清除時間clearTimeout(that.timeoutObj);clearTimeout(that.serverTimeoutObj);// 重啟心跳that.start();},start: function () { // 開啟心跳that.timeoutObj && clearTimeout(that.timeoutObj);that.serverTimeoutObj && clearTimeout(that.serverTimeoutObj);that.timeoutObj = setTimeout(() => {// 這里發送一個心跳，后端收到后，返回一個心跳消息，if (that.websocket && that.websocket.readyState == 1) { // 如果連接正常that.websocketsend('heartbeat');} else { // 否則重連that.reconnect();}that.serverTimeoutObj = setTimeout(() => {//超時關閉that.websocket.close();}, that.timeout);}, that.timeout)},setOnmessageMessage: function(event) {let obj = JSON.parse(event.data);// console.log("obj",obj)switch(obj.type) {case 'heartbeat'://收到服務器信息，心跳重置that.reset();break;case 'sendMessage':that.data = obj.dataconsole.log("接收到的服務器消息：",JSON.stringify(obj.data,null,4))document.getElementById('aaa').innerHTML=JSON.stringify(obj.data,null,4)}},websocketonopen: function () {//開啟心跳that.start();console.log("WebSocket連接成功!!!"+new Date()+"----"+that.websocket.readyState);}, websocketonerror: function (e) { console.log("WebSocket連接發生錯誤" + e); }, websocketonmessage: function (e) { console.log(e.data); // console.log(e);document.getElementById('aaa').innerHTML=e.data},websocketclose: function (e) {that.websocket.close();console.log("connection closed ");},websocketsend(messsage) {that.websocket.send(messsage)},closeWebSocket() { // 關閉websocketthat.websocket.close()}} } </script> <style > </style>

還有一點，我這里是https的請求，如果你是http請求的話，把wss://127.0.0.1:8888改為ws://127.0.0.1:8888。

總結

以上是生活随笔為你收集整理的关于webSocket建立前后端连接，并进行心跳机制的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。