자바스크립트 채팅 4

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

채팅시 프로필 이미지를 채팅과 함께 불러오는 기능을 구현해보았다. 사고과정 0. 유저는 가입 또는 마이페이지에서 프로필 이미지를 설정한다. (DB에 이미지가 저장된다.) 1. 채팅룸을 생성할 때 DB에 게시글 작성 유저의 프로필이미지도 같이 저장된다. 2. 채팅서버에서 DB의 이미지를 불러와 채팅 ejs로 나의 이미지와 대화한 상대방의 이미지를 보내준다. 3. 1번에서 나의 이미지와 상대방의 이미지를 구분해서 보내는 기준을 정한다. 4. ejs 파일에서도 같은 기준으로 나의 이미지와 상대방의 이미지를 구분하여 렌더링한다. 작성코드 및 해설 (chat.js) router.get('/detail', isLogin, async (req, res) => { let chats = await db .collecti..

[프로젝트] 게시판 | 3. 채팅 목록 최신순 정렬하는 법

가장 마지막으로 채팅한 시간을 기준으로 채팅방을 위에서부터 최신순으로 정렬하고자 한다. 사고과정1. 최신 채팅을 포함하는 요소를 모두 가져온 후, 각 요소의 textContext를 읽어 배열로 만든다. 2. 각 요소에 original Index를 붙인다. (=시간 순으로 정렬되지 않은 원래 배열) 3. sort()를 활용하여 각 요소의 순차를 비교하여 새로운 정렬을 만든다. 4. 새로운 정렬에 new Index를 붙인다. (=시간 순으로 정렬된 새 배열) 5. 목록 하나에 해당하는 list-box 요소를 모두 가져온다. 6. 원본배열의 시간과 사본 배열의 시간이 정확히 일치하는 요소를 찾아 원본 list-box의 order를 사본 배열의 new Index로 교체한다. 어려웠던 점간단하게 구현할 줄 알았는..

[프로젝트] 게시판 | 2. 가장 마지막에 한 채팅 보여주는 법(feat. 생성된 채팅이 없으면 채팅방 자체 생성시간 불러오기)

위와 같이 채팅 목록에서 가장 마지막으로 한 채팅을 띄우고자 한다. 채팅방 별로 가장 최근 채팅을 불러오되, 아직 생성된 채팅이 없다면 채팅룸 자체의 생성시간을 띄우겠다. Part1. 채팅방 별로 가장 마지막 채팅 불러오기 (chat.js) router.get('/list', isLogin, async (req, res) => { // chatroom null 일 경우 대비 예외처리 try { let chatlist = await db .collection('chatroom') .find({ member: req.user._id }) .toArray(); console.log('chatlist', chatlist); let chats = []; // 룸 별로 가장 최근 채팅이 담기는 곳 if (chatl..

[프로젝트] 게시판 | 1. 채팅룸 생성여부에 따른 유저 이동 예외 처리 하는 법

채팅 서버의 예외처리 하는 로직 채팅방 생성 및 유저 접근과 관련한 다양한 예외처리 로직을 구현하고자 한다. 다음은 생각할 수 있는 아이디어 몇 가지이다: 1. 신규 채팅방을 생성하고 해당 채팅방에 접근할 때는 또 다른 채팅방을 만드는 것이 아니라 기존 채팅룸으로 유저를 안내한다. 2. 글 작성자 본인과는 채팅할 수 없다. 사고과정 사전에 유저가(detail.ejs) 보내줘야 하는 정보 - writerId, chatName(게시글 이름), postId - 주의할 점은 a 링크 안에 공백 또는 줄바꿈이 없어야 한다. 0. postId 와 채팅방의 멤버를 근거로(조건을 모두 충족하는 것은 하나밖에 없음) 이미 생성된 채팅방이 있는지 DB에서 찾아본다. 1. 만약 이미 생성된 채팅방이 있다면, 해당 채팅룸으로..

728x90
LIST