[Django & Ajax] 실시간 채팅 구현

[Django & Ajax] 실시간 채팅 구현

728x90

남들이 해놓은걸 보고 만들어볼 계획이었는데 주어진 시간에 비해 너무 어렵다. 조잡해질까봐 걱정이 되긴 하나 그렇게 복잡하지 않을 것 같아 그냥 직접 구현해보려한다.

어떻게 구현해야할까에 대한 고민

기왕이면 그나마 친숙한 Ajax를 이용하려한다. 대략적인 생각은 다음과 같다. ajax로 채팅내용을 뿌려주는 함수를 구현해놓고 일정주기로 함수를 호출해서 화면을 재구성하는 방식이다. 일정주기로 계속 호출을 한다는게 마음에 걸려서 다른 방식이 없을까 조사를 해봤는데 웹소켓말고 ajax를 이용하는 방식내에서는 어쩔 수 없는거같다.

setInterval()

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

일정주기로 함수를 실행시키는 건 setInterval()을 이용하면 되는 듯하다.

views.py

class ChatView(View): def get(self, request): message = LandingChat.objects.all().order_by('date') return render(request,'chatapp/landing_chat.html', {'message': message}) def post(self, request): if request.is_ajax(): model = LandingChat() model.chat = request.POST.get('message') model.writer = request.user model.save() return JsonResponse({'message': model.chat})

ajax.js

//landing-chat 채팅화면렌더링함수 function chatRender() { $.ajax({ type: "GET", url: "/chat/", data: {"message": $('#chat-box').val()}, success: function(res) { var e = $(res).find('#chat-box').children(); $('#chat-box').children().remove(); $('#chat-box').html(e); $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight); } }); }

$(document).ready(function(){ //landing-chat //엔터감지 $('#landing-chat-input').keydown(function(key){ if(key.keyCode == 13){ $('#landing-chat-send').click(); } }); //스크롤 항상맨아래 $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight); //3초마다 채팅렌더링 setInterval(chatRender, 3000); $('#landing-chat-send').on("click", (e) => { message = $('#landing-input-area').val(); $.ajax({ type: "POST", url: '/chat/', data: {"message": message}, dataType: "json", beforeSend: function(xhr) { xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken')); }, success: function (res) { $('landing-input-area').text(''); chatRender(); }, error: function (res) { alert("전송실패. 지속될 경우 에러제보페이지에 문의바랍니다.") } }); }); });

대충 만들었는데 우선 작동은 한다.

만들어놓고보니 서비스에 포함시키려면 좀 고쳐야겠다는 생각이 들었다. 자원낭비를 좀더 줄일 수 있을 것 같다. 현재는 chatRender()를 계속 호출하는 방식인데 setInterval()에서 이걸 계속 호출할 것이 아니라 db변경사항을 탐색하는 함수를 만들어 계속 감시하고 변경사항이 있다면 그때 chatRender()를 호출하면 개선될 거라는 생각이다. 구현후 이어 작성하겠다.

db감시를 어떻게 해야할까에 대한 고민

헛짓을 좀 하면서 몇가지를 생각해봤는데 시간을 이용하는게 좋을것같다.

우선 뷰에서 jsonresponse로 마지막으로 저장된 시간요소를 보내고 ajax로 그걸 받는 함수를 만들거다.

그리고 setInterval()로 그걸 계속 받는다. 그리고

728x90

반응형

from http://duckracoon.tistory.com/159 by ccl(A) rewrite - 2021-10-25 23:26:50