# Methods

### 소개

App에서 위젯으로 데이터를 보내거나, 위젯을 파괴하는 함수입니다.

| 이름          | 설명                         |
| ----------- | -------------------------- |
| sendMessage | App에서 위젯으로 데이터를 보내는 함수입니다. |
| destroy     | 위젯을 삭제하는 함수입니다.            |

## 📚 API 설명 및 예제

#### <mark style="background-color:yellow;">**Methods 함수 한 눈에 보기**</mark>

```jsx
// 생성한 위젯에 메세지를 보냄
widget.sendMessage(object: any)

// 위젯을 제거
widget.destroy()
```

### sendMessage

{% hint style="info" %}
widget.sendMessage(object: any)
{% endhint %}

App에서 위젯으로 데이터를 보냅니다.

**파라미터**

<table><thead><tr><th width="146.33333333333331">이름</th><th width="103">타입</th><th>설명</th></tr></thead><tbody><tr><td>object</td><td>any</td><td>앱에서 위젯으로 보내는 데이터<br>Ex) { name : “test”, message : “message” }</td></tr></tbody></table>

**예제**

위젯에 텍스트와 이미지 데이터 보내기

{% file src="<https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FNiMw8cvjoyDUlftIHsEH%2F%EC%98%88%EC%A0%9C_widgetSendmessage.zip?alt=media&token=e2c0a155-1764-4071-8fca-399c6ba66819>" %}

<div align="left"><figure><img src="https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FBDKaUXw8OekMSfDyzpVp%2FUntitled.png?alt=media&#x26;token=2743154e-4d8e-4f03-8cd2-24bd745ccb0c" alt=""><figcaption></figcaption></figure> <figure><img src="https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FURUf3P52DYDMRaugqt6O%2FUntitled%201.png?alt=media&#x26;token=65d8a7c5-6a52-420a-8d00-651cec3abdf3" alt=""><figcaption></figcaption></figure></div>

```jsx

// 플레이어가 입장할 때 동작하는 함수
App.onJoinPlayer.Add(function (player) {
	player.tag = {
		widget: null,
	};
	
	player.tag.widget = player.showWidget("sample.html", "top", 300, 300);
	//위젯에서 앱으로 메시지를 보내면 동작하는 함수
	player.tag.widget.onMessage.Add(function (player, data) {
		if (data.type == "close") {
			player.showCenterLabel("위젯이 닫혔습니다.");
			player.tag.widget.destroy();
			player.tag.widget = null;
		}
	});
	player.sendUpdated();
});

// q를 누르면 동작하는 함수
// 위젯에 텍스트와 blueman 이미지를 보냄
// App.addOnKeyDown 설명(링크)
App.addOnKeyDown(81, function (player) {
	if (player.tag.widget) {
		player.tag.widget.sendMessage({
			text: "블루맨",
		});
	}
});
```

**sample.html**: 텍스트, 이미지 데이터를 받아 표시하는 부분

```jsx
//앱에서 위젯으로 메시지를 보내면 동작하는 함수
window.addEventListener("message", function (e) {
	let text = e.data.text;
	let content = document.getElementById("content");
	if (content) {
		while (content.hasChildNodes()) {
			content.removeChild(content.firstChild);
		}
		let content_image = document.createElement("img");
		content_image.setAttribute("src", BLUEMAN);
		content_image.setAttribute("class", "cover");
		content.append(content_image);
	}
	if (text) {
		document.getElementById("text").innerText = text;
	}
});
// 이미지로 사용할 블루맨 이미지 (base64 인코딩)
const BLUEMAN = "data:image/png;base64,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"
```

####

### destroy

{% hint style="info" %}
widget.destroy()
{% endhint %}

위젯을 삭제하는 함수입니다.

**파라미터**

* 없음

**예제**

:fire: [<mark style="color:purple;">Event Listeners</mark>](https://docs-kr.zep.us/zep-script-api/zepscriptapi/scriptwidget/event-listeners)

### 부록

[위젯에서 사용가능한 문법](https://docs-kr.zep.us/creator/reference/scriptaction)