Ajax 채팅, setInterval()

웹소켓을 이용한 채팅 구현이 여러 면에서 더욱 좋겠지만..

 

일단은 공부를 위해서도, 기타 여러 측면에서 도움이 될 것 같아 Ajax로 간단하게

채팅 기능을 구현했다.

 

먼저 가장 핵심이 되는 부분은,

 

자바스크립트 setInterval()

 

setInteval에 대한 설명은

- http://www.w3schools.com/jsref/met_win_setinterval.asp를 참조하자.

 

먼저 스크립트 부분..

 

$(document).ready(function(){ setInterval(lastDateAjax, 300); // 0.3초 간격으로 마지막 데이터 이후 입력 시 $('#message').focus(); $('#message').keydown(function(key) { if(key.keyCode == 13){ if(key.ctrlKey){ // ctrl+ Enter: 공지 등록 if(confirm("해당 내용을 공지로 등록하시겠습니까?")) { writeAjax('Y'); return false; } else { return false; } } if(key.shiftKey){ // Shift+ Enter: 줄바꿈 } else { // Enter: 전송 writeAjax('N'); return false; } } }); $('#submit').on("click", function(){ writeAjax('N'); }); });

 

0.3초 간격으로 lastDateAjax를 호출한다.

 

function lastDateAjax(){ $.ajax({ method: "POST", url: "/lastDate.do", cache: false, async: false, success: function(data){ if(lastDateTime < data) { readAjax(lastDateTime); lastDateTime = data; } else { lastDateTime = data; } } }); }

 

해당 function에서는 현재 시간과 DB에 저장된 채팅 글을 체크하여,

새로운 채팅 글이 입력될 때만 readAjax를 호출하게 된다.

 

function readAjax(compareTime){ $.ajax({ method: "POST", url: "/read.do", dataType: "json", cache: false, async: false, data: { "lastDate": compareTime }, success: function(data) { if(data.length == 0) { return; } else { $.each(data, function(index, entry){ // ..채팅창 div에 알맞게 글을 뿌려준다.. $("#board").scrollTop($("#board")[0].scrollHeight); // 스크롤바 항상 맨 밑으로 유지 }); } } }); }

 

컨트롤러 부분에서는

 

// 채팅 읽기 @ResponseBody @RequestMapping(value = "/read.do", method = {RequestMethod.POST, RequestMethod.GET}) public String chatting(String lastDate){ Gson gson = new Gson(); ArrayList<Emp> chatList = empService.chatList(lastDate); return gson.toJson(chatList); }

 

파라미터 값 받아서 처리 후, ResponseBody로 리턴.

 

읽기 쓰기 구현후, 이런 저런 기능 및 CSS 입혀주면,

 

되긴 된다..