[프로젝트] 게시판 | 4. 채팅 유저의 프로필 이미지 보여주기 & 프로필이 상대방 것인지 여부 체크하는 법

 

 

 

 

채팅시 프로필 이미지를 채팅과 함께 불러오는 기능을 구현해보았다.

 

사고과정

0. 유저는 가입 또는 마이페이지에서 프로필 이미지를 설정한다. (DB에 이미지가 저장된다.)
1. 채팅룸을 생성할 때 DB에 게시글 작성 유저의 프로필이미지도 같이 저장된다.
2. 채팅서버에서 DB의 이미지를 불러와 채팅 ejs로 나의 이미지와 대화한 상대방의 이미지를 보내준다.
3. 1번에서 나의 이미지와 상대방의 이미지를 구분해서 보내는 기준을 정한다.
4. ejs 파일에서도 같은 기준으로 나의 이미지와 상대방의 이미지를 구분하여 렌더링한다.

 

 

저장된 이미지가 null

저장된 이미지가 있음

 

작성코드 및 해설

 

(chat.js)

router.get('/detail', isLogin, async (req, res) => {
  let chats = await db
    .collection('chat')
    .find({ roomId: new ObjectId(req.query.roomid) })
    .toArray();

  let roomID = await db
    .collection('chatroom')
    .findOne({ _id: new ObjectId(req.query.roomid) });

  // 저장된 img가 없는 경우도 있어 별도 함수 만듦
  function showImage() {
    // 상대방의 이미지는 내 이미지와 일치하지 않는 것을 조건을 줌
    let imgs = roomID.userImages;
    if (imgs) {
      let yourImg = imgs.filter((img) => img !== req.user.img);
      return yourImg;
    }
    return null;
  }

 

• DB에서 불러온 imgs 에는 나와, 내가 대화한 상대방의 프로필 이미지 총 2개가 들어있다.
• 따라서 req.user.img(로그인한 본인의 프로필 이미지)가 imgs 중 하나와 일치하지 않는다는 것은 그 이미지는 내가 대화한 상대방의 이미지가 된다는 의미로, 해당 이미지를 상대방의 이미지로 return 시킨다.
• 저장된 img 가 없는 경우에는 null을 return 한다.

 

(chatDetail.ejs)

<% for(let i=0; i<chats.length; i++) { %>
    <div class="chat-box <%= (chats[i].userId == String(requestedUserId)) ? 'mine' : 'yours' %>"> 
      <% if(chats[i].userId == String(requestedUserId)) { %>
        <span><%= chats[i].date %></span>
        <img src="<%=userimg%>" class="userIMG"></img>
        <div><%= chats[i].userName %>: <%= chats[i].chats %></div>
        <% } else { %>
        <img src="<%=yourimg%>" class="writerIMG"></img>
        <div><%= chats[i].userName %>: <%= chats[i].chats %></div>
        <span><%= chats[i].date %></span>
      <% } %>
    </div>
 <% } %>

 

• 마찬가지로 ejs 파일에서도 나와 상대방의 이미지를 전송하면서 현재 로그인 한 유저의 id 정보도 같이 전송하는데, 이 id를 채팅을 보낸 사람의 id와 대조하여 나인지 상대방인지 구분한다.
• 채팅 작성자의 id == 로그인한 유저   -> userImg(글 작성자인 나의 이미지) 를 렌더링
• 채팅 작성자의 id !== 로그인한 유저   -> yourImg(대화 상대방의 이미지) 를 렌더링