Développer des applications Web synchronisées en temps réel à l'aide de Python et Vue.js

Avec la popularité des applications Web et les exigences croissantes en matière d'expérience utilisateur, la synchronisation en temps réel est devenue une fonctionnalité indispensable des applications Web modernes. Dans cet article, nous présenterons comment développer une application Web synchrone en temps réel à l'aide de Python et Vue.js.

Afin d'obtenir une synchronisation en temps réel, nous devons utiliser certaines technologies Web modernes, notamment WebSocket, la programmation asynchrone et les frameworks front-end. Ce qui suit est la pile technique qui sera utilisée dans cet article:

• python 3.6 +
• flask
• flask-socketo
• gevent
• vue.js 2.0 +
• vuex
• socket.io-clilient

Présentons étape par étape comment utiliser ces technologies pour implémenter une application Web synchronisée en temps réel.

1. Création d'une application Flask

Tout d'abord, nous devons créer une application Flask. Nous pouvons installer Flask à l'aide du gestionnaire de packages pip de Python :

pip install flask

Ensuite, créez un fichier app.py avec le contenu suivant :

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    socketio.run(app)

Ce code crée une application Flask et affiche un nom sur le chemin racine est le modèle pour index.html . Nous créerons ce modèle plus tard. De plus, nous avons également démarré un serveur WebSocket afin de pouvoir l'utiliser ultérieurement pour implémenter la synchronisation en temps réel.

2. Création d'une application Vue.js

Ensuite, nous devons créer une application Vue.js. Nous pouvons utiliser l'outil CLI de Vue pour créer rapidement une application Vue.js. La commande est la suivante :

npm install -g @vue/cli
vue create client

Cela créera une application Vue.js nommée client. Allez dans le répertoire de l'application et installez les dépendances nécessaires :

cd client
npm install vue-socket.io vue-socket.io-extended socket.io-client vuex --save

Ensuite, nous devons faire une configuration de l'application. Ouvrez src/main.js et utilisez le code suivant :

import Vue from 'vue'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io-extended'
import io from 'socket.io-client'
import Vuex from 'vuex'
import {store} from './store/store'

Vue.use(Vuex)

const socket = io(`${window.location.hostname}:5000`)

Vue.use(VueSocketIO, socket, {store})

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

Dans le code, nous avons importé certains modules nécessaires et créé une instance de socket afin que nous puissions nous connecter au serveur WebSocket dans l'application Flask.

3. Créer une boutique Vuex

Nous utilisons Vuex pour gérer l'état de l'application. Par conséquent, nous devons créer un dossier de magasin et y créer un fichier store.js, en utilisant le code suivant :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    SET_MESSAGE(state, payload) {
      state.message = payload
    }
  }
})

Ce magasin contient un champ de message dans l'état et a une mutation pour définir le champ.

4. Créer des composants Vue

Nous pouvons désormais créer des composants Vue pour afficher l'état des messages et réaliser une synchronisation en temps réel. Nous utiliserons les méthodes submit et on du socket sur le composant pour implémenter la synchronisation en temps réel. Ouvrez le fichier App.vue et utilisez le code suivant :

<template>
  <div class="container">
    <h1>{{ message }}</h1>
    <input v-model="input" type="text">
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      input: ''
    }
  },
  computed: {
    message() {
      return this.$store.state.message
    }
  },
  methods: {
    sendMessage() {
      this.$socket.emit('message', this.input)
    }
  },
  sockets: {
    message(payload) {
      this.$store.commit('SET_MESSAGE', payload)
    }
  }
}
</script>

<style>
.container {
  margin: 100px auto;
  text-align: center;
}
</style>

Notez que nous avons utilisé les méthodes submit et on du socket dans le composant Vue. La méthode submit est utilisée pour envoyer des messages au serveur, tandis que la méthode on est utilisée pour recevoir les messages envoyés par le serveur et exécuter le rappel spécifié.

5. Créer un modèle index.html

Nous devons également créer un modèle index.html pour fournir un point d'entrée pour l'application Flask. Ouvrez templates/index.html et utilisez le code suivant :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Socket.IO Application</title>
</head>
<body>
  <div id="app"></div>
  <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>

Ce modèle contient Vue. Point d'entrée et fournit un élément DOM permettant à l'application Vue de restituer le contenu. Notez que le modèle comprend également une URL de fichier statique qui sera référencée par l'application Flask et servira les scripts de l'application Vue.

6. Exécuter l'application

Maintenant que nous avons tous les paramètres de l'application, nous pouvons la démarrer en utilisant la commande suivante :

python app.py

Ensuite, ouvrez http://localhost:5000 dans votre navigateur. Vous verrez une zone de saisie sur la page où vous pourrez saisir du texte. De plus, lorsque vous passez à un autre navigateur et saisissez du texte dans la zone de saisie, vous constaterez que le texte que vous venez de saisir est également synchronisé ici !

De cette façon, nous avons implémenté avec succès un navigateur basé sur Python et Vue. js Synchronisez les applications Web en temps réel. Ce modèle propose de nombreux scénarios d'application, tels que des applications de chat en ligne ou des applications de collaboration multi-personnes.

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!