Vuplex에서 JavaScript → C# 이벤트 전송 시 타이밍 이슈와 해결 방법

Vuplex에서 JavaScript → C# 이벤트 전송 시 타이밍 이슈와 해결 방법

1. 개요

Vuplex WebView를 사용하는 경우, JavaScript에서 Unity(C#)로 메시지를 전송할 수 있다.

공식적으로는 다음 API를 사용한다:

window.vuplex.postMessage("message");

하지만 실제 프로젝트에서는 단순한 API 사용만으로는 안정적인 통신을 보장하기 어렵다.

---

2. 문제 상황

프로젝트를 진행하면서 WebView 환경에서 postMessage를 통해 메시지를 전송했지만,
일부 상황에서 메시지가 정상적으로 전달되지 않는 문제가 발생했다.

특히 동일한 코드임에도 불구하고
특정 디바이스에서는 동작하고, 다른 환경에서는 실패하는 등
재현이 어려운 형태로 나타났다.

👉 단순한 코드 문제가 아니라 환경/타이밍 의존적인 문제였다.

---

3. 기본 동작 방식

JavaScript → C#

window.vuplex.postMessage("Hello");

C#

webView.MessageEmitted += (sender, eventArgs) => {
    Debug.Log(eventArgs.Value);
};

구조는 단순하지만, 실제 문제는 여기서 시작된다.

---

4. 문제의 원인: 타이밍 이슈

다음과 같은 증상이 나타났다:

• window.vuplex가 undefined
• 메시지가 간헐적으로 전달되지 않음
• 특정 디바이스에서만 실패

이 문제의 핵심은 타이밍이었다.

---

5. vuplex 초기화 시점

Vuplex WebView는 다음과 같은 단계를 거친다:

1. WebView 생성
2. 페이지 로딩 시작
3. DOM 구성
4. window.vuplex 생성
5. JavaScript 통신 가능 상태

👉 중요한 포인트:

window.vuplex는 DOM 준비 이후에도 즉시 사용할 수 없다.

즉, 일반적인 웹 이벤트 기준으로는
통신 가능한 시점을 보장할 수 없다.

---

6. 잘못된 접근 방식

❌ DOMContentLoaded

document.addEventListener("DOMContentLoaded", () => {
    window.vuplex.postMessage("test");
});

→ vuplex가 아직 생성되지 않을 수 있음

---

❌ load 이벤트

window.addEventListener("load", () => {
    window.vuplex.postMessage("test");
});

→ 일부 환경에서 여전히 실패

---

7. 공식 해결 방법: vuplexready 이벤트

Vuplex는 이를 위해 vuplexready 이벤트를 제공한다.

if (window.vuplex) {
    send();
} else {
    window.addEventListener("vuplexready", send);
}

function send() {
    window.vuplex.postMessage("Hello");
}

👉 핵심:

• vuplex가 있으면 즉시 실행
• 없으면 ready 이벤트 대기

---

8. 실무에서의 한계

하지만 실제 환경에서는 다음 문제가 발생했다:

• ready 이벤트 타이밍이 늦거나 불안정
• 이벤트 리스너 등록 시점 문제
• 초기 메시지 유실

특히 Android / iOS 환경에서는
초기화 타이밍 차이로 인해 문제가 더 빈번하게 발생했다.

---

9. 해결 전략: 명시적인 ready 제어

이 문제를 해결하기 위해
👉 통신 가능 시점을 직접 제어하는 방식을 도입했다.

---

9.1 polling 기반 안정화

function waitForVuplex(callback) {
    if (window.vuplex && window.vuplex.postMessage) {
        callback();
    } else {
        setTimeout(() => waitForVuplex(callback), 50);
    }
}

waitForVuplex(() => {
    window.vuplex.postMessage("ready");
});

👉 실제로 사용 가능한 시점까지 반복 확인

---

9.2 명시적인 ready 이벤트 설계

window.vuplex.postMessage(
    JSON.stringify({
        type: "vuplexReady",
    }),
);

Unity에서는:

if (message.Contains("vuplexReady")) {
    isReady = true;
}

👉 통신 가능 상태를 명확하게 정의

---

10. 안정적인 통신 구조

1. JS → vuplexReady 전송
2. Unity → ready 상태 저장
3. 이후 모든 통신은 ready 이후 수행

👉 핵심은 “언제 보내는가”를 통제하는 것이다.

---

11. 결과

이 구조 적용 이후:

• 메시지 유실 문제 해결
• 플랫폼 간 동작 일관성 확보
• 재현 어려운 버그 제거

특히 간헐적으로 발생하던 문제를 안정적으로 해결할 수 있었다.

---

12. 결론

Vuplex에서 JavaScript → C# 통신의 핵심은
API 사용법이 아니라 타이밍 제어다.

• window.vuplex는 즉시 사용할 수 없다
• 이벤트 기반이 아닌 상태 기반 설계가 필요하다

👉 대부분의 문제는 API가 아니라 타이밍에서 발생한다.

---

13. 마무리

WebView 환경에서는
네이티브와 웹의 라이프사이클이 다르기 때문에
타이밍 이슈는 필연적으로 발생한다.

이를 해결하기 위해서는
👉 명시적인 초기화 흐름과 상태 관리가 필수적이다.

---

참고

https://support.vuplex.com/articles/how-to-send-messages-from-javascript-to-c-sharp