> 백엔드 개발 > 파이썬 튜토리얼 > Python 및 Vue.js를 사용하여 실시간 동기화된 웹 애플리케이션 개발

Python 및 Vue.js를 사용하여 실시간 동기화된 웹 애플리케이션 개발

PHPz
풀어 주다: 2023-06-17 08:28:36
원래의
1891명이 탐색했습니다.

웹 애플리케이션의 인기와 사용자 경험에 대한 요구 사항이 증가함에 따라 실시간 동기화는 최신 웹 애플리케이션에서 없어서는 안 될 기능이 되었습니다. 이 글에서는 Python과 Vue.js를 사용하여 실시간 동기식 웹 애플리케이션을 개발하는 방법을 소개합니다.

실시간 동기화를 달성하려면 WebSocket, 비동기 프로그래밍 및 프런트엔드 프레임워크를 포함한 일부 최신 웹 기술을 사용해야 합니다. 다음은 이 문서에서 사용될 기술 스택입니다:

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

이러한 기술을 사용하여 실시간 동기화 웹 애플리케이션을 구현하는 방법을 단계별로 소개하겠습니다.

  1. Flask 애플리케이션 만들기

먼저 Flask 애플리케이션을 만들어야 합니다. Python의 pip 패키지 관리자를 사용하여 Flask를 설치할 수 있습니다.

1

pip install flask

로그인 후 복사

그런 다음 다음 콘텐츠로 app.py 파일을 만듭니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

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 서버도 시작했습니다.

  1. Vue.js 애플리케이션 만들기

다음으로 Vue.js 애플리케이션을 만들어야 합니다. Vue의 CLI 도구를 사용하여 Vue.js 애플리케이션을 빠르게 생성할 수 있습니다. 명령은 다음과 같습니다.

1

2

npm install -g @vue/cli

vue create client

로그인 후 복사

이렇게 하면 client라는 Vue.js 애플리케이션이 생성됩니다. 애플리케이션 디렉토리로 이동하여 필요한 종속성을 설치합니다.

1

2

cd client

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

로그인 후 복사

그런 다음 애플리케이션의 일부 구성을 수행해야 합니다. src/main.js를 열고 다음 코드를 사용하세요.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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 서버에 연결할 수 있도록 필요한 모듈을 가져오고 소켓 인스턴스를 만들었습니다.

  1. Create Vuex store

우리는 Vuex를 사용하여 애플리케이션의 상태를 관리합니다. 따라서 다음 코드를 사용하여 스토어 폴더를 생성하고 그 안에 store.js 파일을 생성해야 합니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

    }

  }

})

로그인 후 복사

이 스토어에는 상태의 메시지 필드가 포함되어 있으며 필드를 설정하는 변형이 있습니다.

  1. Vue 구성 요소 만들기

이제 Vue 구성 요소를 만들어 메시지 상태를 표시하고 실시간 동기화를 달성할 수 있습니다. 실시간 동기화를 구현하기 위해 구성 요소의 소켓 방출 및 on 메서드를 사용합니다. App.vue 파일을 열고 다음 코드를 사용합니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<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 메소드는 서버에서 보낸 메시지를 수신하고 지정된 콜백을 실행하는 데 사용됩니다.

  1. index.html 템플릿 만들기

또한 Flask 애플리케이션에 대한 진입점을 제공하기 위해 index.html 템플릿을 만들어야 합니다. template/index.html을 열고 다음 코드를 사용합니다.

1

2

3

4

5

6

7

8

9

10

11

<!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도 포함되어 있습니다.

  1. 앱 실행

이제 앱에 대한 모든 설정이 완료되었으므로 다음 명령을 사용하여 시작할 수 있습니다.

1

python app.py

로그인 후 복사

그런 다음 브라우저에서 http://localhost:5000을 엽니다. 페이지에 텍스트를 입력할 수 있는 입력 상자가 표시됩니다. 뿐만 아니라 다른 브라우저로 전환하여 입력창에 텍스트를 입력하면 방금 입력한 텍스트도 여기에 동기화되는 것을 확인할 수 있습니다!

이렇게 해서 우리는 Python과 Vue 기반의 브라우저를 성공적으로 구현했습니다. Node.js 웹 애플리케이션을 실시간으로 동기화합니다. 이 모델에는 온라인 채팅 애플리케이션이나 다중 사용자 공동 작업 애플리케이션과 같은 다양한 애플리케이션 시나리오가 있습니다.

위 내용은 Python 및 Vue.js를 사용하여 실시간 동기화된 웹 애플리케이션 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿