유니티 Webgl 파이어베이스(firebase) - ListenForValueChanged #11

---

1. 오늘 공부할 내용

유니티Webgl 파이어베이스의 실시간데이터베이스 Listener 에 대해 다룹니다.

---

2. 자바스크립트 라이브러리 작업

1) Assets\FirebaseWebGL\Plugins\firebasedatabase.jslib 파일에 아래의 함수를 추가합니다.

    ListenForValueChanged: function(path, objectName, callback, fallback) {
        var parsedPath = Pointer_stringify(path);
        var parsedObjectName = Pointer_stringify(objectName);
        var parsedCallback = Pointer_stringify(callback);
        var parsedFallback = Pointer_stringify(fallback);

        try {

            firebase.database().ref(parsedPath).on('value', function(snapshot) {
                window.unityInstance.SendMessage(parsedObjectName, parsedCallback, JSON.stringify(snapshot.val()));
            });

        } catch (error) {
            window.unityInstance.SendMessage(parsedObjectName, parsedFallback, JSON.stringify(error, Object.getOwnPropertyNames(error)));
        }
    },

#코드설명

Pointer_stringify 는 자바스크립트 문자열로 변환해주는 헬퍼 함수입니다.

firebase.database().ref(감지할경로).on('value', function(snapshot) 은 감지할 경로의 데이터가 변경되면 그 값이 snashot을 통해 전달됩니다.

---

3. 유니티 스크립트 작업

1) Assets\FirebaseWebGL\Scripts\FirebaseDatabase.cs 에 아래의 함수를 추가합니다.

        [DllImport("__Internal")]
        public static extern void ListenForValueChanged(string path, string objectName, string onValueChanged, string fallback);

#코드 설명

위에서 자바스크립트 라이브러리에서 만든 ListenForValueChanged 함수와 링크거는 함수입니다. 해당 함수는 ListenForValueChanged함수와 이름과 매개변수가 동일해야 합니다. 

 

2) Assets\Scritps\DatabaseHandler.cs 에 아래의 함수를 추가합니다.

    public void ListenForValueChanged() =>
    FirebaseDatabase.ListenForValueChanged(pathInputField.text, gameObject.name, "DisplayData", "DisplayErrorObject");

#코드 설명

위에서 만든 FirebaseDatabase.ListenForValueChanged 함수를 호출하는 함수입니다.

 

---

4. 유니티 UI 작업

ListenValueChanged 버튼을 만들고 DatabaseHandler.ListenForValueChanged 함수가 클릭이벤트로 호출되도록 연결합니다.

---

5. 빌드 후 Index.html 파일 수정

1) Webgl 로 빌드를 진행합니다.

2) 빌드가 완료되면 빌드가 완료된 폴더로 가서 Index.html을 비주얼스튜디오로 열어줍니다.

3) </Body> 윗 라인에 파이어베이스 JS SDK CDN 코드를 추가합니다. 인증, 실시간데이터 코드도 포함시킵니다.

      <!-- The core Firebase JS SDK is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>

      <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-database.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>

      <script>
          // Your web app's Firebase configuration
          // For Firebase JS SDK v7.20.0 and later, measurementId is optional
          var firebaseConfig = {
              apiKey: "AIzaSyBl_EnKaGrPz8ucIPR1U376rEq1xcRhAqE",
              authDomain: "fir-webgl-study.firebaseapp.com",
              projectId: "fir-webgl-study",
              storageBucket: "fir-webgl-study.appspot.com",
              messagingSenderId: "348876701541",
              appId: "1:348876701541:web:39746e4b6edfb18f2e2b8c",
              measurementId: "G-W803ZS40ML",
              googleWebId: "348876701541-qdnp94l10tuotqnp77hluenvgbi4q1hr.apps.googleusercontent.com"
          };
          // Initialize Firebase
          firebase.initializeApp(firebaseConfig);
          firebase.analytics();
      </script>

 

4) window.unityInstance = unityInstance; 를 loadingBar.style.display = "none"; 윗 라인에 추가합니다.

          var script = document.createElement("script");
          script.src = loaderUrl;
          script.onload = () => {
              createUnityInstance(canvas, config, (progress) => {
                  progressBarFull.style.width = 100 * progress + "%";
              }).then((unityInstance) => {
                  window.unityInstance = unityInstance;
                  loadingBar.style.display = "none";
                  fullscreenButton.onclick = () => {
                      unityInstance.SetFullscreen(1);
                  };
              }).catch((message) => {
                  alert(message);
              });
          };

 

5) Index.html 파일을 압축하고 빌드가 완료된 폴더를 통째로 압축합니다.

---

6. 테스트하기

1) https://itch.io/ 로 이동해서 압축한 파일을 올리고 테스트합니다. 

2) ListenValueChanged 버튼을 누르고 그때부터 해당 경로에 값이 변경되면 파이어베이스에서 값을 전달합니다.