【Nuxt.js】ChatGPT APIなどのストリーム機能を表示する方法

2023年4月14日2023年4月17日

この記事では、Nuxt.jsを使ってChatGPT APIや他のストリーミングAPIからのストリームレスポンスを表示する方法を説明します。Nuxt.jsの標準ライブラリであるAxiosはresponseType: 'stream'をサポートしていない(?)ため、XMLHttpRequestやfetchを使ってAPIにリクエストを送り、リアルタイムで受信したデータをユーザーインターフェースに反映させるコード例を提供します。

<template>
  <div>
    <input v-model="text" type="text" placeholder="テキストを入力してください" />
    <button @click="getStreamMessage" :disabled="btn_loading">ストリームメッセージを取得</button>
    <pre>{{ message }}</pre>
  </div>
</template>

<script>
import { getCookie } from '~/utils/cookies';

export default {
  data() {
    return {
      text: '',
      message: '',
      btn_loading: false,
    };
  },
  methods: {
    getStreamMessage() {
      this.message = '';
      const data = JSON.stringify({
        text: this.text,
      });
      const xhr = new XMLHttpRequest();
      xhr.open('POST', `${process.env.BASE_URL}/api/stream_sns`);　// ストリーミングAPI
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.setRequestHeader('Authorization', *****);
      xhr.responseType = 'text';
      xhr.addEventListener('readystatechange', () => {
        if (xhr.readyState === xhr.HEADERS_RECEIVED) {
          const contentLength = xhr.getResponseHeader('Content-Length');
          console.log(`Content-Length: ${contentLength}`);
        } else if (xhr.readyState === xhr.LOADING) {
          const text = xhr.responseText;
          this.message = text;
        } else if (xhr.readyState === xhr.DONE) {
          console.log('Streaming response finished.');
        }
      });
      xhr.send(data);
    },
  },
};
</script>

fetchを使用する場合

async getStreamMessage() {
  this.message = '';
  const data = JSON.stringify({
    text: this.text,
  });

  try {
    const response = await fetch(`${process.env.BASE_URL}/api/stream_sns`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': *****,
      },
      body: data,
    });

    if (response.status !== 200) {
      throw new Error(`HTTPエラー！ステータス：${response.status}`);
    }

    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        console.log('ストリーミングレスポンスが完了しました。');
        break;
      }

      const text = decoder.decode(value, { stream: true });
      this.message += text;
    }
  } catch (error) {
    console.error('ストリーミングレスポンスの取得中にエラーが発生しました:', error);
  } finally {
  }
},