[Javascript] Refactor blocking style code to stream style for fetching the stream data

When you use ChatGPT, the response comes in stream, so that it can appears on screen whenever data come back from server, we don't need to wait all data completed then showing the data to users.

 

Here is code which need to be improved, because this code blocking the thread and wait all the data comes back when showing to the screen.

const url = "http://localhost:3000/chat";

async function getResponse(content) {
  const resp = await fetch(url, {
    method: "POST",
    body: JSON.stringify({ content }),
    headers: {
      "Content-Type": "application/json",
    },
  });
  const data = await resp.text();
  console.log(data);
}

 

First we need to understand where the blocking happens?

const data = await resp.text();

 

Then how to resolve this issue? 

We need to convert to stream style, when you check resp.body, you can see the type of it is Body.body: ReadableStream<Uint8Array>

const url = "http://localhost:3000/chat";

async function getResponse(content) {
  const resp = await fetch(url, {
    method: "POST",
    body: JSON.stringify({ content }),
    headers: {
      "Content-Type": "application/json",
    },
  });

  const reader = resp.body.getReader();
  const decoder = new TextDecoder();
  while (1) {
    const { done, value } = await reader.read();
    const text = decoder.decode(value);
    console.log(text);
    if (done) {
      break;
    }
  }
}