[스프링] 커뮤니티 알림목록

전 글의, 웹소켓을 이용한 실시간 푸시알림과 같이 구현한 기능이다.

 

웹소켓의 값을 이용해 db에 저장되게 하기엔 지금 프로젝트를 마무리 할 시간에 너무 촉박하고,

 

아직은 웹소켓 사용에 익숙해지지 않았기 때문에 , ajax를 이용해서 구현했다.

 

---

뷰

var memberId = ${login.memberId};

//알람목록
function alramList(){
	console.log("alramList")
	var memberId = "${login.memberId}";
	 $.ajax({
	        url : '/board/alramList',
	        type : 'get',
	        data : {'memberId' : memberId },
	        dataType : "json", 
	        success : function(data){
	         	var a='';
	         	 $.each(data, function(key, value){ 
	         		var categori = value.categori ;
	         		a += '<div>';
					a += '<div class="small text-gray-500">'+value.alramDate+'</div>';
					if(categori == "reply"){
					a += '<span class="font-weight-bold"><a href="#"  onclick="alramClick('+value.bgno+','+value.bno+',\''+value.fromId+'\');">'+value.toId+'님이 '+value.title+' 에 댓글을 달았습니다</a></span>';
					}else if(categori == "questionCheck"){
					a += '<span class="font-weight-bold"><a href="#" onclick="alramClick('+value.bgno+','+value.bno+',\''+value.fromId+'\');">'+value.toId+'님이 '+value.title+' 에 답변을 채택했습니다</a></span>';

					}
					a += '</div><hr/>';	
					
	         		 
	         		 
	         	 });
	         	 
	         	 $("#alramList").html(a);
	         	 
	        }
	        
	    
	    });
	 }
//목록끝

//목록클릭
function alramClick(bgno,bno,formId){
	console.log("alramClick")
	 $.ajax({
	        url : '/board/alramClick',
	        type : 'post',
	        data : {'memberId' : formId , 'bno':bno},
	        dataType : "json", 
	        success : function(){
	        
	        }
	        
	    
	    });
	location.href="/board/readView?bno="+bno+"&bgno="+bgno;
	
}



//알람
function alramCount(){
	console.log("alram")
	var memberId = "${login.memberId}";
	 $.ajax({
	        url : '/board/alramCount',
	        type : 'get',
	        data : {'memberId' : memberId },
	        dataType : "json", 
	        success : function(alram){
	         	console.log(alram);
	         	console.log("알람성공");
	       $('#alramCount').text(alram);
	        }
	    
	    });
}
//

 

알림목록은 작성한 게시글에 댓글이 달렸을때와 채택이 되었을때만 알림목록에 추가되도록 했다.

 

좋아요,스크랩 시에는 푸시알림이 오지만, 굳이 그 기록이 알림목록에 보일 필요는 없을 것 같아서 제외했다.

 

댓글작성, 채택 시에 알람테이블에 insert되고 , 클릭시엔 delete되도록 구현했는데,

 

게시글번호를 기준으로 delete해서 , 

 

같은 게시글에서 온 알람은 하나의 알람을 클릭해서 해당 게시물로 이동할때 모두 없어지도록 구현했다.

 

select문의 Count로 알람이 온 수를 구해왔다.

 

---

Mapper.xml

<!-- 알람기능 -->

<insert id="insertAlram">
insert into MP_ALRAM (NO,TOID , FROMID , BNO , TITLE , CATEGORI ,BGNO) 
values ((SELECT NVL(MAX(NO), 0) + 1 FROM MP_ALRAM),#{toid},#{fromid},#{bno},#{title},#{categori},#{bgno})
</insert>


<select id="alramCount" resultType="int">
select count(*) from MP_ALRAM where FROMID = #{memberId}
</select>

<select id="alramList" resultType="kr.co.vo.AlramVO">
<![CDATA[
select * from (select * from MP_ALRAM where FROMID = #{memberId} ) where rowNUM <=6 order by ALRAMDATE DESC
]]>
</select>

<delete id="alramClick">
delete from MP_ALRAM where FROMID = #{memberId} AND bno = #{bno}
</delete>

 

 

---

Controller

 

		//알람
				@ResponseBody
				@RequestMapping(value = "/board/insertAlram", method=RequestMethod.POST)
				public int insertAlram (String toId , String fromId , String bno , String title , String categori,String bgno) throws Exception{
					logger.info("알람insert"+categori+"//"+fromId+toId+bno+categori+title);
					int alram = 1;
					
					service.insertAlram(toId, fromId, bno, title, categori,bgno);
					
					return alram;
				}
		
		//알람수
				@ResponseBody
				@RequestMapping(value = "/board/alramCount", method=RequestMethod.GET)
				public int alramCount (String memberId) throws Exception{
					
					int alram = service.alramCount(memberId);
					
					return alram;
				}	
				
				
				//알람목록
				@ResponseBody
				@RequestMapping(value = "/board/alramList", method=RequestMethod.GET)
				public List<AlramVO> alramList(String memberId) throws Exception{
										
					return service.alramList(memberId);
				}	
				
				
				//알람클릭
				@ResponseBody
				@RequestMapping(value = "/board/alramClick", method=RequestMethod.POST)
				public String alramClick(String memberId, int bno) throws Exception{
					logger.info("알람클릭");
					service.alramClick(memberId, bno);
					
					return null;
				}

---

뷰

//댓글 등록
function commentInsert(insertData){
	console.debug("reply.socket",socket)
		
    $.ajax({
        url : '/reply/writeReply',
        type : 'post',
        data : insertData,
        processData: false, contentType: false,

        enctype : 'multipart/form-data', 
        success : function(data){
         
                commentList(); //댓글 작성 후 댓글 목록 reload
                $('[name=content]').val('');
           		$('.myEditor').summernote('reset');
                
           		//소켓
           		if(readWriter != writer){
           		if(socket){
        			let socketMsg = "reply,"+writer+","+readWriter+","+bno+","+readTitle+","+bgno;
        			console.log(socketMsg);
        			socket.send(socketMsg);
           		}
        	}
        }
    
    });
	
	//알람
	if(readWriter != writer){
	 $.ajax({
	        url : '/board/insertAlram',
	        type : 'post',
	        data : {'toId': writer , 'fromId': readWriter , 'bno':bno,'title':readTitle, 'categori': "reply",'bgno':bgno },
	        dataType : "json", 
	        success : function(alram){
	         		alret("알람입력성공");
	              if(alram == 1){
	            	  alert("알람입력성공")
	              }else{
	            	  alert("알람입력실패")
	              }
	        }
	    
	    });
	}
	//알람끝
	
	
	
}
 //댓글등록끝

댓글 등록시, 알람테이블에 insert 되도록 해줬다.

 

**

알람테이블 컬럼은

no (PR) , TOID , FROMID , BNO , TITLE , CATEGORI , BGNO 이다.

 

---

결과

 

012

3장 슬라이드

1. 알림 수

 

2. 알림목록

 

3. 하나의 알림목록 클릭 후, 같은 게시글의 목록은 모두 없어짐