Bluemix를 활용하여 5분 안에 채팅방 만들기

안녕하세요. 이번 시간에는 Bluemix를 활용하여 간단한 채팅방을 만들어보는 시간을 가지도록 하겠습니다. 사실 채팅방 자체야 카톡이나 기타 여러가지 서비스가 있습니다만 이렇게 자신만의 채팅방을 쉽게 만들어보는 것도 가치가 있지 않을까요?? 채팅방 제작 방법 원문은 바로가기에서 확인이 가능합니다.

STEP 1. 필요한 계정 및 지식

1. Bluemix 계정

2. HTML, CSS, Java Script의 기본 이해

DEMO 바로가기

CODE 다운받으러 가기

STEP 1. Node-RED App 만들기

Node-RED는 Open Source로서 시각화 기반 개발 TOOL입니다. 개발에 관련된 기본 지식이 있으면 꽤 쉽게 개발을 할 수 있으며, 주로 IoT 관련 개발에 주목을 받고 있습니다. 즉, 아래와 같이 얼기설기 연결만 해도 플로우를 구축할 수 있단 얘기죠. 물론 세부 설정은 해야되기 때문에 어느 정도 개발 지식은 필요합니다.

본격적으로 Bluemix(바로가기)에 접속하여 Node-RED App을 만들어보겠습니다. 우선 Bluemix에 접속한 뒤 카탈로그로 이동해서 node-red를 검색하면 아래와 같이 node-red starter를 확인할 수 있습니다.

node-red를 클릭한 뒤 별도의 이름을 지정해주고 개설을 누릅니다. 저는 임의의 이름으로 denverchat으로 기입하고 작성을 눌렀습니다. 그러면 이렇게 App이 시작되는 것을 볼 수가 있습니다.

개설이 완료되었다면 아까 지정한 사이트 주소. 저의 경우는 denverchat을 했으니까 http://denverchat.mybluemix.net 을 치고 들어가게 되면 아래와 같이 Node-RED 에디터가 뜨게 됩니다. 'Go to your Node-RED flow editor'를 눌러줍니다.

STEP2. Node-RED로 채팅방 준비하기

Node-RED 에디터를 열게 되면 아래와 같이 창이 뜨게 됩니다. 좌측은 각종 기능들이 달린 block이고, 우측은 그것을 드래그 앤 드랍으로 깔아놓는 곳입니다.

원문의 Repository(바로가기)에 들어가서 nodechat.json 파일을 연 뒤 내부의 코드를 복사합니다.

그럼 다음 다시 에디터로 돌아가서 우측 상단의 메뉴 아이콘을 누른 뒤, Import > Clipboard를 눌러서 창을 띄운 뒤 아까 복사한 코드를 붙여넣은 뒤 Import를 누르면 Flow가 뜨게 됩니다. 되게 간편하죠 -_-ㅋㅋㅋ 그러면 준비가 끝나게 됩니다.

STEP3. Deploy해서 실제 채팅방 오픈하기

플로우가 뜨면, 우측 상단의 Deploy 버튼을 누릅니다. 그러면 successful이 뜨고 채팅방 만들기가 완료되었습니다. 완전 간단하죠??

이제 실제 채팅방을 들어가봅시다. 앞서 작성한 주소 http://[임의의 이름].mybluemix.net/chat 으로 들어가면 채팅방을 확이할 수가 있습니다. 제 경우는 denverchat.mybluemix.net/chat이 주소가 되겠네요. 해당 주소를 알고 있는 사람은 누구나 접속해서 통화를 나눌 수가 있습니다. 

STEP4. 원리 이해하기

좀 더 정확한 자료는 원문(바로가기)을 참고하셔야 되지만 대략적으로 요약드리면 다음과 같습니다. 우선 Node-RED로 돌아가서 에디터 창에서 보이는 첫번째 플로우는 WebSocket in >Function > Websocket out으로 이뤄지는 구조로서 Web socket Protocol을 사용하여 사용자들간 커뮤니케이션 채널을 만들어주고 메시지를 받아서 채널에 접속한 모든 클라이언트에게 뿌려주는(broadcast)하는 기능을 담당합니다.

 두번째 플로우는 클라이언트-사이드 플로우로서 앞서 첫번재 플로우의 메시지 돌리는 것들을 채팅방 창에 뿌려주는 렌더링하는 역할을 담당합니다. 그래서 우리는 HTML로 된 채팅방 창에서 메시지들을 볼 수가 있게 됩니다.

Node-RED는 이렇게 기존의 복잡한 개발 방식을 선을 이어주는 것만으로도 귀차니즘을 꽤 많이 해소해줄 수 있는 좋은 툴이라 할 수 있습니다. 그리고 이 채팅방에서 연결 고리를 계속 만들어나가는 방식으로 또다른 부가 기능들을 생성하고 관리할 수도 있을 것입니다. 5분 만에 채팅방 만들기는 다들 성공하셨으리라 믿습니다.. 제가 봐도 이건 쉬운지라.. 짧은 글 읽어주셔서 감사합니다. 다음에는 또 다른 이야기로 찾아뵙겠습니다.