Vue + Express + Socket realisiert Chat-Funktion

npm ich vue-socket.io --speichern

Importieren Sie VueSocketIO aus „vue-socket.io“.

npm ich socket.io --speichern

var io = erfordern('socket.io')(Server)'

io.on('Verbindung', (Socket) => {
  socket.on('Minenräumung', (Daten) => {
    konsole.log(Daten);
  });
});

<div Klasse="Startseite">
    Benutzer-ID: <input type="text" v-model="userid">
    Spitzname: <input type="text" v-model="name">
    Nachricht: <input type="text" v-model="msg" />
    <button @click="send">Senden</button>
    <button @click="join">Verbinden</button>
    <button @click="sendmsg">An angegebene Person senden</button>

    <ul>
      <li v-for="(Artikel,Index) in Chatliste" :Schlüssel="Artikelname + Index">
        {{ item.name }} sagt: {{ item.msg }}
      </li>
    </ul>
</div>

Standard exportieren {
  Name: "Home",
  Daten() {
    zurückkehren {
      Benutzer: [],
      Nachricht: "",
      Chatliste: [],
      Name: '',
      Benutzer-ID: ''
    };
  },
  Steckdosen: {
    // Mit dem Hintergrund-Socket verbinden
    verbinden() {
      console.log('Socket verbunden');
    },
    // Benutzer-Hintergrundaufruf, Daten hinzufügen sendMessage(data) {
      konsole.log(Daten);
      this.chatList.push(Daten)
    },
    // Benutzer-Hintergrundaufruf, Daten drucken receivemsg(data) {
      console.log('Empfangsnachricht');
      konsole.log(Daten);
    }
  },
  Methoden: {
    // Sende eine Nachricht in den Hintergrund send() {
      //Verwende emit, um die Nachrichtenmethode im Hintergrund-Socket aufzurufen this.$socket.emit("message", {
        Benutzer-ID: 100,
        Name: dieser.Name,
        Nachricht: diese.Nachricht
      });
    },
    // Benutzerverbindung herstellen join() {
      dies.$socket.emit("beitreten", {
        Benutzer-ID: diese.Benutzer-ID
      });
    },
    // Senden Sie eine Nachricht an das Backend für private Nachrichten sendmsg() {
      dies.$socket.emit("sendmsg", {
        Benutzer-ID: diese.Benutzer-ID,
        Nachricht: diese.Nachricht
      });
    }
  }
};

// Wird verwendet, um den Socket jedes Benutzers zu speichern, um die private Chat-Funktion zu implementieren let arrAllSocket = {}
// Eine Socket-Verbindung herstellen io.on('connection', (socket) => {
  console.log('Verbunden');
  // Konsole.log(Socket);
  // Die Join-Funktion wird von Benutzern zum Herstellen einer Verbindung verwendet socket.on('join', function (obj) {
    Konsole.log(Obj.Benutzer-ID + "beitreten")
    // Speichere den Verbindungsstatus jedes Benutzers für private Nachrichten arrAllSocket[obj.userid] = socket
  })
  // Der Funktionsname zum Empfangen von Nachrichten, die vom Vordergrund gesendet werden, lautet message
  socket.on('Nachricht', (Daten) => {
    konsole.log(Daten);
    //Senden Sie die Nachricht zurück an die Rezeption (rufen Sie die in der Rezeption definierte Methode auf). Der Funktionsname lautet sendMessage
    io.emit('sendMessage', Daten);
  });
  // Private Nachricht socket.on('sendmsg', function (data) {
    konsole.log(Daten);
    // Benutzerverbindung abfragen let target = arrAllSocket[data.userid]
    wenn (Ziel) {
      //Senden Sie eine Nachricht an die angegebene Person target.emit('receivemsg', data)
    }
  })
})

// Übergebe den Server als Parameter an module.exports = function (server) {
  var io = erfordern('socket.io')(Server);
// Wird verwendet, um den Socket jedes Benutzers zu speichern, um die private Chat-Funktion zu implementieren. let arrAllSocket = {}
// Eine Socket-Verbindung herstellen io.on('connection', (socket) => {
    console.log('Verbunden');
    // Konsole.log(Socket);
    // Die Join-Funktion wird von Benutzern zum Herstellen einer Verbindung verwendet socket.on('join', function (obj) {
      Konsole.log(Obj.Benutzer-ID + "beitreten")
      // Speichere den Verbindungsstatus jedes Benutzers für private Nachrichten arrAllSocket[obj.userid] = socket
    })
    // Der Funktionsname zum Empfangen von Nachrichten, die vom Vordergrund gesendet werden, lautet message
    socket.on('Nachricht', (Daten) => {
      konsole.log(Daten);
      //Senden Sie die Nachricht zurück an die Rezeption (rufen Sie die in der Rezeption definierte Methode auf). Der Funktionsname lautet sendMessage
      io.emit('sendMessage', Daten);
    });
    // Private Nachricht socket.on('sendmsg', function (data) {
      konsole.log(Daten);
      // Benutzerverbindung abfragen let target = arrAllSocket[data.userid]
      wenn (Ziel) {
        //Senden Sie eine Nachricht an die angegebene Person target.emit('receivemsg', data)
      }
    })
  })
}

var io = erfordern('../io')
io(Server)