React and Django Channels Websocket

React에서 Django Channels와 연동 방법

React에서 WebSocket을 사용할때 대부분의 라이브러리로는 Socket.io 라이브러리를 사용하는걸로 알고 있었다. Socket.io를 쓰면 Node.js와 궁합이 잘맞기 때문에 사용함에 있어 불편함이 없는걸로 알고 있었다. 하지만 Django Channels라이브러리와 Socket.io라이브러리는 궁합이 잘 맞지않고 구현은 할 수 있지만 복잡한 방식이라 다른 방식을 찾아 봐야했다. 찾아본 방식이 WebSocket Api방식이다.

WebSocket Api 코드

roomName 생성 방식

밑에 보이는게 roomName 생성 방법이다. 처음에 클릭을 하였을때 talked_user_accout가 메세지를 받는 유저이며 room_name 같은경우에는 이전에 대화기록이 있을시 룸네임을 저장함으로써 같이 보내주는 것이다. 그리고 보내준뒤 toggleHandle 함수에서 룸 네임을 지정을 해주는 것이다. 저렇게 코드를 지정한이유는 예를들어 보내는 유저 이름이 abc이고 받는유저가 def이면 roomName은 abcdef인데 반대일 경우에는 roomname이 defabc로 지정이 되면서 백엔드 쪽에서는 같은방이라고 인식을 하지만 웹소켓 서버에서는 서로 다른방이라고 인식을해서 방이름 자체를 데이터에 저장을해놓고 처음 만드는거면 그 방이름을 만들어서 데이터에 저장하게끔 만든 방법이다.

roomName 생성뒤

밑에 코드부분이 전송 버튼이 눌렸을때 백엔드쪽으로 보내지게끔 만든 구조이다 하나씩 이야기를 해보면 처음에 socketPath라는 주소를 받아와야한다. socketPath의 주소는 다른 주소들과 다르게 ws://로 시작하고 두번째가 백엔드 로컬주소이다. 세번째 부분또한 백엔드쪽에서 지정한 api형식의 주소이며 4번째 부분이 위에서 설명하듯이 프론트에서 room방 name을 지정해줘서 보내주는 것이다. 이렇게 다 지정한뒤 new webSocket을 사용하여 그 주소를 지정해준뒤 onopen이라는 메소드를 사용해 룸방을 오픈한뒤 그 룸방에 send라는 메서드를 이용해서 roomName과 메세지와 메세지를 보낸 유저 이름을 보내는 방식이다.

이전의 대화 기록과 실시간으로 나누는 대화기록

밑에 코드를 보면 이제 내가 보낸 메세지를 상대방입장에서 받아오는 방식이다. onmessage 메서드를 사용해 data안에 들어있는 메세지와 보낸시간 보낸유저를 받아온다. 이렇게 받아온뒤 setMessageData에 추가를 하는 방식이다 setMessageData는 이전의 대화기록들에 작성할때마다 추가를 해주는 기능이며 prevMessageData = [] 이부분은 대화기록이 없을때 임시로 업데이트를 해주는 방식으로 저코드를 사용하지않으면 처음 대화하는 유저일때는 오류가 나서 빈배열을 추가 해준것이다.

실제 구현 페이지

DM Page

후기

React 와 Django Channels를 연동할때 처음이라 많이 어려운거 같다. 자주쓰는 socket.io가아닌 WebSocket Api를 사용하는거라 공식문서를 정말 많이 본거 같다. 실제로 해보면 연동하는것보다 받아온 데이터들을 어떻게 뿌려주고 어떤식으로 나열해야하는 방법이 더 어려웠던거 같다. 이런 방식으로 사용해보니 뭔가 신기하고 재밌는거 같다.