첫 스크립트

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

전체 코드

아래 코드를 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>

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

미리 등록 코드

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

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

이벤트 받기

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를 돌려주면 기본 처리를 막을 수 있어요. 이벤트 목록과 막을 수 있는 이벤트는 이벤트에 있어요.

room 객체 쓰기

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

room의 전체 속성과 함수는 U.chat()과 room 객체에 있어요.

다음 단계

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