유니티 Webgl 파이어베이스(firebase) - StopListeningForValueChanged #12

---

1. 오늘 공부할 내용

ListenValueChanged는 서버에서 데이터를 받아오는 것이라서 비용이 발생합니다. 수신할 필요가 없을때는 이벤트 연결을 끊을 수 있는 StopListening에 대해 다룹니다.

---

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

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

    StopListeningForValueChanged: 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).off('value');
             window.unityInstance.SendMessage(parsedObjectName, parsedCallback, "Success: listener removed");
        } catch (error) {
             window.unityInstance.SendMessage(parsedObjectName, parsedFallback, JSON.stringify(error, Object.getOwnPropertyNames(error)));
        }
    },

#코드 설명

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

 firebase.database().ref(이벤트연결을 해제할 경로).off('value') 리스너를 끊는 코드입니다. 리스너를 끊을 경로를 매개변수로 전달합니다.

---

3. 유니티 스크립트 작업

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

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

#코드 설명

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

 

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

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

#코드 설명

위에서 만든 StopListeningForValueChanged 함수를 호출하는 함수입니다. 매개변수로 연결을 끊을 경로, 오브젝트 이름, 성공시 호출할 함수이름, 실패시 호출할 함수이름을 입력합니다.

---

4. 유니티 UI 작업

StopListening 버튼을 추가하고 DatabaseHandler.StopListeningForValueChanged 함수가 클릭이벤트로 호출되도록 연결합니다.

---

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) loadingBar.style.display = "none"; 아래에 window.unityInstance = unityInstance; 를 추가합니다.

          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);
              });
          };
          document.body.appendChild(script);
      </script>

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

---

6. 테스트하기

1) https://itch.io/ 에 압축한 파일을 업로드하고 테스트를 진행합니다.

2) 테스트할 경로를 입력하고 ListenValueChangedDataButton 을 눌러 리스너를 연결합니다.

3) 파이어베이스의 실시간데이터에서 해당 경로에 데이터를 입력해서 리스너가 연결되었는지 확인합니다.

4) StopListening 을 눌러 리스너 연결을 해제하고 파이어베이스의 실시간데이터에서 해당 경로의 데이터를 변경해서 리스너가 연결 해제되었는지 확인합니다.