Stream

functions/package.json

@@ -11,7 +11,7 @@
     "logs": "firebase functions:log"
   },
   "engines": {
-    "node": "18"
+    "node": "20"
   },
   "main": "lib/index.js",
   "dependencies": {

functions/src/functions/server/streaming.ts

@@ -0,0 +1,14 @@
+import { CallableRequest, CallableResponse } from "firebase-functions/v2/https";
+
+export const sleep = async (milliseconds: number) => {
+  return await new Promise((resolve) => setTimeout(resolve, milliseconds));
+};
+export const streamingFunc = async (request: CallableRequest, response?: CallableResponse) => {
+  for await (const num of ["1", "2", "3", "4", "5"]) {
+    // res.write(num + "\n");
+    response?.sendChunk({ num });
+    await sleep(1000);
+  }
+
+  return {num: "12334"};
+};

functions/src/index.ts

@@ -15,3 +15,5 @@ import exportIfNeeded from "./common/exportifneeded";
 exportIfNeeded("hono_server", "server/hono", exports);
 exportIfNeeded("express_server", "server/express", exports);
 exportIfNeeded("express_server_v2", "server/express_v2", exports);
+
+exportIfNeeded("streamingCall", "server/streaming", exports);

functions/src/wrappers/server/streaming.ts

@@ -0,0 +1,12 @@
+import { onCall } from "firebase-functions/v2/https";
+
+import { streamingFunc } from "../../functions/server/streaming";
+
+export default onCall(
+  {
+    region: "asia-northeast1",
+    timeoutSeconds: 10,
+  },
+  async (request, response) => {
+    return await streamingFunc(request, response);
+});

src/utils/functions.ts

@@ -2,3 +2,4 @@ import { functions } from "@/utils/firebase";
 import { httpsCallable } from "firebase/functions";
 
 export const testFunctions = httpsCallable(functions, "test");
+export const streamingFcuntion = httpsCallable(functions, "streamingCall");

src/views/MyPage.vue

@@ -4,11 +4,21 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { requireLogin } from "@/utils/utils";
+import { streamingFcuntion } from "@/utils/functions";
 
 export default defineComponent({
   setup() {
     requireLogin("/account");
 
+    (async () => {
+      const { stream, data } = await streamingFcuntion.stream();
+      for await (const chunk of stream) {
+        console.log(chunk);
+      }
+      const allData = await data;
+      console.log(allData);
+    })()
+
     return {};
   },
 });