Entwickeln Sie in Echtzeit synchronisierte Webanwendungen mit Python und Vue.js

Mit der Beliebtheit von Webanwendungen und den steigenden Anforderungen an die Benutzererfahrung ist die Echtzeitsynchronisierung zu einem unverzichtbaren Merkmal moderner Webanwendungen geworden. In diesem Artikel stellen wir vor, wie man mit Python und Vue.js eine synchrone Echtzeit-Webanwendung entwickelt.

Um eine Echtzeitsynchronisierung zu erreichen, müssen wir einige moderne Webtechnologien verwenden, darunter WebSocket, asynchrone Programmierung und Front-End-Frameworks. Der folgende technische Stack wird in diesem Artikel verwendet:

• Python 3.6+
• Flask
• flask-Socketio
• gevent
• vue.js 2.0+
• Vuex
• socket.io-Client

Lassen Sie uns Schritt für Schritt vorstellen, wie Sie diese Technologien verwenden, um eine in Echtzeit synchronisierte Webanwendung zu implementieren.

1. Erstellen einer Flask-Anwendung

Zuerst müssen wir eine Flask-Anwendung erstellen. Wir können Flask mit dem Pip-Paketmanager von Python installieren:

pip install flask

Dann erstellen Sie eine app.py-Datei mit folgendem Inhalt:

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)

Dieser Code erstellt eine Flask-Anwendung und rendert einen Namen im Stammpfad, der die Vorlage für index.html darstellt . Wir werden diese Vorlage später erstellen. Darüber hinaus haben wir auch einen WebSocket-Server gestartet, damit wir ihn später für die Implementierung der Echtzeitsynchronisierung verwenden können.

2. Erstellen einer Vue.js-Anwendung

Als nächstes müssen wir eine Vue.js-Anwendung erstellen. Wir können das CLI-Tool von Vue verwenden, um schnell eine Vue.js-Anwendung zu erstellen. Der Befehl lautet wie folgt:

npm install -g @vue/cli
vue create client

Dadurch wird eine Vue.js-Anwendung namens client erstellt. Gehen Sie in das Anwendungsverzeichnis und installieren Sie die erforderlichen Abhängigkeiten:

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

Dann müssen wir einige Konfigurationen der Anwendung vornehmen. Öffnen Sie src/main.js und verwenden Sie den folgenden Code:

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

Im Code haben wir einige notwendige Module importiert und eine Socket-Instanz erstellt, damit wir uns in der Flask-Anwendung mit dem WebSocket-Server verbinden können.

3. Vuex-Store erstellen

Wir verwenden Vuex, um den Status der Anwendung zu verwalten. Daher müssen wir einen Store-Ordner und darin eine Datei „store.js“ mit dem folgenden Code erstellen:

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

Dieser Store enthält ein Nachrichtenfeld im Status und verfügt über eine Mutation zum Festlegen des Felds.

4. Vue-Komponenten erstellen

Jetzt können wir Vue-Komponenten erstellen, um den Nachrichtenstatus anzuzeigen und eine Echtzeitsynchronisierung zu erreichen. Wir werden die Emit- und On-Methoden des Sockets auf der Komponente verwenden, um eine Echtzeitsynchronisierung zu implementieren. Öffnen Sie die App.vue-Datei und verwenden Sie den folgenden Code:

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

Beachten Sie, dass wir die Emit- und On-Methoden des Sockets in der Vue-Komponente verwendet haben. Die emit-Methode wird verwendet, um Nachrichten an den Server zu senden, während die on-Methode verwendet wird, um vom Server gesendete Nachrichten zu empfangen und den angegebenen Rückruf auszuführen.

5. Erstellen Sie eine index.html-Vorlage.

Wir müssen auch eine index.html-Vorlage erstellen, um einen Einstiegspunkt für die Flask-Anwendung bereitzustellen. Öffnen Sie templates/index.html und verwenden Sie den folgenden Code:

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

Diese Vorlage enthält Vue Einstiegspunkt und stellt ein DOM-Element für die Vue-Anwendung zum Rendern von Inhalten bereit. Beachten Sie, dass die Vorlage auch eine statische Datei-URL enthält, auf die von der Flask-Anwendung verwiesen wird und die Skripte der Vue-Anwendung bereitstellt.

6. App ausführen

Da wir nun alle Einstellungen für die App vorgenommen haben, können wir sie mit dem folgenden Befehl starten:

python app.py

Öffnen Sie dann http://localhost:5000 in Ihrem Browser. Auf der Seite wird ein Eingabefeld angezeigt, in das Sie Text eingeben können. Wenn Sie zu einem anderen Browser wechseln und Text in das Eingabefeld eingeben, werden Sie außerdem feststellen, dass der gerade eingegebene Text auch hier synchronisiert wird!

Auf diese Weise haben wir erfolgreich einen Browser implementiert, der auf Python und Vue basiert. js Synchronisieren Sie Webanwendungen in Echtzeit. Dieses Modell verfügt über viele Anwendungsszenarien, beispielsweise Online-Chat-Anwendungen oder Anwendungen für die Zusammenarbeit mehrerer Personen.

Das obige ist der detaillierte Inhalt vonEntwickeln Sie in Echtzeit synchronisierte Webanwendungen mit Python und Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!