간단한 채팅 예제
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를 참고하시면 됩니다.