Vue implementiert WebSocket-Kundendienst-Chatfunktion

Store aus „@/store“ importieren
var webSocket = null;
var globalCallback = null; //Callback-Funktion für externen Datenempfang definieren //WebSocket initialisieren
Exportfunktion initWebSocket (URL) {
  // Bestimmen Sie, ob der Browser WebSocket unterstützt
  if ("WebSocket" im Fenster) {
    webSocket = new WebSocket(url); //Ein Socket-Objekt erstellen } else {
    alert("Dieser Browser unterstützt kein WebSocket!");
  }
  //Öffnen Sie webSocket.onopen = function () {
    : webSocketOpen();
  };
  //Mail empfangenwebSocket.onmessage = function (msg) {
    webSocketOnMessage(Nachricht);
  };
  //Schließen webSocket.onclose = function () {
    webSocketClose();
  };
  //Callback-Methode bei Verbindungsfehler webSocket.onerror = function () {
    console.log("WebSocket-Verbindungsfehler");
  };
}

//Auslösen, wenn der Verbindungssocket hergestellt ist Exportfunktion webSocketOpen () {
  console.log("WebSocket-Verbindung erfolgreich");
}

// Wird ausgelöst, wenn der Client Daten vom Server empfängt. e ist das empfangene Datenobjekt. Exportfunktion webSocketOnMessage (e) {
  // Im Store speichern und dann die Änderungen in der Chat-Oberfläche überwachen, um die empfangenen Informationen automatisch abzurufen store.commit('user/SET_WS_MSG', e)
}

//Daten senden Exportfunktion webSocketSend (data) {
  console.log('Daten senden');
  //Konvertieren Sie hier das Datenformat entsprechend Ihren Anforderungen webSocket.send(JSON.stringify(data));
}

//Schließen Sie den Socket
Exportfunktion webSocketClose () {
  webSocket.schließen()
  console.log("Die Konversationsverbindung wurde geschlossen");
  // }
}


//Eine Funktion, die an anderen Stellen aufgerufen wird, wo ein Socket zum Senden und Empfangen von Daten benötigt wird. Exportfunktion sendSock (agentData, callback) {
  globalCallback = Rückruf; //Dieser Rückruf ist die Funktion zum Empfangen von Socket-Daten, die bei einem Aufruf an anderer Stelle definiert sind, was sehr wichtig ist.
  //Die folgende Beurteilung basiert hauptsächlich auf der Möglichkeit einer Unterbrechung der Socket-Verbindung oder anderen Faktoren, sodass die Nachricht erneut gesendet werden kann.
  Schalter (webSocket.readyState) {
    //VERBINDEN: Der Wert ist 0 und zeigt damit an, dass eine Verbindung hergestellt wird.
    Fall webSocket.CONNECTING:
      setzeTimeout(Funktion () {
        console.log('Verbindung wird hergestellt...');
        webSocketSend(agentData, Rückruf);
      }, 1000);
      brechen;
    //OPEN: Der Wert ist 1 und zeigt damit an, dass die Verbindung erfolgreich ist und eine Kommunikation möglich ist.
    Fall webSocket.OPEN:
      console.log('Verbindung erfolgreich');
      webSocketSend(agentData);
      brechen;
    //SCHLIESSEN: Der Wert ist 2 und zeigt an, dass die Verbindung geschlossen wird.
    Fall webSocket.CLOSING:
      setzeTimeout(Funktion () {
        console.log('Verbindung wird geschlossen');
        webSocketSend(agentData, Rückruf);
      }, 1000);
      brechen;
    //GESCHLOSSEN: Der Wert ist 3 und zeigt damit an, dass die Verbindung geschlossen wurde oder das Öffnen der Verbindung fehlgeschlagen ist.
    Fall webSocket.CLOSED:
      console.log('Verbindung geschlossen/geöffnet fehlgeschlagen');
      // etwas tun
      brechen;
    Standard:
      // das passiert nie
      brechen;
  }
}

//Exportieren Sie die Socket-Initialisierungsfunktion, die Datensende- (Empfangs-)Funktion und die Verbindungsschließfunktion export default {
  initWebSocket,
  webSocketClose,
  sendSock
};

lass Zustand = {
 webSocketMsg: ''
};

//Zustand ändern
const Mutationen = {
    //Vom WebSocket gesendete Nachrichten speichern SET_WS_MSG: (state, msg) => {
        state.webSocketMsg = Nachricht
    }
}
//Mutationen übermitteln. Wenn Sie Probleme mit dem Accept-Block haben, können Sie Folgendes hinzufügen, um //const actions = { anzuzeigen.
 // webSockets ({ commit }) {
 // commit('SET_WS_MSG', 2)
 // }
//}

//Den Status von state abrufen const getters = {
    webSocketMsg: Status => Status.Benutzer.webSocketMsg
}

Standardgetter exportieren

<Skript>
importiere { initWebSocket, sendSock, webSocketClose } von '@/utils/websocket.js'
Standard exportieren {
  Daten() {
    zurückkehren {
     // Diese Adresse wird vom Backend vergeben und für die Verbindung mit dem Websocket verwendet. Verschlüsseltes wss Unverschlüsseltes ws
      wsUrl:'ws://Adresse',
    }
  },
  // Die erhaltenen Informationen aus dem berechneten Store abrufen: {
    getSocketMsg() {
      gib dies zurück.$store.state.user.webSocketMsg
    },
  },
  //Überwachen Sie getSocketMsg, um zu sehen, ob Daten empfangen wurden. watch: {
    getSocketMsg: {
      Handler: Funktion (Wert) {
        this.getConfigResult(Wert)
      },
    },
    //Dieser Schritt ist das CSS-Design meines Chatfensters. Sie müssen es nicht schreiben. Sie können bei Bedarf darauf zurückgreifen.
    // Ich speichere die empfangenen und gesendeten Nachrichten in obList und beobachte dann die Wertänderungen, um die Chat-Position unten zu halten (Überlauf: automatisch; in CSS)
    obList: {
      Handler: Funktion (Wert) {
        dies.$nextTick(() => {
          dies.$refs.chatContent.scrollTop = dies.$refs.chatContent.scrollHeight
        })
      },
    },
    sofort: wahr,
  },
  Methoden: {
    // Klicken Sie auf die Schaltfläche, um eine Chat-Verbindung herzustellen customerDialog() {
      initWebSocket(diese.wsUrl)
    },
    // Die Methode zum Empfangen der Socket-Rückruffunktion zum Zurückgeben von Daten. Diese Funktion wird aufgerufen, wenn ich die empfangenen Daten überwache (in der obigen Überwachung).
    getConfigResult(Wert) { },

 // Klicken Sie auf die Schaltfläche Senden, um die Nachricht zu senden. Das Format der zu sendenden Nachricht muss mit dem Backend-Befehl „sending()“ bestätigt werden. {
      sendSock('gesendete Nachricht')
    },
    // Behandeln Sie das Ereignis zum Schließen des Chatfensters handleClose() {
     //Verbindung schließen webSocketClose()
    },
  },
}
</Skript>