[Node+MongoDB]채팅방기능1

김나나·2024년 8월 31일

Node.js

목록 보기
36/50
post-thumbnail

우선 실시간이 아닌 채팅 서비스부터 구현해보자.

채팅기능
1. 글마다 채팅 버튼 만들어 채팅방을 누르면 채팅방 생성
2. 자신이 속해있는 채팅방 목록 페이지
3. 채팅방 누르면 채팅방 상세페이지
4. 채팅방 상세페이지에서 메세지 전송시 상대에게 전달, DB에 전달


  1. 글 상세페이지인 detail.ejs에 "채팅하기"버튼을 추가하며,
    해당 버튼을 누르면 글쓴이id와 현재 로그인 되어있는 유저의 id를 서버로 넘겨주자.
<a href="/chat/request?writerId=글쓴이_id">채팅하기</a>

  1. server.js에서 get요청 처리해주며
app.get("/chat/request", async (요청, 응답) => {
  await db.collection("chatroom").insertOne({
    member: [요청.user._id, new ObjectId(요청.query.writerId)],
    date: new Date(),
  });
  응답.render("채팅방목록페이지");
});

member에 요청자 _id를 요청.user._id로 받아와 넣고, 글쓴이의 _id를 query string으로 받아오고 있으니 요청.query.writerId로 받아온 다음, 채팅방 목록 페이지로 넘겨주자.

  1. 채팅방 리스트 페이지를 하나 생성 chatList.ejs

채팅방 리스트를 보여주는 get 요청 처리 코드 server.js에서 만들어줌

이제 이 채팅방을 보여줄 때, 자신이 속한 채팅방을 DB에서 찾아와서 보여줘야하니

app.get("/chat/list", async (요청, 응답) => {
  await db.collection("chatroom").find().toArray();
  응답.render("chatList.ejs");
});

여기서 find함수를 저렇게 작성하면 모든 채팅방을 보여주게 되니까
.find({ member : 요청.user._id })이렇게 작성해주면 로그인 되어있는 사용자가 속해있는 채팅방만 빼올 수 있을 것 같다.

  1. 이제 다시 chatList.ejs로 돌아가서 방금 보낸 result값을 받아와 넣어주자

  2. 채팅하기를 눌렀을 때, 우선 채팅방 목록이 나오도록 해주고 테스트해보면

    2번 채팅하기 눌렀더니 채팅방이 2개가 되었다..

  3. 그럼 이제 채팅방을 눌렀을 때, 해당 채팅방의 상세페이지를 보여주자

우선 채팅방ejs파일에서 a태그 추가

서버에 get요청 처리하는 api 하나 생성하고 상세페이지 ejs파일도 생성

  1. 각 채팅방마다 상세페이지를 만들어줄수는 없으니 url 파라미터 사용

저 파라미터 입력값부분은 채팅 리스트 ejs 코드 수정해주며 파라미터값을 넘길 수 있도록 해줘야겠다..

profile
10분의 정리로 10시간을 아낄 수 있다는 마음으로 글을 작성하고 있습니다💕

0개의 댓글