Python と Vue.js を使用してリアルタイム同期 Web アプリケーションを開発する
- PHPzオリジナル
- 2023-06-17 08:28:361741ブラウズ
Web アプリケーションの人気とユーザー エクスペリエンス要件の継続的な改善により、リアルタイム同期は最新の Web アプリケーションに不可欠な機能になりました。この記事では、PythonとVue.jsを使ってリアルタイム同期Webアプリケーションを開発する方法を紹介します。
リアルタイム同期を実現するには、WebSocket、非同期プログラミング、フロントエンド フレームワークなどの最新の Web テクノロジを使用する必要があります。この記事で使用するテクノロジー スタックは次のとおりです:
- Python 3.6
- Flask
- Flask-SocketIO
- gevent
- Vue.js 2.0
- Vuex
- Socket.IO-client
これらのテクノロジーを使用して実際のアプリケーションを実装する方法を段階的に紹介します。時刻同期Webアプリケーション。
- Flask アプリケーションの作成
まず、Flask アプリケーションを作成する必要があります。 Python の pip パッケージ マネージャーを使用して Flask をインストールできます。
pip install flask
次に、次の内容を含む app.py ファイルを作成します。
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)このコードは、Flask アプリケーションと、index という名前のテンプレートを作成します。 html はルート パスにレンダリングされます。このテンプレートは後で作成します。さらに、後でリアルタイム同期を実装するために使用できるように、WebSocket サーバーも起動しました。
- Vue.js アプリケーションの作成
次に、Vue.js アプリケーションを作成する必要があります。 Vue の CLI ツールを使用して、Vue.js アプリケーションをすばやく作成できます。コマンドは次のとおりです:
npm install -g @vue/cli vue create client
これにより、client という名前の Vue.js アプリケーションが作成されます。アプリケーション ディレクトリに移動し、必要な依存関係をインストールします。
cd client npm install vue-socket.io vue-socket.io-extended socket.io-client vuex --save
次に、アプリケーションの構成を行う必要があります。 src/main.js を開き、次のコードを使用します。
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')コードでは、Flask アプリケーションで WebSocket サーバーに接続できるように、必要なモジュールをいくつかインポートし、ソケット インスタンスを作成しました。
- Vuex ストアの作成
Vuex を使用してアプリケーションの状態を管理します。したがって、次のコードを使用して、ストア フォルダーを作成し、その中に store.js ファイルを作成する必要があります。
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
}
}
})このストアには状態にメッセージ フィールドが含まれており、フィールドの設定にはミューテーションが使用されます。 。
- Vue コンポーネントの作成
これで、メッセージ ステータスを表示し、リアルタイム同期を実現するための Vue コンポーネントを作成できます。コンポーネントのソケットの Emit メソッドと on メソッドを使用して、リアルタイム同期を実装します。 App.vue ファイルを開き、次のコードを使用します。
<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>Vue コンポーネントでソケットの Emit メソッドと on メソッドを使用していることに注意してください。 Emit メソッドはサーバーにメッセージを送信するために使用され、on メソッドはサーバーから送信されたメッセージを受信し、指定されたコールバックを実行するために使用されます。
- index.html テンプレートの作成
Flask アプリケーションのエントリ ポイントを提供するために、index.html テンプレートを作成する必要もあります。templates/index.html を開き、次のコードを使用します:
<!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>このテンプレートには Vue のエントリ ポイントが含まれており、Vue アプリケーションがコンテンツをレンダリングするための DOM 要素を提供します。テンプレートには、Flask アプリケーションによって参照され、Vue アプリケーションのスクリプトを提供する静的ファイル URL も含まれていることに注意してください。
- アプリケーションの実行
アプリケーションのすべての設定が完了したので、次のコマンドを使用してアプリケーションを起動できます。
python app.py
次に、ブラウザで http://localhost:5000 を開きます。ページ上にテキストを入力できる入力ボックスが表示されます。それだけでなく、他のブラウザに切り替えて入力ボックスにテキストを入力すると、入力したばかりのテキストがここでも同期されていることがわかります!
このようにして、以下に基づいたテキストを実装することに成功しました。 Python と Vue.js のリアルタイム同期 Web アプリケーション。このモデルには、オンライン チャット アプリケーションや複数人のコラボレーション アプリケーションなど、多くのアプリケーション シナリオがあります。
以上がPython と Vue.js を使用してリアルタイム同期 Web アプリケーションを開発するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。