Python と Vue.js を使用してリアルタイム同期 Web アプリケーションを開発する-Python チュートリアル-php.cn

Python と Vue.js を使用してリアルタイム同期 Web アプリケーションを開発する

PHPz

リリース： 2023-06-17 08:28:36

オリジナル

1807 人が閲覧しました

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 も含まれていることに注意してください。