ajax 를 이용한 실시간 랭킹 반영

개인적으로 만들고 있는 프로젝트에서 조회수가 가장 높은 글 top10을 만들어주는 기능을 구현하려고 했다.

여러가지 방법들을 찾아봤지만 ajax 를 사용하는 방법이 가장 간편할 것 같아서 선택했다.

setInterval 을 사용해서 ajax 의 요청을 일정주기마다 요청하는것인데

처음에 생각했을때는 많은 유저가 접속하는 상황이라던지 관리할 데이터가 크면 

서버에 부하를 줄 수도 있고  setInterval 을 요청하는 주기안에 요청이 완료되지 않으면 

발생할 수 있는 문제점들 때문에 잠시 고민했지만

 

db에서 많은 순서로 10개까지만 데이터를 가져오고 또 1분에 한번씩만 처리를 해주면 되는 기능이였기 때문에

그대로 진행하기로 했다.

 

서론은 여기까지하고 구현한 코드를 먼저 적어보겠다.

 

 

$(function () {
		    $.ajax({
		    	url: "/documentmostList",
		    	type: "get",
		    	dataType: "json",
		    	success: function (result) {
		    	 		console.log(result);
			    	    var contact = JSON.parse(JSON.stringify(result));
			    	    for (var i = 0; i < contact.length; i++) {
			    				var div = document.createElement('div');
			    			    div.innerHTML = document.getElementById('mostwiki').innerHTML;
			    				document.getElementById('mostwikiList').appendChild(div);
			    				    
			    				var list = document.getElementsByClassName("titleclass");//같은 클래스이름을 가진애들을 리스트로 받음
			    				for (var j = 0; j < list.length; j++) {
			    				  list[j].setAttribute("id", "title" + j);//id 이름을 하나씩 증가시키면서 변경해줌
			    				 }
			    				 if(contact[i].content != null){
			    				    $("#title"+i).append(contact[i].title);
			    				    var pagetitle = contact[i].title;
			    				    $("#title"+i).attr("href","/wikiReadRequest?title="+pagetitle);
			    				    }
		    					}
		    	       
		    	  		 	 }
		    	   		 });  
		    		 timer = setInterval( function () {
		    	   	 $.ajax({
		    	        url: "/documentmostList",
		    	        type: "get",
		    	        dataType: "json",
		    	        success: function (result) {
		    	 				console.log(result);
			    	        	var contact = JSON.parse(JSON.stringify(result));
			    	    		for (var i = 0; i < contact.length; i++) {
			    	    	
			    				    var div = document.createElement('div');
			    				    div.innerHTML = document.getElementById('mostwiki').innerHTML;
			    				    document.getElementById('mostwikiList').appendChild(div);
			    				    
			    				    var list = document.getElementsByClassName("titleclass");//같은 클래스이름을 가진애들을 리스트로 받음
			    				    for (var j = 0; j < list.length; j++) {
			    				     list[j].setAttribute("id", "title" + j);//id 이름을 하나씩 증가시키면서 변경해줌
			    				    }
			    				  
			    				    if(contact[i].content != null){
			    				    	$("#title"+i).html(contact[i].title);
			    				    	var pagetitle = contact[i].title;
			    				    	$("#title"+i).attr("href","/wikiReadRequest?title="+pagetitle);
			    				    }
		    					}
		    	       
		    	  		 	 }
		    	   		 });  
		     		},10000);
		     });

 

붙여넣으니 코드가 길어보이지만 사실상 setInterval 부분과 윗부분은 같은 코드다.

 

내가 자바스크립트를 잘다루는게 아니라서 그런지 비효율적으로(?) 만든거 같지만

위에 나오는 ajax는 제일 먼저 화면을 띄웠을때 랭킹이 나오게 하기 위해서 작성했고

아래의 setInterval 부분은 처음 갱신된 시점부터 10초마다 새로운 값을 반영하는 요청을 보내기 위해서 작성했다.

1분이 아니라 10초로 설정해둔건 잘되는지 테스트 해보기 위해서 적어둔것이지 확인 후 수정을 했다.

 

간단히 설명을 하자면

 

spring 컨트롤러에서 url 의 요청에 따라 처리한 db에서 꺼내온 10개의 list 를

 

objectMapper.writeValueAsString(wikidocumentMostList); //wikidocumentMostList 는 db에서 꺼내온 List 객체다.

 

위 코드처럼 objectMapper 를 통해서 자바스크립트로 json 형식의 string 으로 만들어준다.

* objectMapper 는 jackson 이라는 자바용 json 라이브러리인데  아래 링크를 참조하면 좋을 것 같다.

https://engaspect.tistory.com/27

Spring에서 Json 정리

 

그리고 ajax에서 넘어온 string 을 파싱해서 객체에 담으면 그 객체에 담긴 값을 가지고

미리 만들어둔 mostwikiList 라는 id 를 가진 div에 새로운 div를 생성해서 추가 시키는식으로 구현했다.

 

새벽이라 정신없이 기록을 남기긴 했는데 다음에 다시 봤을때 내가 잘 기억하기를 바라면서...