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