Comment créer des applications de chat et de messagerie instantanée en temps réel à l'aide de Vue ?

Ces dernières années, le chat en temps réel et la messagerie instantanée sont devenus un élément essentiel de la vie quotidienne et du travail des gens. Qu’il s’agisse des réseaux sociaux, de la collaboration en équipe ou du service client, tout cela nécessite une communication en temps réel pour fonctionner. Vue.js est un framework JavaScript adapté à la création d'applications de chat et de messagerie instantanée en temps réel. Cet article explique comment utiliser Vue pour créer une application de chat et de messagerie instantanée en temps réel.

1. Introduction à Vue et Socket.io

Vue est un framework JavaScript populaire qui peut aider les développeurs à gérer plus facilement les opérations DOM et la logique de liaison de données. . En tant que framework MVC, Vue fonctionne très bien dans les applications monopage, grâce à l'adaptabilité, l'efficacité et la puissance extrêmement élevées de Vue. Socket.io est un outil qui fournit une communication bidirectionnelle et événementielle en temps réel aux clients et aux serveurs basée sur WebSocket.

2. La combinaison de Vue et Socket.io

La création d'applications de chat en temps réel et de messagerie instantanée nécessite la combinaison de Vue et Socket.io. Dans Vue, nous pouvons gérer le statut des applications de chat en direct et de messagerie instantanée via vuex. Nous pouvons utiliser Vuex pour gérer les informations utilisateur, les informations de session, les messages, les notifications et autres données associées. Dans Socket.io, nous pouvons l'utiliser pour implémenter un mécanisme de communication en temps réel.

1. Installer Vue et Socket.io

Pour installer Vue et Socket.io, vous devez entrer la commande suivante dans l'outil de ligne de commande :

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

2. Utiliser Socket.io pour établir une connexion

Utiliser Socket.io pour établir une connexion nécessite l'introduction du socket.io- module client dans le client :

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

Dans cet exemple, nous établissons un socket nommé port 3000 connecté à l'hôte local (localhost). Ensuite, nous pouvons utiliser ce socket dans le composant Vue pour écouter et émettre des événements.

3. Écouter et envoyer des événements

Dans le composant Vue, nous pouvons utiliser la variable $socket pour introduire l'instance socket.io-client. Comme indiqué ci-dessous :

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

Dans cet exemple, nous écoutons un événement de connexion immédiatement après le montage du composant, et lorsque la connexion est réussie, nous verrons un message dans la console.

Nous pouvons également utiliser la méthode submit de socket pour envoyer des événements. Comme indiqué ci-dessous :

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

Dans cet exemple, nous définissons une méthode sendMessage et nous utilisons $socket.emit pour émettre un événement nommé message au serveur.

3. Implémentation de l'utilisation de Vue et Socket.io pour créer des applications de chat et de messagerie instantanée en temps réel

Nous pouvons utiliser Vue et Socket.io pour créer un application d'application de chat et de messagerie instantanée.

1. Create Vuex Store

Vuex Store est utilisé pour stocker les informations sur l'utilisateur, les informations de session, les messages et les notifications. Nous pouvons utiliser le code suivant pour. créez un Vuex Store :

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: {
  }
})

Dans cet exemple, nous définissons un état initial, des informations utilisateur, des informations de session, des messages et notifications, etc. Nous avons défini une série de mutations et d'actions pour exploiter les informations utilisateur, les informations de session, les messages, les notifications et autres états associés.

2. Créer un composant Vue

Nous pouvons utiliser Vue.js et Vuex Store pour créer un composant Chat.

<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>

Dans ce composant, nous utilisons la commande v-for pour boucler pour lier les salles et les messages, utilisons la commande v-model pour lier la zone de saisie et utilisons la commande @click pour lier l'envoi bouton. Nous utilisons également les fonctions mapState et mapActions pour mapper les états et les actions du magasin aux propriétés et méthodes calculées du composant. Lors du montage du composant, nous appelons la méthode connect pour initialiser la connexion Socket.io.

3. Implémentation de Socket.io côté serveur

Nous devons également implémenter Socket.io côté serveur pour une utilisation dans les applications Vue. Créez un serveur en utilisant le code suivant :

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: []
})

Dans cet exemple, nous créons un serveur HTTP à l'aide de Socket.io et écoutons les événements de connexion sur le serveur. Nous avons défini divers événements Socket.io tels que verifyUser, getRooms, selectRoom, message, etc.

Nous avons également ajouté quelques salles et utilisateurs initiaux. Pour chaque client qui se connecte au serveur, nous générons un message de connexion ; pour chaque événement de déconnexion client, nous enregistrons un message. Dans l'événement selectRoom, nous utilisons la méthode socket.join pour ajouter le client à la salle où nous voulons envoyer le message. Enfin, nous utilisons le tableau Rooms pour stocker les données de toutes les pièces et utilisons la méthode selectRoom du composant pour sélectionner la pièce à rejoindre.

4. Conclusion

En utilisant la combinaison de Vue et Socket.io, vous pouvez facilement créer des applications de chat et de messagerie instantanée connectées en temps réel et hautes performances, qui peuvent garantir des données en temps réel, ce qui améliore considérablement l'expérience utilisateur et l'efficacité du traitement des données. Grâce à l'optimisation de Vue et Socket.io, nous pouvons démarrer le développement plus rapidement, itérer rapidement les versions, et le temps réel et la stabilité des données sont mieux garantis.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!