Node.js의 공부가 지도상에서 이야기할 수 있는
채팅 앱의 속편.

채팅방 UI 구현

채팅방을 만드는 흐름이 엉망이었기 때문에 Facaebook 메신저와 연계하는 방법을 모색해 보았다.

메신저의 Conversation에는 ID가 흔들리고 있어, 각각의 Conversation마다 참가하고 있는 유저를 그룹으로 관리할 수 있으므로, Conversation ID와 참가 유저를 묶는 방법으로 구현.

앱을 시작한 유저는 자신이 참가하고 있는 Conversation의 리스트 밖에 나오지 않기 때문에, 자신이 참가하고 있지 않은 채팅 룸에는 넣지 않는 로직이 성립한다.

완성은 이런 느낌.

가장 간단한 Facebook 로그인 (OAuth2) 구현 방법

구현 흐름

UI는 Bootstrap의 Panel을 5개 준비.

views/index.ejs

            <div class="room1 panel panel-default">
              <div class="panel-heading"><b>るーむ１</b></div>
              <div class="panel-body"></div>
            </div>
            <div class="room2 panel panel-default">
              <div class="panel-heading"><b>るーむ２</b></div>
              <div class="panel-body"></div>
            </div>
            <div class="room3 panel panel-default">
              <div class="panel-heading"><b>るーむ３</b></div>
              <div class="panel-body"></div>
            </div>
            <div class="room4 panel panel-default">
              <div class="panel-heading"><b>るーむ４</b></div>
              <div class="panel-body"></div>
            </div>
            <div class="room5 panel panel-default">
              <div class="panel-heading"><b>るーむ５</b></div>
              <div class="panel-body"></div>
            </div>

스크립트로 로그인한 사용자의 Conversation 목록을 Facebook SDK에서 가져옵니다.

          FB.api('/me/conversations', { access_token: mytoken }, function(conv) {
            console.log('conversations: ', conv);
          });

응답 (conv)의 내용에서 다음을 제거합니다.

Conversation ID: conv.data[].id

Conversation 참여자 ID: conv.data[].participants.data[].id

참가 유저의 ID를 빼내는 것은 참가 유저를 아이콘 화상으로 표시하고 싶으니까.
취득한 Conversation ID는 Panel의 DOM ID에, 참가 유저의 ID는 img 태그에 따라 이미지화해 Panel의 body에 삽입.

views/index.ejs

          FB.api('/me/conversations', { access_token: mytoken }, function(conv) {
            console.log('conversations: ', conv);
            for(var i=0; i<5; i++) {
              conversations.push({ id: conv.data[i].id, title: 'no title'});
              for(var j=0; j<conv.data[i].participants.data.length; j++) {
                $('.room' + String(i+1) + '> .panel-body').append(createMemberIcon(conv.data[i].participants.data[j].id));
              }
              $('.room' + String(i+1) + '> .panel-heading').attr('id', conv.data[i].id);
            }
            viewRooms(); // チャットルーム画面へ
          });

      function createMemberIcon(id) {
        var memberIcon = $('<img/>').attr("src", 'https://graph.facebook.com/' + id + '/picture').addClass('member-icon');
        return memberIcon;
      }

Conversation이 5 미만일 때의 대응

Conversation < 5 && Conversation > 0

그룹이 없는 패널 삭제

views/index.ejs

    $('.room' + String(i+1)).css('display', 'none');

Conversation === 0

로그인 후 메시지 표시: "메신저 그룹이 하나도 없습니다. Facebook 또는 Messenger 앱에서 루무를 공유하려는 친구에게 메시지를 보내 메신저 그룹을 만드세요."

views/index.ejs

    $('#status').css('font-size', '24px');
    $('#status').text('メッセンジャー グループが1つもありません。Facebook あるいは Messenger アプリからるーむを共有したい仲間にメッセージを送ってメッセンジャー グループを作成してください。');

이상입니다.