간단한 채팅 예제

지금까지의 내용을 바탕으로 간단한 채팅을 구성해 보도록 하겠습니다.

html 의 body 안에 다음과 같은 간단한 챗창을 만듭니다.

<form name="chatform" onsubmit="return false;">
	<div style="width:1020px; height:500px;">
		<div id="chatscreen" style="width:90%;height:90%;border:1px solid green;overflow:auto; float:left"></div>
		<input type="text" name="chatinput" id="chatinput" style="width:80%" onKeyPress="javascript:(event.keyCode == 13) ? talk(): null;"/>
		<input type="button" value=">>" onclick="talk()" style="width:10%">
	</div>
</form>

다음의 javascript 라이브러리를 include 합니다.

<script src="http://jslib.dpush.co.kr:9000"></script>

구문 안에 다음의 javascript 를 코딩합니다.
client의 메세지 송신은 opengroup 선언 시에 sendevent를 true값으로 세팅하셔야 합니다.

var client = new DPClient('TESTCHAT'); // DPClient 생성
var group = client.openGroup('chat-group', {'sendevent' : true}); // group open
group.onReceive('chat-action', function(data, userid, custinfo) {	  // receiver action
	var chatscreen = document.getElementById("chatscreen");
	chatscreen.innerHTML += data + "<br>";
	chatscreen.scrollTop = chatscreen.scrollHeight; 
});
function talk() {
	var txt = document.getElementById("chatinput").value;
	document.getElementById("chatinput").value = '';
	group.send('chat-action', txt);	// send action
}

실제 간단한 채팅에 필요한 javascript 는 얼마 되지 않습니다.
실제로 채팅이라고 하기에는 많이 부족합니다. 닉네임등을 입력받고 접속한 사람의 닉네임, 방을 나간사람의 닉네임등을 표시하면 좀 더 좋은 채팅을 구현할 수 있습니다. 사용자 고유 정보와 사용자에 대한 이벤트를 전송하는 부분은 CUSTOMER INFO를 참고하시면 됩니다.