FastAPIとVue.jsを用いたWebSocket通信の実装

FastAPIにおけるWebSocketの設定

FastAPIを用いてWebSocketを設定する方法を以下に示します。

まず、FastAPIのインスタンスを作成します。

from fastapi import FastAPI

app = FastAPI()

次に、WebSocketルートを作成します。これはHTTPルートと同様に動作しますが、app.websocket_routeデコレータを使用します。

from fastapi import WebSocket

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:
        data = await websocket.receive_text()
        await websocket.send_text(f"Message text was: {data}")

上記のコードでは、WebSocket接続を受け入れ、クライアントから送信された各メッセージを受信し、そのメッセージをクライアントにエコーバックします。

これでFastAPIにおけるWebSocketの基本的な設定が完了しました。次に、このWebSocketをVue.jsと連携させ、リアルタイム通信を実現する方法を見ていきましょう。

Vue.jsでのWebSocketの利用

Vue.jsを用いてWebSocketを利用する方法を以下に示します。

まず、Vue.jsのインスタンスを作成します。

var app = new Vue({
  el: '#app',
  data: {
    socket: null,
    message: ''
  },
  created: function() {
    this.socket = new WebSocket('ws://localhost:8000/ws');
    this.socket.onmessage = (event) => {
      this.message = event.data;
    };
  }
});

上記のコードでは、Vue.jsのインスタンスが作成されたとき（createdフック内）にWebSocket接続が開始されます。そして、WebSocketからのメッセージを受信するたびに、そのメッセージがmessageデータプロパティに保存されます。

次に、Vue.jsのテンプレート内でこのmessageデータプロパティを表示します。

<div id="app">
  <p>{{ message }}</p>
</div>

これでVue.jsでWebSocketを利用する基本的な設定が完了しました。次に、このWebSocketをFastAPIと連携させ、リアルタイム通信を実現する方法を見ていきましょう。

FastAPIとVue.jsの連携

FastAPIとVue.jsを連携させることで、リアルタイム通信を実現することができます。以下にその手順を示します。

まず、FastAPIで作成したWebSocketエンドポイントとVue.jsで作成したWebSocketインスタンスを連携させます。これにより、Vue.jsのアプリケーションからFastAPIのサーバーへのリアルタイム通信が可能になります。

this.socket = new WebSocket('ws://localhost:8000/ws');

上記のコードでは、Vue.jsのWebSocketインスタンスがFastAPIのWebSocketエンドポイント（ws://localhost:8000/ws）に接続しています。

次に、Vue.jsのアプリケーションからメッセージを送信し、FastAPIのサーバーからのレスポンスを受け取る方法を見てみましょう。

this.socket.send('Hello, server!');
this.socket.onmessage = (event) => {
  console.log(event.data);  // 'Message text was: Hello, server!'
};

上記のコードでは、Vue.jsのアプリケーションから'Hello, server!'というメッセージを送信し、FastAPIのサーバーからのレスポンス（'Message text was: Hello, server!'）をコンソールに出力しています。

これでFastAPIとVue.jsの連携によるWebSocket通信の基本的な設定が完了しました。次に、この設定を用いて具体的なリアルタイム通信の例を見ていきましょう。

WebSocketを用いたリアルタイム通信の例

FastAPIとVue.jsを用いたWebSocket通信の具体的な例を以下に示します。

まず、FastAPIのサーバー側で、クライアントからのメッセージを受け取り、そのメッセージを加工してクライアントに返すWebSocketエンドポイントを作成します。

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:
        data = await websocket.receive_text()
        response = f"Server received: {data}"
        await websocket.send_text(response)

次に、Vue.jsのクライアント側で、ユーザーからの入力をサーバーに送信し、サーバーからのレスポンスを表示する機能を作成します。

var app = new Vue({
  el: '#app',
  data: {
    socket: null,
    input: '',
    message: ''
  },
  methods: {
    send: function() {
      this.socket.send(this.input);
      this.input = '';
    }
  },
  created: function() {
    this.socket = new WebSocket('ws://localhost:8000/ws');
    this.socket.onmessage = (event) => {
      this.message = event.data;
    };
  }
});

<div id="app">
  <input v-model="input" @keyup.enter="send">
  <button @click="send">Send</button>
  <p>{{ message }}</p>
</div>

上記のコードでは、ユーザーがテキストボックスに入力し、「Send」ボタンをクリックすると、その入力がサーバーに送信されます。そして、サーバーからのレスポンスが<p>タグ内に表示されます。

これでFastAPIとVue.jsを用いたWebSocket通信の具体的な例の作成が完了しました。この設定を用いることで、リアルタイムにデータをやり取りするアプリケーションを作成することが可能です。具体的なアプリケーションの開発に際しては、セキュリティやエラーハンドリングなど、さらに考慮すべき点がありますので、適切な対策を行ってください。この記事が皆さんの開発の一助となれば幸いです。それでは、Happy coding! 🚀