Une analyse de la façon d'obtenir une communication bidirectionnelle en temps réel côté serveur via Vue

Anatomie de la façon de mettre en œuvre une communication bidirectionnelle en temps réel côté serveur via Vue

Introduction :
Dans les applications Web modernes, la communication bidirectionnelle en temps réel côté serveur devient de plus en plus importante. Il peut réaliser des fonctions telles que la mise à jour des données en temps réel, le chat en temps réel et l'édition collaborative. Vue est un framework frontal populaire qui fournit un moyen concis de créer des interfaces utilisateur. Cet article explique comment utiliser Vue et Socket.io pour établir une communication bidirectionnelle en temps réel côté serveur.

1. Comprendre Socket.io
Socket.io est une bibliothèque JavaScript pour les navigateurs Web et les serveurs, qui offre des capacités de communication bidirectionnelle en temps réel. Il est construit sur Websockets, mais peut également rétrograder automatiquement vers d'autres transports tels que HTTP Long Polling. L'utilisation de Socket.io avec Vue peut être installée via npm.

2. Créer un projet Vue
Tout d'abord, nous devons créer un projet Vue. Entrez la commande suivante dans la ligne de commande :

vue create realtime-app
cd realtime-app

3. Installer les dépendances
Après être entré dans le dossier du projet, nous devons installer certaines dépendances nécessaires. Entrez la commande suivante dans la ligne de commande :

npm install socket.io-client

4. Établissez une connexion avec le serveur
Dans le répertoire racine du projet Vue, recherchez le dossier src et créez un fichier nommé socket.js. Dans ce fichier, nous établissons une connexion au serveur et exportons une instance Socket pour l'utiliser par d'autres composants. L'exemple de code est le suivant :

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

Dans le code ci-dessus, socket.io-client est introduit et l'adresse et le port du serveur sont modifiés en fonction de la situation réelle.

5. Utilisez Socket.io dans les composants Vue
Dans les composants Vue qui doivent utiliser Socket.io, nous pouvons introduire socket.js et utiliser export default pour exporter. Nous pouvons ensuite utiliser l'instance de socket dans le composant Vue pour écouter et envoyer des événements. Par exemple, nous pouvons écouter les événements et mettre à jour les données, ou envoyer des événements au serveur. L'exemple de code est le suivant :

// src/components/Realtime.vue
<template>
  <div>
    <h1 id="message">{{ message }}</h1>
    <input v-model="inputMessage" @keydown.enter="sendMessage" />
    <button @click="sendMessage">Send</button>
  </div>
</template>

<script>
import socket from '../socket.js'

export default {
  data() {
    return {
      message: '',
      inputMessage: ''
    }
  },
  mounted() {
    socket.on('message', (data) => {
      this.message = data
    })
  },
  methods: {
    sendMessage() {
      socket.emit('chat', this.inputMessage)
      this.inputMessage = ''
    }
  }
}
</script>

6. Paramètres côté serveur
Côté serveur, nous devons utiliser Node.js et Socket.io pour gérer la communication avec le front-end. Voici un exemple de code simple côté serveur :

// server.js
const app = require('http').createServer()
const io = require('socket.io')(app)

io.on('connection', (socket) => {
  console.log('A user connected')

  socket.on('chat', (message) => {
    console.log('Received message:', message)
    io.emit('message', message)
  })

  socket.on('disconnect', () => {
    console.log('A user disconnected')
  })
})

app.listen(3000, () => {
  console.log('Server is running on port 3000')
})

7. Démarrez l'application
Dans le répertoire racine du projet, exécutez la commande suivante pour démarrer l'application :

npm run serve

Ensuite, ouvrez le navigateur et visitez http:/ /localhost:8080, vous verrez une page avec des zones de saisie et des messages. Lorsque vous saisissez un message dans la zone de saisie et que vous l'envoyez, le message est transmis au serveur et mis à jour en temps réel dans le message sur la page.

Conclusion :
Avec Vue et Socket.io, nous pouvons facilement réaliser une communication bidirectionnelle en temps réel côté serveur. L'utilisation de Socket.io dans Vue peut écouter et envoyer des événements via un code simple, nous permettant de mettre à jour les données et d'interagir en temps réel. J'espère que cet article vous sera utile et vous permettra de mieux appliquer Vue pour obtenir une communication bidirectionnelle en temps réel côté serveur.

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!