Wie erstellt man mit Vue Echtzeit-Chat- und Instant-Messaging-Anwendungen?-View.js-php.cn

In den letzten Jahren sind Echtzeit-Chat und Instant Messaging zu einem wesentlichen Bestandteil des täglichen Lebens und der Arbeit der Menschen geworden. Ganz gleich, ob es sich um soziale Medien, Teamzusammenarbeit oder Kundenservice handelt, alles benötigt zur Unterstützung Echtzeitkommunikation. Vue.js ist ein JavaScript-Framework, das zum Erstellen von Echtzeit-Chat- und Instant-Messaging-Anwendungen geeignet ist. In diesem Artikel wird erläutert, wie Sie mit Vue eine Echtzeit-Chat- und Instant-Messaging-Anwendung erstellen.

1. Einführung in Vue und Socket.io

Vue ist ein beliebtes JavaScript-Framework, das Entwicklern dabei helfen kann, DOM-Operationen und Datenbindungslogik einfacher zu handhaben. Als MVC-Framework schneidet Vue dank der extremen Anpassungsfähigkeit, Effizienz und Leistungsfähigkeit von Vue sehr gut in Single-Page-Anwendungen ab. Socket.io ist ein Tool, das eine bidirektionale, ereignisgesteuerte Kommunikation in Echtzeit mit Clients und Servern auf Basis von WebSocket ermöglicht.

2. Die Kombination von Vue und Socket.io

Der Aufbau von Echtzeit-Chat- und Instant-Messaging-Anwendungen erfordert die Kombination von Vue und Socket.io. In Vue können wir den Status in Live-Chat- und Instant-Messaging-Anwendungen über Vuex verwalten. Wir können Vuex verwenden, um Benutzerinformationen, Sitzungsinformationen, Nachrichten, Benachrichtigungen und andere damit verbundene Daten zu verwalten. In Socket.io können wir damit einen Echtzeit-Kommunikationsmechanismus implementieren.

Installieren Sie Vue und Socket.io.

Die Installation von Vue und Socket.io erfordert die Eingabe des folgenden Befehls in das Befehlszeilentool:

npm install --save vue
npm install --save socket.io-client

Nach dem Login kopieren

Verwenden Sie Socket.io, um eine Verbindung herzustellen.

Verwenden Sie Socket.io, um eine Verbindung herzustellen Für eine Verbindung ist der Client erforderlich. Führen Sie das Modul socket.io-client in das Terminal ein:

import io from 'socket.io-client'
const socket = io('http://localhost:3000')

Nach dem Login kopieren

In diesem Beispiel richten wir einen Socket mit dem Namen socket ein, der mit Port 3000 des lokalen Hosts (localhost) verbunden ist. Als nächstes können wir diesen Socket in der Vue-Komponente verwenden, um Ereignisse abzuhören und auszugeben.

Ereignisse abhören und senden

In der Vue-Komponente können wir die Variable $socket verwenden, um die socket.io-client-Instanz einzuführen. Wie unten gezeigt:

mounted() {
  this.$socket.on('connect', () => {
    console.log('Connected to server!')
  })
}

Nach dem Login kopieren

In diesem Beispiel hören wir unmittelbar nach dem Mounten der Komponente auf ein Verbindungsereignis, und wenn die Verbindung erfolgreich ist, sehen wir eine Meldung in der Konsole.

Wir können auch die Emit-Methode von Socket verwenden, um Ereignisse zu senden. Wie unten gezeigt:

methods: {
  sendMessage() {
    this.$socket.emit('message', this.message)
  }
}

Nach dem Login kopieren

In diesem Beispiel definieren wir eine sendMessage-Methode und verwenden $socket.emit, um ein Ereignis namens message an den Server zu senden.

3. Implementierung der Erstellung von Echtzeit-Chat- und Instant-Messaging-Anwendungen mit Vue und Socket.io

Wir können Vue und Socket.io verwenden, um eine Echtzeit-Chat- und Instant-Messaging-Anwendung zu erstellen.

Vuex Store erstellen

Vuex Store wird zum Speichern von Benutzerinformationen, Sitzungsinformationen, Nachrichten und Benachrichtigungen verwendet. Wir können den folgenden Code verwenden, um einen Vuex Store zu erstellen:

import Vue from 'vue'
import Vuex from 'vuex'
import io from 'socket.io-client'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: {
      id: null,
      name: null
    },
    rooms: [],
    activeRoomId: null,
    messages: []
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setRooms(state, rooms) {
      state.rooms = rooms
    },
    setActiveRoomId(state, roomId) {
      state.activeRoomId = roomId
    },
    addMessage(state, message) {
      state.messages.push(message)
    },
    clearMessages(state) {
      state.messages = []
    }
  },
  actions: {
    connect({ commit, dispatch }) {
      const socket = io('http://localhost:3000')

      socket.on('connect', () => {
        console.log('Connected to server!')
      })

      socket.on('user', (user) => {
        commit('setUser', user)
      })

      socket.on('rooms', (rooms) => {
        commit('setRooms', rooms)
      })

      socket.on('activeRoomId', (roomId) => {
        commit('setActiveRoomId', roomId)
      })

      socket.on('message', (message) => {
        commit('addMessage', message)
      })

      socket.on('clearMessages', () => {
        commit('clearMessages')
      })

      socket.on('disconnect', () => {
        console.log('Disconnected from server!')
      })
    },
    sendMessage({ state }, message) {
      const socket = io('http://localhost:3000')

      const payload = {
        roomId: state.activeRoomId,
        message
      }

      socket.emit('message', payload)
    }
  },
  modules: {
  }
})

Nach dem Login kopieren

In diesem Beispiel definieren wir einen Anfangszustand. Benutzerinformationen, Sitzungsinformationen, Nachrichten und Benachrichtigungen usw. Wir haben eine Reihe von Mutationen und Aktionen für den Betrieb von Benutzerinformationen, Sitzungsinformationen, Nachrichten, Benachrichtigungen und anderen damit verbundenen Zuständen definiert.

Vue-Komponente erstellen

Wir können Vue.js und Vuex Store verwenden, um eine Chat-Komponente zu erstellen.

<template>
  <div class="chat">
    <div class="chat__user">
      <h2>{{ user.name }}</h2>
    </div>
    <div class="chat__rooms">
      <ul>
        <li v-for="room in rooms" :key="room.id" @click="selectRoom(room.id)">
          {{ room.name }}
        </li>
      </ul>
    </div>
    <div class="chat__messages">
      <ul>
        <li v-for="message in messages" :key="message.id">
          {{ message.text }}
        </li>
      </ul>
    </div>
    <div class="chat__input">
      <input type="text" v-model="message">
      <button @click="sendMessage()">Send</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Chat',
  computed: {
    ...mapState(['user', 'rooms', 'activeRoomId', 'messages']),
  },
  methods: {
    ...mapActions(['connect', 'sendMessage', 'selectRoom']),
  },
  mounted() {
    this.connect()
  }
}
</script>

Nach dem Login kopieren

In dieser Komponente verwenden wir den Befehl v-for zum Schleifen, um Räume und Nachrichten zu binden, verwenden den Befehl v-model, um das Eingabefeld zu binden, und verwenden den Befehl @click, um die Schaltfläche „Senden“ zu binden. Wir verwenden außerdem die Funktionen „mapState“ und „mapActions“, um die Zustände und Aktionen im Speicher den berechneten Eigenschaften und Methoden der Komponente zuzuordnen. Beim Mounten der Komponente rufen wir die Connect-Methode auf, um die Socket.io-Verbindung zu initialisieren.

Socket.io auf der Serverseite implementieren

Wir müssen Socket.io auch auf der Serverseite für die Verwendung in der Vue-Anwendung implementieren. Erstellen Sie einen Server mit dem folgenden Code:

const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)

const PORT = 3000

http.listen(PORT, () => {
  console.log(`Server started on port ${PORT}`)
})

let users = []
let rooms = []

io.on('connection', (socket) => {
  console.log('Client connected!', socket.id)

  socket.on('verifyUser', (user) => {
    console.log('Verifying user', user)

    const authenticatedUser = {
      id: socket.id,
      name: 'Mike'
    }

    socket.emit('user', authenticatedUser)
  })

  socket.on('getRooms', () => {
    socket.emit('rooms', rooms)
  })

  socket.on('selectRoom', (roomId) => {
    socket.join(roomId)
    socket.emit('activeRoomId', roomId)
    socket.emit('clearMessages')

    const room = rooms.find(room => room.id === roomId)
    socket.emit('messages', room.messages)
  })

  socket.on('message', (payload) => {
    const room = rooms.find(room => room.id === payload.roomId)

    const message = {
      id: Date.now(),
      text: payload.message
    }

    room.messages.push(message)

    io.in(payload.roomId).emit('message', message)
  })

  socket.on('disconnect', () => {
    console.log('Client disconnected!', socket.id)
  })
})

rooms.push({
  id: '1',
  name: 'Room 1',
  messages: []
})

rooms.push({
  id: '2',
  name: 'Room 2',
  messages: []
})

Nach dem Login kopieren

In diesem Beispiel erstellen wir einen HTTP-Server mit Socket.io und warten auf Verbindungsereignisse auf dem Server. Wir haben verschiedene Socket.io-Ereignisse definiert, z. B. „VerifyUser“, „getRooms“, „selectRoom“, „message“ usw.

Wir haben auch einige erste Räume und Benutzer hinzugefügt. Für jeden Client, der eine Verbindung zum Server herstellt, geben wir eine Verbindungsmeldung aus. Für jedes Client-Trennungsereignis protokollieren wir eine Meldung. Im SelectRoom-Ereignis verwenden wir die Methode socket.join, um den Client dem Raum hinzuzufügen, in den wir die Nachricht senden möchten. Schließlich verwenden wir das Array „Rooms“, um die Daten aller Räume zu speichern, und verwenden die Methode „selectRoom“ der Komponente, um den Raum auszuwählen, dem wir beitreten möchten.

IV. Fazit

Durch die Kombination von Vue und Socket.io können Sie auf einfache Weise leistungsstarke, in Echtzeit verbundene Chat- und Instant-Messaging-Anwendungen erstellen, die die Echtzeitqualität von Daten gewährleisten und die Benutzerfreundlichkeit erheblich verbessern können Erfahrung und Datenverarbeitungseffizienz. Durch die Optimierung von Vue und Socket.io können wir schneller mit der Entwicklung beginnen, Versionen schneller iterieren und die Echtzeit und Stabilität der Daten werden besser gewährleistet.

Das obige ist der detaillierte Inhalt vonWie erstellt man mit Vue Echtzeit-Chat- und Instant-Messaging-Anwendungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!