Python 및 Vue.js를 사용하여 실시간 동기화된 웹 애플리케이션 개발
- PHPz원래의
- 2023-06-17 08:28:361793검색
웹 애플리케이션의 인기와 사용자 경험에 대한 요구 사항이 증가함에 따라 실시간 동기화는 최신 웹 애플리케이션에서 없어서는 안 될 기능이 되었습니다. 이 글에서는 Python과 Vue.js를 사용하여 실시간 동기식 웹 애플리케이션을 개발하는 방법을 소개합니다.
실시간 동기화를 달성하려면 WebSocket, 비동기 프로그래밍 및 프런트엔드 프레임워크를 포함한 일부 최신 웹 기술을 사용해야 합니다. 다음은 이 문서에서 사용될 기술 스택입니다:
- Python 3.6+
- Flask
- flask-Socketio
- gevent
- vue.js 2.0+
- Vuex
- socket.io-Client
이러한 기술을 사용하여 실시간 동기화 웹 애플리케이션을 구현하는 방법을 단계별로 소개하겠습니다.
- 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 서버에 연결할 수 있도록 필요한 모듈을 가져오고 소켓 인스턴스를 만들었습니다.
- Create Vuex store
우리는 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 구성 요소를 만들어 메시지 상태를 표시하고 실시간 동기화를 달성할 수 있습니다. 실시간 동기화를 구현하기 위해 구성 요소의 소켓 방출 및 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 구성 요소에서 소켓의 방출 및 on 메서드를 사용했다는 점에 유의하세요. Emit 메소드는 서버에 메시지를 보내는 데 사용되며, on 메소드는 서버에서 보낸 메시지를 수신하고 지정된 콜백을 실행하는 데 사용됩니다.
- index.html 템플릿 만들기
또한 Flask 애플리케이션에 대한 진입점을 제공하기 위해 index.html 템플릿을 만들어야 합니다. template/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 기반의 브라우저를 성공적으로 구현했습니다. Node.js 웹 애플리케이션을 실시간으로 동기화합니다. 이 모델에는 온라인 채팅 애플리케이션이나 다중 사용자 공동 작업 애플리케이션과 같은 다양한 애플리케이션 시나리오가 있습니다.
위 내용은 Python 및 Vue.js를 사용하여 실시간 동기화된 웹 애플리케이션 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!