functions-samples/Node/quickstarts/callable-functions-streaming/website/index.html at 8d61692556f06fe5948f0b24678fefcce5d47373 · firebase/functions-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>title</title>
  </head>
  <body>
    <h1>Many forecasts</h1>
    <p>Click the button to get the forecast for all your favorite locations.</p>
    <button id="btn-call-func">Get forecasts</button>
    <div id="forecasts"></div>
    <script type="module">
      import { initializeApp } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-app.js";
      import {
        getFunctions,
        httpsCallable,
        connectFunctionsEmulator,
      } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-functions.js";

      const callableButton = document.getElementById("btn-call-func");
      const resultElement = document.getElementById("forecasts");

      callableButton.onclick = handleClick;

      // https://firebase.google.com/docs/hosting/reserved-urls#sdk_auto-configuration
      const firebaseConfig = await fetch("/__/firebase/init.json").then(
        (response) => {
          return response.json();
        }
      );
      const app = initializeApp(firebaseConfig);
      const functions = getFunctions(app);
      connectFunctionsEmulator(functions, "127.0.0.1", 5001);

      const favoriteLocations = [
        {
          name: "The Googleplex",
          latitude: 37.4220199895279,
          longitude: -122.08531347325561,
        },
        {
          name: "Yosemite Valley",
          latitude: 37.745192257741984,
          longitude: -119.5945133017153,
        },
        {
          name: "Old Faithful",
          latitude: 44.46037818049411,
          longitude: -110.82802255265777,
        },
      ];

      async function handleClick() {
        // reset result
        initializeUi();

        // [START stream_data_client]
        // Get the callable by passing an initialized functions SDK.
        const getForecast = httpsCallable(functions, "getForecast");

        // Call the function with the `.stream()` method to start streaming.
        const { stream, data } = await getForecast.stream({
          locations: favoriteLocations,
        });

        // The `stream` async iterable returned by `.stream()`
        // will yield a new value every time the callable
        // function calls `sendChunk()`.
        for await (const forecastDataChunk of stream) {
          // update the UI every time a new chunk is received
          // from the callable function
          updateUi(forecastDataChunk);
        }

        // The `data` promise resolves when the callable
        // function completes.
        const allWeatherForecasts = await data;
        finalizeUi(allWeatherForecasts);
        // [END stream_data_client]
      }

      function initializeUi() {
        resultElement.innerHTML = "";
        callableButton.disabled = true;
        callableButton.innerText = "Streaming forecasts...";
      }

      function finalizeUi() {
        callableButton.disabled = false;
        callableButton.innerText = "Get forecasts";
      }

      function updateUi(forecastData) {
        const newWeatherCard = document.createElement("div");

        const locationName = document.createElement("h2");
        locationName.innerHTML = favoriteLocations.find(
          (v) => v.latitude === forecastData.latitude
        ).name;

        const forecast = document.createElement("p");
        console.log(forecastData);
        forecast.innerHTML =
          forecastData.forecast.properties.periods[0].detailedForecast;

        newWeatherCard.append(locationName, forecast);
        resultElement.appendChild(newWeatherCard);
      }
    </script>
  </body>
</html>