16) 웹소켓(WebSocket)을 활용한 댓글 답글(대댓글)알림 - Spring Project(OTT Service)

해당 프로젝트는 2023/01/25 ~ 2023/03/12 내에 진행되는
아카데미 내 수강생들끼리 팀을 나누어 진행한 모의 프로젝트입니다.
팀원은 6명이었으며, 프로젝트 리더를 맡았습니다.

 

이전 글 목록

1) 주어진 RFP를 바탕으로 주제 선정 - Spring Project(OTT 서비스)
2) ERD 설계 - Spring Project(OTT 서비스)
3) 회원 가입 기능 구현 - Spring Project (OTT 서비스)
4) 로그인, 로그아웃 기능 구현 - Spring Project (OTT 서비스)
5) 상세 페이지 및 회원 정보 수정 - Spring Project (OTT 서비스)
6) CRUD를 한번에 → 게시판 만들기(QNA게시판) - Spring Project(Mybatis) (OTT 서비스)
7) 게시판 페이징 처리 - Spring Project (OTT 서비스)
8) 카카오 지도 API 사용하기 - Spring Project (OTT 서비스)
9) (네아로) 네이버 로그인 API 활용 사이트 로그인 및 회원가입 - SPRING Project(OTT 서비스)
10) 카카오 로그인 API 사용하기(내 사이트 로그인 및 회원가입) - Spring Project(OTT Service)
11) 아임포트(포트원) API를 이용한 결제처리 - Spring Project(OTT Service)
12) 관리자 페이지 만들기(데이터 통계 및 chart.js, 유저 알고리즘) - Spring Project(OTT Service)
13) 관리자 페이지 (영상 정보 업로드 시 여러 테이블에 insert 및 update) - Spring Project(OTT Service)
14) 웹 소켓(Web Socket)을 활용한 실시간 알림 - Spring Service(OTT Service)
15) 웹소켓(WebSocket)을 활용한 관리자(1:N)와 사용자(1:1) 간의 채팅 만들기 - Spring Project(OTT Service)

 

 

우리 프로젝트에서 사용하는 웹소켓 마지막 장이다.

팀원의 대댓글 구현이 완료되어 대댓글 입력 시 댓글 작성자에게 알림을 보내는 기능을 마지막으로

어렵고도 재밌었던 소켓 다루기를 끝내보도록 하자.

 

 

대댓글 알림 만들기

---

우선 대댓글 입력 시에 대한 상황이기 때문에 대댓글이 작성될 때 정보를 보내는 쪽에서 같이 처리했다.

 

따로 스크립트에서 보낼 녀석이 없었다. 팀원이 설계해 놓은 코드를 보니

pid(원댓글 번호), 영상id를 다 가져오기 때문에 추가로 ajax에 담아 보낼 데이터가 없어서 바로 컨트롤러로 왔다.

Controller

//대댓글 작성하기 - 02.28 장민실
@RequestMapping(value="cocomwrite", method=RequestMethod.POST)
public ModelAndView cocomInsert(int pid, CommentDto dto, HttpSession session, ModelAndView mv) {
    String user_id = session.getAttribute("user_id").toString();
    String nickname = session.getAttribute("nickname").toString();
    int id = userService.getid(user_id);

    int depth = 1;          // depth=0 원댓글, depth=1 대댓글
    dto.setDepth(depth);
    dto.setPid(pid);

    dto.setUser_id(id);
    dto.setNickname(nickname);	

    commentService.cocomInsert(dto);

    /************************알람 - 03.06 장재호************************/
    alarmService.addComment(dto);
    /*****************************************************************/
    mv.addObject("cocom_dto", dto);
    return null;
}

 

/************************알람 - 03.06 장재호************************/
alarmService.addComment(dto);
/*****************************************************************/

 

Service / Impl / Dao

//Service
void addComment(CommentDto dto);

//ServiceImpl
@Override
public void addComment(CommentDto dto) {
    alarmDao.addComment(dto);		
}

//Dao
public void addComment(CommentDto dto) {
    ss.insert("alarm.addComment", dto);		
}

 

SQL.xml

<insert id="addComment">
    insert into ALARM (USER_ID, CODE, PREFIX)
    values ((select USER_ID from VIDEO_COMMENT where PID=#{pid} and DEPTH=0),
    "NewComment", (select TITLE from VIDEO where VIDEO_ID=#{video_id}))
</insert>

그저 insert만 하면 된다. QNA와 달리 로그인 했을 때 댓글 작성 권한이 있기 때문에 따로 로그인 여부의 체크는 필요없다.

댓글 작성자와, 해당 영상의 제목을 테이블에 넣었다. 이를 활용하여 알림을 주기위한 설계였다.

 

 

Handler.java

protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {

	(...생략...)
    else if(code.equals("NewComment")) { //03.06 장재호 댓글추가
        code = "답글이 등록되었습니다.";
        prefix += " 영상";

    }
	(...생략...)
}

기존 알림을 보내는 Handler에서 조건이 ALARM 테이블에 code로 구분해서 JS에 전달하는 것이었기 때문에 조건만 따로 생성해주었다. 이게 끝이다.

소켓 알림에 대한 자세한 코드는 아래 링크에서 확인할 수 있다.

14) 웹 소켓(Web Socket)을 활용한 실시간 알림 - Spring Service(OTT Service)

 

확인

---

디자인은 진행중이니 양해부탁드립니다.

 

 

 

원 댓글에 답글이 작성이되면 아래처럼 ALARM 테이블에 NewComment로 저장되고

 

 

 

알람이 올바르게 등록되었다.