Fastapi websocket 및 vue 3(Composition API)

1부: FastAPI

virtualenv 만들기(선택 사항)
FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오.

pip install fastapi uvicorn websockets 

생성main.py 파일

from fastapi import FastAPI app = FastAPI() @app.get("/") def root(): return {"msg":"welcome"} 

및 실행 -

uvicorn main:app --reload 

브라우저에서 이 링크 열기http://127.0.0.1:8000


이와 같은 것을 본다면 갈 준비가 된 것입니다.

이제 websocket 엔드포인트를 생성해 보겠습니다.

 from fastapi import FastAPI, WebSocket app = FastAPI() # @app.get("/") # def root(): # return {"msg":"welcome"}  @app.websocket("/ws") async def websocket_endpoint(websocket: WebSocket): await websocket.accept() while True: data = await websocket.receive_text() print(data) await websocket.send_text(f"{data}") 

이 async 함수는 await websocket.accept()를 통해 프런트엔드에서 연결을 수락할 때까지 기다립니다. 그런 다음 연결이 생성되면 websocket은 연결이 닫힐 때까지 프런트엔드와 통신할 준비가 됩니다.

 data = await websocket.receive_text() 

이 코드 줄을 통해 프런트엔드에서 데이터를 수신합니다.

await websocket.send_text(f"{data}") 

그리고 이 코드 라인으로 데이터를 프런트엔드로 보낼 수 있습니다. 이것이 우리가 양방향 커뮤니케이션을 만드는 방법입니다.

파트 2: Vue3(프런트엔드)

vue3 응용 프로그램을 만들어 봅시다- Vue3 installation guide

npm init vue@latest 

모든 상용구 코드를 삭제합니다. 그리고 작업을 더 쉽게 하기 위해 app.vue 파일에 코드를 작성해 보겠습니다.

<script setup> import { onMounted,ref } from 'vue' const data = ref() const inputData = ref() const connection = new WebSocket("ws://localhost:8000/ws") function submit() { connection.send(inputData.value) } onMounted(() => { connection.onmessage = function(e){ data.value = e.data } }) </script> <template> <h1>hello {{data}}</h1> <input type="text" v-model="inputData" @keyup.enter="submit()"> <button @click="submit()">submit</button> <RouterView /> </template> 

fastAPI websocket으로 연결 구축 시작-

const connection = new WebSocket("ws://localhost:8000/ws") 

마운트된 후크에서 우리는 백엔드에서 보내는 메시지를 듣기 시작합니다. 백엔드에서 오는 데이터가 무엇이든 우리는 해당 데이터를 저장하고 다음을 통해 Tamplate에서 렌더링할 수 있습니다.

onMounted(() => { connection.onmessage = function(e){ data.value = e.data } }) 

<!-- in template --> <template> <h1>hello {{data}}</h1> </template> 

입력 필드를 만들고 프런트엔드에서 데이터를 보내고 백엔드를 통해 프런트엔드에서 해당 데이터를 다시 받겠습니다.

<template> <h1>hello {{data}}</h1> <input type="text" v-model="inputData" @keyup.enter="submit()"> <button @click="submit()">submit</button> <RouterView /> </template> 

그리고 submit() 함수에서 백엔드로 데이터를 보냅니다.

 function submit() { connection.send(inputData.value) } 

짜잔.... 끝났습니다 😎. 이제 더 많은 실험을 할 수 있습니다. 데이터베이스에서 데이터를 검색하고 이와 같은 프런트 엔드로 보냅니다. 또는 당신이 원하는 무엇이든.

소스 코드: https://github.com/siumhossain/fastApi-Vue3-webSocket