# 첫 스크립트

> 페이지 스크립트로 채팅방 입장 이벤트를 받고, 안내 줄을 띄우고, 메시지를 보내 봐요.

설치한 채팅방에 페이지 스크립트를 붙여, 입장하면 인사 안내를 띄우고 버튼으로 메시지를 보내 봐요. [5분 설치](/doc/1.2)를 마친 페이지에서 시작해요.

## 전체 코드 {#full-code}

아래 코드를 HTML 파일 하나에 붙여 넣고 열어 보세요.

```html
<!-- 1. 미리 등록 코드: uchat.js보다 먼저 -->
<script>U=window.U=window.U||{},U.events=U.events||[],U.chat=function(n){return{on:function(e,t){U.events.push([n,e,t])},off:function(e){for(var t=U.events.length;t>0;)U.events[--t][0]==n&&U.events[t][1]==e&&U.events.splice(t,1)}}};</script>
<script async src="https://client.uchat.io/uchat.js"></script>

<!-- 2. 채팅방 -->
<u-chat room="my-room" style="display:inline-block; width:100%; max-width:500px; height:500px;"></u-chat>
<button id="hello" disabled>안녕 보내기</button>

<!-- 3. 페이지 스크립트 -->
<script>
var myRoom = null;

U.chat('my-room').on('after.join', function (room, data) {
	myRoom = room;
	document.getElementById('hello').disabled = false;
	room.print('입장했습니다. 내 닉네임은 ' + escapeHtml(data.my.nick) + '입니다.');
});

U.chat('my-room').on('after.message', function (room, data) {
	if (data.user.nick !== room.my.nick) document.title = '새 메시지 - ' + data.user.nick;
});

document.getElementById('hello').addEventListener('click', function () {
	if (!myRoom.action.send('안녕')) alert('지금은 보낼 수 없습니다.');
});

function escapeHtml(text) {
	return String(text).replace(/[&<>"']/g, function (c) {
		return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
	});
}
</script>
```

입장하면 채팅방에 안내 줄이 나오고 버튼이 켜져요. 버튼을 누르면 내 닉네임으로 `안녕`이 전송되고, 다른 사람이 말하면 브라우저 탭 제목이 바뀌어요.

## 미리 등록 코드 {#preload}

`uchat.js`는 `async`로 불러오므로, 페이지 스크립트가 실행되는 시점에는 아직 `U.chat`이 없을 수 있어요. 첫 줄의 미리 등록 코드는 `U.chat(...).on(...)`으로 건 이벤트를 `U.events`에 보관해 두고, `uchat.js`가 준비되면 그대로 이어서 써요. 그래서 **`uchat.js`보다 먼저** 넣어야 해요.

미리 등록 코드를 빼면 `U is not defined` 오류가 나거나 이벤트가 걸리지 않아요. 로딩 순서와 여러 채팅방·SPA에서 쓰는 방법은 [비동기 로딩과 여러 채팅방](/doc/2.2)에 있어요.

## 이벤트 받기 {#events}

```js
U.chat('my-room').on('after.join', function (room, data) { ... });
```

- `U.chat('채팅방아이디')`로 채팅방을 고르고 `.on(이벤트이름, 콜백)`으로 이벤트를 걸어요.
- 콜백은 언제나 `(room, data)` 두 인자를 받아요. `room`은 채팅방 객체이고, `data`는 이벤트마다 달라요.
- `after.join`은 입장이 끝나 내 정보를 받았을 때 와요. `data.my`가 내 정보예요.
- `after.message`는 채팅 메시지 한 줄마다 와요. `data.user`가 보낸 사람, `data.content`가 내용이에요. 입장할 때 받는 지난 대화와 내가 보낸 메시지도 와요.

`before.`로 시작하는 이벤트에서 `false`를 돌려주면 기본 처리를 막을 수 있어요. 이벤트 목록과 막을 수 있는 이벤트는 [이벤트](/doc/3.3)에 있어요.

## room 객체 쓰기 {#room}

| 쓴 것 | 하는 일 |
| --- | --- |
| `room.print(html)` | 내 화면에만 안내 줄을 띄워요. 다른 사람에게는 보이지 않아요. 값은 HTML로 해석되므로 사용자 입력은 이스케이프해서 넣어요. |
| `room.action.send(message)` | 내 닉네임으로 메시지를 보내요. 연결 전이거나, 내용이 비었거나, 슬로우 모드로 기다려야 하면 `false`를 돌려줘요. |
| `room.my` | 내 정보(`nick`, `auth` 등). 입장 전에는 빈 객체예요. |

`room`의 전체 속성과 함수는 [U.chat()과 room 객체](/doc/3.2)에 있어요.

## 다음 단계 {#next}

- 회원의 닉네임으로 들어오게 하기 → [회원 연동](/doc/2.1)
- 채팅방 안에 버튼·대화상자 넣기 → [스킨 UI 확장하기](/doc/2.3)
- 접속자끼리 데이터 주고받기 → [실시간 데이터 주고받기](/doc/2.4)