# 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="/files/PX572edWfqeWmPLWlIkB" %}

<div align="left"><figure><img src="/files/7rEwm0Rkv3YrjJbXYS95" alt=""><figcaption></figcaption></figure> <figure><img src="/files/eJBF56UiVmN5due3tYdp" 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>](/zep-script-api/zepscriptapi/scriptwidget/event-listeners.md)

### 부록

[위젯에서 사용가능한 문법](/creator/reference/scriptaction.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-kr.zep.us/zep-script-api/zepscriptapi/scriptwidget/methods.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.