Vue verwendet WebSocket, um die Chat-Funktion zu simulieren

var userNum = 0; //Anzahl der Online-Benutzer zählen var chatList = []; //Chatverlauf aufzeichnen var WebSocketServer = require('ws').Server;
wss = new WebSocketServer({ port: 8181 }); //8181 entspricht dem Front-End //Rufen Sie Broadcast auf, um Datenkommunikation und Echtzeit-Update zu erreichen wss.broadcast = function (msg) {
    wss.clients.forEach(Funktion each(Client) {
        client.send(msg);
    });
};
wss.on('Verbindung', Funktion (ws) {
    userNum++; //Verbindung erfolgreich hergestellt, Anzahl der Personen online +1
    wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList })); //Bei erfolgreicher Verbindung wird die Anzahl der Personen gesendet, die derzeit online sind. console.log('Verbundene Clients:', userNum);
    //Vom Frontend gesendete Daten empfangen ws.on('message', function (e) {
        var resData = JSON.parse(e)
        console.log('Nachricht vom Client erhalten:' + resData.msg)
        chatList.push({ userId: resData.userId, content: resData.msg }); //Jedes Mal, wenn eine Nachricht gesendet wird, wird sie gespeichert und dann gesendet, sodass jeder eingehende Benutzer die vorherigen Daten sehen kann wss.broadcast(JSON.stringify({ userId: resData.userId, msg: resData.msg })); //Jede gesendete Nachricht entspricht dem Senden einer Nachricht });
    ws.on('schließen', Funktion (e) {
        userNum--; //Verbindung herstellen und Anzahl der Online-Personen schließen - 1
        wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList })); //Verbindung herstellen und Broadcast einmal schließen. Aktuelle Anzahl der Online-Clients console.log('Verbundene Clients:', userNum);
        console.log('Lange Verbindung geschlossen')
    })
})
console.log('Server erfolgreich erstellt')

<Vorlage>
  <div Klasse="Chatbox">
    <header>Anzahl der Personen im Chatroom: {{count}}</header>
    <div Klasse="msg-box" ref="msg-box">
      <div
        v-for="(i,index) in Liste"
        :Schlüssel="Index"
        Klasse="Nachricht"
        :style="i.userId == Benutzer-Id?'flex-direction:row-reverse':''"
      >
        <div Klasse="Benutzerkopf">
          <div
            Klasse="Kopf"
            :style="`Hintergrund: hsl(${getUserHead(i.userId,'bck')}, 88%, 62%); Clip-Pfad: Polygon(${getUserHead(i.userId,'polygon')}% 0,100% 100%,0% 100%); Transformieren: Drehen(${getUserHead(i.userId,'rotate')}Grad)`"
          ></div>
        </div>
        <div Klasse="Benutzernachricht">
          <span
            :style="i.userId == Benutzer-Id?'float: right':''"
            :Klasse="i.userId == Benutzer-ID?'rechts':'links'"
          >{{i.inhalt}}</span>
        </div>
      </div>
    </div>
    <div Klasse="Eingabefeld">
      <input type="text" ref="sendMsg" v-model="contentText" @keyup.enter="sendText()" />
      <div class="btn" :class="{['btn-active']:contentText}" @click="sendText()">Senden</div>
    </div>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      ws: null,
      Anzahl: 0,
      userId: null, //Aktuelle Benutzer-ID
      Liste: [], //Array von Chat-Aufzeichnungen contentText: "", //Eingabewert};
  },
  erstellt() {
    dies.getUserID();
  },
  montiert() {
    dies.initWebSocket();
  },
  Methoden: {
    //Verwende den Zeitstempel als aktuelle Benutzer-ID
    getUserID() {
      let Zeit = neues Date().getTime();
      diese.userId = Zeit;
    },
    //Erstelle einen zufälligen Avatar basierend auf der Benutzer-ID getUserHead(id, type) {
      sei ID = String(id);
      wenn (Typ == "bck") {
        gibt Nummer zurück (ID.Teilzeichenfolge (ID.Länge - 3));
      }
      wenn (Typ == "Polygon") {
        gibt Nummer zurück (ID.Teilzeichenfolge (ID.Länge - 2));
      }
      wenn (Typ == "rotieren") {
        gibt Nummer zurück (ID.Teilzeichenfolge (ID.Länge - 3));
      }
    },
    //Leiste nach unten scrollen scrollBottm() {
      Lassen Sie el = dies.$refs["msg-box"];
      el.scrollTop = el.scrollHeight;
    },
    //Chatnachricht senden sendText() {
      lass _this = dies;
      _this.$refs["sendMsg"].focus();
      wenn (!_dieser.Inhaltstext) {
        zurückkehren;
      }
      let Parameter = {
        Benutzer-ID: _this.userId,
        Nachricht: _dieser.Inhaltstext,
      };
      _this.ws.send(JSON.stringify(params)); //Rufen Sie WebSocket send() auf, um Informationen zu senden _this.contentText = "";
      setzeTimeout(() => {
        _this.scrollBottm();
      }, 500);
    },
    //Gehe zur Seite, um eine WebSocket-Verbindung herzustellen initWebSocket() {
      lass _this = dies;
      //Beurteilen Sie, ob auf der Seite eine WebSocket-Verbindung besteht, if (window.WebSocket) {
        // Die Portnummer :8181 sollte hier mit der Backend-Konfiguration übereinstimmen let ws = new WebSocket("ws://192.168.5.42:9502"); 
        // let ws = new WebSocket("ws://192.168.5.8:8181"); //Hier ist mein lokales test_this.ws = ws;
        ws.onopen = Funktion (e) {
          console.log("Serververbindung erfolgreich");
        };
        ws.onclose = Funktion (e) {
          console.log("Serververbindung geschlossen");
        };
        ws.onerror = Funktion () {
          console.log("Serververbindungsfehler");
        };
        ws.onmessage = Funktion (e) {
          //Vom Server zurückgegebene Daten empfangen let resData = JSON.parse(e.data);
          if (resData.funName == "Benutzeranzahl") {
            _this.count = resData.Benutzer;
            _this.list = resData.chat;
          } anders {
            _diese.liste = [
              ..._diese.Liste,
              { Benutzer-ID: resData.userId, Inhalt: resData.msg },
            ];
          }
        };
      }
    },
  },
};
</Skript>
 
<style lang="scss" scoped>
.chat-box {
  Rand: 0 automatisch;
  Hintergrund: #fafafa;
  Position: absolut;
  Höhe: 100%;
  Breite: 100 %;
  // maximale Breite: 700px;
  Kopfzeile {
    Position: fest;
    Breite: 100 %;
    Höhe: 3rem;
    Hintergrund: #409eff;
    // maximale Breite: 700px;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Schriftstärke: fett;
    Farbe: weiß;
    Schriftgröße: 1rem;
  }
  .msg-box {
    Position: absolut;
    Höhe: berechnet (100 % – 6,5 rem);
    Breite: 100 %;
    Rand oben: 3rem;
    Überlauf-y: scrollen;
    .msg {
      Breite: 95 %;
      Mindesthöhe: 2,5 rem;
      Rand: 1rem 0,5rem;
      Position: relativ;
      Anzeige: Flex;
      Inhalt begründen: Flex-Start !wichtig;
      .Benutzerkopf {
        Mindestbreite: 2,5 rem;
        Breite: 20 %;
        Breite: 2,5rem;
        Höhe: 2,5rem;
        Randradius: 50 %;
        Hintergrund: #f1f1f1;
        Anzeige: Flex;
        Inhalt ausrichten: zentriert;
        Elemente ausrichten: zentrieren;
        .Kopf {
          Breite: 1,2rem;
          Höhe: 1,2rem;
        }
        // Position: absolut;
      }
      .Benutzernachricht {
        Breite: 80%;
        // Position: absolut;
        Wörtertrennung: alles trennen;
        Position: relativ;
        Z-Index: 5;
        Spanne {
          Anzeige: Inline-Block;
          Polsterung: 0,5rem 0,7rem;
          Randradius: 0,5rem;
          Rand oben: 0,2rem;
          Schriftgröße: 0,88rem;
        }
        .links {
          Hintergrund: weiß;
          Animation: nach links 0,5 s, beide 1;
        }
        .Rechts {
          Hintergrund: #53a8ff;
          Farbe: weiß;
          Animation: nach rechts 0,5 s Pause, beide 1;
        }
        @keyframes nach links {
          0% {
            Deckkraft: 0;
            transformieren: übersetzenX(-10px);
          }
          100 % {
            Deckkraft: 1;
            transformieren: übersetzenX(0px);
          }
        }
        @keyframes nach rechts {
          0% {
            Deckkraft: 0;
            transformieren: übersetzenX(10px);
          }
          100 % {
            Deckkraft: 1;
            transformieren: übersetzenX(0px);
          }
        }
      }
    }
  }
  .Eingabefeld {
    Polsterung: 0 0,5rem;
    Position: absolut;
    unten: 0;
    Breite: 97%;
    Höhe: 3,5rem;
    Hintergrund: #fafafa;
    Kastenschatten: 0 0 5px #ccc;
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    Elemente ausrichten: zentrieren;
    Eingabe {
      Höhe: 2,3rem;
      Anzeige: Inline-Block;
      Breite: 100 %;
      Polsterung: 0,5rem;
      Rand: keiner;
      Randradius: 0,2rem;
      Schriftgröße: 0,88rem;
    }
    .btn {
      Höhe: 2,3rem;
      Mindestbreite: 4rem;
      Hintergrund: #e0e0e0;
      Polsterung: 0,5rem;
      Schriftgröße: 0,88rem;
      Farbe: weiß;
      Textausrichtung: zentriert;
      Randradius: 0,2rem;
      Rand links: 0,5rem;
      Übergang: 0,5 s;
      Zeilenhöhe: 2,3rem;
    }
    .btn-aktiv {
      Hintergrund: #409eff;
    }
  }
}
</Stil>