210427 TIL(D+74 스프링 투표 구현, Crawling, 커스텀 어노테이션 활용한 AOP, 웹 소켓)

- Spring으로 투표 기능 구현하기

1. 투표 기능에 필요한 DB 테이블 작성

POLL 테이블 : 투표 글에 대한 번호(PK)와 작성자, 작성제목, 투표 시작 날짜, 끝나는 날짜, 투표 항목 개수, 총 투표수, 글 생성 시간을 담고 있다.

POLLSUB 테이블 : POLL 테이블의 POLLID(투표글 번호)를 받아와 투표 항목들 각각의 이름과 투표 수를 담아둔다.

VOTER 테이블 : ID가 투표했을 때 어떤 투표글에 어떤 항목을 투표했는지와 투표한 시간을 담아둔다.

2. MyBatis를 활용한 쿼리문 작성

Poll.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  
<mapper namespace="Poll">

<!-- 모든 투표 목록 -->
<select id="getPollAllList" resultType="bit.com.a.poll.PollDto">
	SELECT POLLID, ID, QUESTION, SDATE, EDATE, ITEMCOUNT, POLLTOTAL, REGDATE
	FROM POLL
	ORDER BY SDATE DESC
</select>


<!-- 투표를 했는지 여부 확인 (1이면 투표한 것)-->
<select id="isVote" parameterType="bit.com.a.poll.Voter" resultType="int">
	SELECT NVL(COUNT(*), 0)
	FROM VOTER
	WHERE POLLID=#{pollId} AND ID=#{id}
</select>
	
	
	
<!-- 투표 만들기 -->
<insert id="makePoll" parameterType="bit.com.a.poll.PollDto">
	INSERT INTO POLL(POLLID, ID, QUESTION, SDATE, EDATE, ITEMCOUNT, POLLTOTAL, REGDATE)
	VALUES(POLL_SEQ.NEXTVAL, #{id}, #{question}, #{sDate}, #{eDate}, #{itemCount}, 0, SYSDATE)
</insert>	


<!-- 투표 항목들 -->
<insert id="makePollSub" parameterType="bit.com.a.poll.PollSubDto">
	INSERT INTO POLLSUB(POLLSUBID, POLLID, ANSWER, ACOUNT)
	VALUES(POLLSUB_SEQ.NEXTVAL, (SELECT NVL(MAX(POLLID),0) FROM POLL), #{answer}, 0)
</insert>


<!-- 투표 정보 취득 -->
<select id="getPoll" parameterType="bit.com.a.poll.PollDto" resultType="bit.com.a.poll.PollDto">
	SELECT POLLID, ID, QUESTION, SDATE, EDATE, ITEMCOUNT, POLLTOTAL, REGDATE
	FROM POLL
	WHERE POLLID=#{pollId}
</select>
<!-- 투표 항목들 -->
<select id="getPollSubList" parameterType="bit.com.a.poll.PollDto" resultType="bit.com.a.poll.PollSubDto">
	SELECT POLLSUBID, POLLID, ANSWER, ACOUNT
	FROM POLLSUB
	WHERE POLLID=#{pollId}
</select>


<!--  투표했을 때  -->
<!-- 누가? -->
<insert id="pollingVoter" parameterType="bit.com.a.poll.Voter">
	INSERT INTO VOTER(VOTERID, POLLID, POLLSUBID, ID, REGDATE)
	VALUES(VOTER_SEQ.NEXTVAL, #{pollId}, #{pollSubId}, #{id}, SYSDATE)
</insert>
<!-- 어느 투표에 -->
<update id="pollingPoll" parameterType="bit.com.a.poll.Voter">
	UPDATE POLL
	SET POLLTOTAL=POLLTOTAL+1
	WHERE POLLID=#{pollId}
</update>
<!-- 어느 항목을 -->
<update id="pollingSub" parameterType="bit.com.a.poll.Voter">
	UPDATE POLLSUB
	SET ACOUNT=ACOUNT+1
	WHERE POLLSUBID=#{pollSubId} AND POLLID=#{pollId}
</update>

</mapper>

3. ServiceImpl에서 트랜잭션 처리

PollServiceImpl.java

package bit.com.a.poll;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class PollServiceImpl implements PollService {

	@Autowired
	PollDao dao;
	
	
	@Override
	public List<PollDto> getPollAllList(String id) {
		
		//모든 투표 목록을 가지고 온다.
		List<PollDto> list = dao.getPollAllList();
		
		//투표 참여했는지 확인 후 넘겨줄 목록 (한번만 참여 가능해야 하므로)
		List<PollDto> pList = new ArrayList<PollDto>();
		
		
		/* Voter 테이블에 기록이 있다면 해당 투표에 참여한 것 */
		for (PollDto poll : list) {
			int pollId = poll.getPollId();	// 투표글 번호를 꺼낸다.
			//투표했음 : 1, 투표안했음 : 2
			int count = dao.isVote(new Voter(pollId, 0, id));
			if (count == 1) {
				poll.setVote(true);
			} else {
				poll.setVote(false);
			}
			pList.add(poll);
		}
		
		return pList;
	}


	@Override
	public void makePoll(PollBean pBean) {
		
		// 투표 주제
		PollDto poll = new PollDto(pBean.getId(), pBean.getQuestion(), pBean.getsDate(), pBean.geteDate(), pBean.getItemCount(), 0);
		dao.makePoll(poll);
		
		//투표 항목들
		String answer[] = pBean.getPollNum();
		for (int i = 0; i < pBean.getItemCount(); i++) {
			PollSubDto pollSub = new PollSubDto();
			pollSub.setAnswer(answer[i]);
			dao.makePollSub(pollSub);
		}
	}


	@Override
	public PollDto getPoll(PollDto poll) {
		return dao.getPoll(poll);
	}


	@Override
	public List<PollSubDto> getPollSubList(PollDto poll) {
		return dao.getPollSubList(poll);
	}


	@Override
	public void polling(Voter voter) {
		
		dao.pollingVoter(voter);
		dao.pollingPoll(voter);
		dao.pollingSub(voter);
		
	}
	
	
}

4. Controller 작성

PollController.java

package bit.com.a.poll;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import bit.com.a.dto.MemberDto;

@Controller
public class PollController {

	@Autowired
	PollService service;
	
	
	@RequestMapping(value = "pollList.do", method = { RequestMethod.GET, RequestMethod.POST })
	public String pollList(Model model, HttpServletRequest req) {
		model.addAttribute("doc_title", "투표 목록");
		
		String id = ((MemberDto)req.getSession().getAttribute("login")).getId();
		
		List<PollDto> list = service.getPollAllList(id);
		model.addAttribute("pLists", list);
		
		return "pollList.tiles"; 
	}
	
	
	@RequestMapping(value = "pollMake.do", method = { RequestMethod.GET, RequestMethod.POST })
	public String pollMake(Model model) {
		model.addAttribute("doc_title", "투표 만들기");
		
		return "pollMake.tiles";
	}
	
	
	@RequestMapping(value = "pollMakeAf.do", method = { RequestMethod.GET, RequestMethod.POST })
	public String pollMakeAf(PollBean pBean) {
		
		service.makePoll(pBean);
		
		return "redirect:/pollList.do";
	}
	
	
	@RequestMapping(value = "pollDetail.do", method = { RequestMethod.GET, RequestMethod.POST })
	public String pollDetail(PollDto poll, Model model) {
		model.addAttribute("doc_title", "투표 내용");
		
		PollDto dto = service.getPoll(poll);
		List<PollSubDto> list = service.getPollSubList(poll);
		model.addAttribute("poll", dto);
		model.addAttribute("pollSubList", list);
		
		return "pollDetail.tiles";
	}
	
	
	@RequestMapping(value = "polling.do", method = { RequestMethod.GET, RequestMethod.POST })
	public String polling(Voter voter) {
		service.polling(voter);
		
		return "redirect:/pollList.do";
	}
	
	@RequestMapping(value = "pollResult.do", method = { RequestMethod.GET, RequestMethod.POST })
	public String pollResult(PollDto poll, Model model) {
		model.addAttribute("doc_title", "투표 결과");
		
		//PollTotal
		PollDto dto = service.getPoll(poll);
		//투표 항목들
		List<PollSubDto> list = service.getPollSubList(poll);
		model.addAttribute("poll", dto);
		model.addAttribute("pollSubList", list);
		
		return "pollResult.tiles";
	}
	
	
}

5. 뷰단 작성

pollList.jsp (리스트 페이지)

<%@page import="util.PollUtil"%>
<%@page import="bit.com.a.dto.MemberDto"%>
<%@page import="bit.com.a.poll.PollDto"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<%
	List<PollDto> pLists = (List<PollDto>)request.getAttribute("pLists");
	MemberDto mem = (MemberDto)session.getAttribute("login");
%>


<!-- 관리자 -->
<%
if(mem.getAuth() == 1) {
%>
	<table class="list_table" style="width: 95%;">
		<col width="50"><col width="50"><col width="300"><col width="100">
		<col width="100"><col width="50"><col width="50"><col width="100">	
		<tr>
			<th>번호</th>
			<th>아이디</th>
			<th>투표제목</th>
			<th>시작일</th>
			<th>종료일</th>
			<th>보기 개수</th>
			<th>투표횟수</th>
			<th>등록일</th>
		</tr>
		<%
		for(int i = 0; i < pLists.size(); i++) {
			PollDto poll = pLists.get(i);
			%>
			<tr bgcolor="#aabbcc">
				<td><%=i+1 %></td>
				<td><%=poll.getId() %></td>
				<td><%=poll.getQuestion() %></td>
				<td><%=poll.getsDate() %></td>
				<td><%=poll.geteDate() %></td>
				<td><%=poll.getItemCount() %></td>
				<td><%=poll.getPollTotal() %></td>
				<td><%=poll.getRegDate() %></td>
			</tr>
		<%
		}
		%>
	</table>

<!-- 사용자 -->
<% 
} else { 
%>

	<table class="list_table" style="width: 95%;">
		<col width="50"><col width="50"><col width="300"><col width="100"><col width="100">
		<col width="100"><col width="50"><col width="50"><col width="100">	
		<tr>
			<th>번호</th>
			<th>아이디</th>
			<th>투표제목</th>
			<th>결과</th>
			<th>시작일</th>
			<th>종료일</th>
			<th>보기 개수</th>
			<th>투표횟수</th>
			<th>등록일</th>
		</tr>
		<%
		for(int i = 0; i < pLists.size(); i++) {
			PollDto poll = pLists.get(i);
			%>
			<tr bgcolor="#aabbcc">
				<td><%=i+1 %></td>
				<td><%=poll.getId() %></td>
				<%	// 투표 주제
				boolean isS = poll.isVote();
				
				//투표했음			기간만료
				if(isS || PollUtil.isEnd(poll.geteDate())) {
				%>
				<td>[마감]<%=poll.getQuestion() %></td>
				<%
				} else {	// 투표를 안했으며, 기간이 아직 만료되지 않음
				%>
				<td>
					<a href="pollDetail.do?pollId=<%=poll.getPollId() %>"><%=poll.getQuestion() %></a>
				</td>
				<%	
				}
				%>
				
				<td>
				<%
				if(isS || PollUtil.isEnd(poll.geteDate())) {
				%>
					<a href="pollResult.do?pollId=<%=poll.getPollId() %>">결과</a>
				<%	
				} else {
				%>
				<img alt="" src="image/pen.gif">
				<%	
				}
				%>
				</td>
				
				<td><%=poll.getsDate() %></td>
				<td><%=poll.geteDate() %></td>
				<td><%=poll.getItemCount() %></td>
				<td><%=poll.getPollTotal() %></td>
				<td><%=poll.getRegDate() %></td>
			</tr>
		<%
		}
		%>
	</table>

<% 
}
%>


<%
if(mem.getAuth() == 1) {
%>
<a href="pollMake.do">투표 만들기</a>
<%	
}
%>

pollMake.jsp (투표글 작성 페이지)

<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
Calendar cal = Calendar.getInstance();
int tYear = cal.get(Calendar.YEAR);
int tMonth = cal.get(Calendar.MONTH)+1;
int tDay = cal.get(Calendar.DATE);
%>
    

<form action="pollMakeAf.do" method="post">
	<table class="list_table" style="width: 85%">
		<colgroup>
			 <col width="200px"><col width="200px">
		</colgroup>
		<tr>
			<th>아이디</th>
			<td style="text-align: left;">
				${login.id}<input type="hidden" name="id" value="${login.id }">
			</td>
		</tr>
		<tr>
			<th>투표기한</th>
			<td style="text-align: left;">
				<select name="sYear">
					<%
					for(int i = tYear; i < tYear + 6; i++) {
					%>
					<option <%=(tYear+"").equals(i+"")?"selected='selected'":"" %> value="<%=i %>"><%=i %></option>	
					<%
					}
					%>
				</select>년
				<select name="sMonth">
					<%
					for(int i = 1; i <= 12; i++) {
					%>
					<option <%=(tMonth+"").equals(i+"")?"selected='selected'":"" %> value="<%=i %>"><%=i %></option>	
					<%
					}
					%>
				</select>월
				<select name="sDay">
					<%
					for(int i = 1; i <= cal.getActualMaximum(Calendar.DAY_OF_MONTH); i++) {
					%>
					<option <%=(tDay+"").equals(i+"")?"selected='selected'":"" %> value="<%=i %>"><%=i %></option>	
					<%
					}
					%>
				</select>일
				~
				<select name="eYear">
					<%
					for(int i = tYear; i < tYear + 6; i++) {
					%>
					<option <%=(tYear+"").equals(i+"")?"selected='selected'":"" %> value="<%=i %>"><%=i %></option>	
					<%
					}
					%>
				</select>년
				<select name="eMonth">
					<%
					for(int i = 1; i <= 12; i++) {
					%>
					<option <%=(tMonth+"").equals(i+"")?"selected='selected'":"" %> value="<%=i %>"><%=i %></option>	
					<%
					}
					%>
				</select>월
				<select name="eDay">
					<%
					for(int i = 1; i <= cal.getActualMaximum(Calendar.DAY_OF_MONTH); i++) {
					%>
					<option <%=(tDay+"").equals(i+"")?"selected='selected'":"" %> value="<%=i %>"><%=i %></option>	
					<%
					}
					%>
				</select>일
			</td>
		</tr>
		<tr>
			<th>투표내용</th>
			<td style="text-align: left;">
				<textarea rows="10" cols="50" name="question"></textarea>
			</td>
		</tr> 
		<tr>
			<th>투표 문항수</th>
			<td style="text-align: left;">
				<select name="itemCount" onchange="pollChange(this)">
					<%
					for(int i = 2; i <= 20; i++) {
					%>
					<option <%= (4+"").equals(i+"")? "selected='selected'":"" %> value="<%=i %>" ><%=i %></option>
					<%	
					}
					%>
				</select>
			</td>
		</tr>
		<tr>
			<th>투표 상세 문항</th>
			<td style="text-align: left;">
			<%
			for(int i = 1; i <=20; i++) {
			%>
			<div id='poll<%=i %>'>
				<%=(i+"") %>번:<input type="text" name="poll<%=i %>" size="60">
			</div>
			<%	
			}
			%>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="submit" value="투표만들기">
			</td>
		</tr>		
	</table>
</form>


<script>
$(document).ready(function() {
	
	/* 항목들 초기화 */
	for(i = 5; i <= 20; i++) {
		$('#poll'+i).hide();
	}
	
	
});


function pollChange(sel) {
	
	let val = sel.options[sel.selectedIndex].value;	// selected 선택한값 반환
	console.log(val);
	
	for(i = 1; i <= 20; i++) {
		$('#poll'+i).val("");
		$('#poll'+i).hide();
	}
	
	//설정 값만큼 보여준다.
	for(i = 1; i <= val; i++) {
		$('#poll'+i).show();
	}
	
}


</script>

pollDetail.jsp (투표글 상세 페이지)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<form action="polling.do" method="post">
	<table class="list_table" style="width: 95%">
		<colgroup>
			<col width="200px">
			<col width="500px">
		</colgroup>
		<tr>
			<th>투표번호</th>
			<td style="text-align: left;">
				<input type="text" name="pollId" value="${poll.pollId }" size="50" readonly="readonly">
			</td>
		</tr>
		<tr>
			<th>아이디</th>
			<td style="text-align: left;">
				<input type="text" name="id" value="${login.id}" size="50" readonly="readonly">
			</td>
		</tr>
		<tr>
			<th>투표기한</th>
			<td style="text-align: left;">
				${poll.sDate} ~ ${poll.eDate}
			</td>
		</tr>
		<tr>
			<th>투표내용</th>
			<td style="text-align: left;">
				<textarea rows="10" cols="50" name="question" readonly="readonly">${poll.question}</textarea>
			</td>
		</tr>
		<tr>
			<th>보기 개수</th>
			<td style="text-align: left;">
				${poll.itemCount }
			</td>
		</tr>
		<tr>
			<th>보기</th>
			<td style="text-align: left;">
				<c:forEach items="${pollSubList }" var="pSub" varStatus="i">
				${i.count }번
				<input type="radio" name="pollSubId" ${i.count==1?"checked='checked'":"" } value="${pSub.pollSubId }">
				<input type="text" name="answer" size="60" value="${pSub.answer }" readonly="readonly">
				<br>
				</c:forEach>
			</td>
		</tr>
		<tr align="center">
			<td colspan="2">
				<input type="submit" value="투표하기">
			</td>
		</tr>
	</table>
</form>

pollResult.jsp (투표 결과 페이지)

※ 하이차트 (www.highcharts.com/) 파이 그래프 사용

DB를 JSON 형식으로 만들어 JS에 삽입

<%@page import="bit.com.a.poll.PollSubDto"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- https://codepen.io/pen/ '하이차트' -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

    
<%
	List<PollSubDto> list = (List<PollSubDto>)request.getAttribute("pollSubList");
	
	String jsonData = "[";
	for(PollSubDto p : list) {
		jsonData += "{name:'" +p.getAnswer()+ "', y:" +p.getaCount()+ "}, ";
	}
	jsonData = jsonData.substring(0, jsonData.length()-1);
	jsonData += "]";
	System.out.println(jsonData);
	
	request.setAttribute("jsonData", jsonData);

%>  


<table class="list_table" style="width: 95%">
	<colgroup>
		<col width="200px"><col width="500px">
	</colgroup>
	<tr>
		<th>투표번호</th>
		<td style="text-align: left;">
			<input type="text" value="${poll.pollId }" size="50" readonly="readonly">
		</td>
	</tr>
	<tr>
		<th>아이디</th>
		<td style="text-align: left;">
			<input type="text" value="${login.id }" size="50" readonly="readonly">
		</td>
	</tr>
	<tr>
		<th>투표기한</th>
		<td style="text-align: left;">
			${poll.sDate } ~ ${poll.eDate }
		</td>
	</tr>
	<tr>
		<th>투표내용</th>
		<td style="text-align: left;">
			<textarea rows="10" cols="50" readonly="readonly">${poll.question }</textarea>
		</td>
	</tr>
	<tr>
		<th>투표결과</th>
		<td>
			<figure class="highcharts-figure">
			  <div id="container"></div>
			</figure>
		</td>
	</tr>



</table> 

<script type="text/javascript">

Highcharts.chart('container', {
	  chart: {
	    plotBackgroundColor: null,
	    plotBorderWidth: null,
	    plotShadow: false,
	    type: 'pie'
	  },
	  title: {
	    text: '투표 결과'
	  },
	  tooltip: {
	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	  },
	  accessibility: {
	    point: {
	      valueSuffix: '%'
	    }
	  },
	  plotOptions: {
	    pie: {
	      allowPointSelect: true,
	      cursor: 'pointer',
	      dataLabels: {
	        enabled: true,
	        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
	      }
	    }
	  },
	  series: [{
	    name: '투표율',
	    colorByPoint: true,
	    data: <%=jsonData %>
	  }]
	});
	
</script>

- Crawling (크롤링)

- 웹페이지를 그대로 가져와 필요한 데이터를 추출해 내는 행위

Jsoup을 활용한 크롤링

- 기본 세팅

1. mvn 레파지토리에서 jsoup 검색

2. Jsoup Java HTML Parser에서 jar파일 다운로드

3. lib 폴더에 삽입

- 사용 예시

CGV 공식사이트에서 영화제목, 예매율 가져오기

Document doc = Jsoup.connect("http://www.cgv.co.kr/movies/").get();

1. 영화 제목 가져오기

/*
<div class="box-contents">
	<a href="/movies/detail-view/?midx=84514">
		<strong class="title">내일의 기억</strong> 
*/
Elements titles = doc.select("div.box-contents strong.title");

for (int i = 0; i < 7; i++) {
	Element title = titles.get(i);
	String t = title.text();
	System.out.println(t);
}

2. 예매율 가져오기

/* 예매율 */
/*
	<div class="score">
			<strong class="percent">예매율<span>7.8%</span></strong>
			<!-- 2020.05.07 개봉전 프리에그 노출, 개봉후 골든에그지수 노출변경 (적용 범위1~ 3위)-->
			<div class='egg-gage small'>
				<span class='egg great'></span>
				<span class='percent'>86%</span>
*/
Elements percents = doc.select("div.score strong.percent span");

for (int i = 0; i < 7; i++) {
	Element percent = percents.get(i);
	String p = percent.text();
	System.out.println(p);
}

MovieChart.java

package movie;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class MovieChart {
	public static List<MovieVo> getCGVData() throws IOException {
		
         	 /* CGV 사이트 */
		Document doc = Jsoup.connect("http://www.cgv.co.kr/movies/").get();
        		
		/* 영화제목 */
		/*
		<div class="box-contents">
            <a href="/movies/detail-view/?midx=84514">
                <strong class="title">내일의 기억</strong> 
		 */
		Elements titles = doc.select("div.box-contents strong.title");
		/* 예매율 */
		/*
		  <div class="score">
         	 <strong class="percent">예매율<span>7.8%</span></strong>
          	<!-- 2020.05.07 개봉전 프리에그 노출, 개봉후 골든에그지수 노출변경 (적용 범위1~ 3위)-->
         	 <div class='egg-gage small'>
         		 <span class='egg great'></span>
         		 <span class='percent'>86%</span>
		 */
		Elements percents = doc.select("div.score strong.percent span");
		
		
		List<MovieVo> list = new ArrayList<MovieVo>();
		
		
		
		for (int i = 0; i < 7; i++) {
			Element title = titles.get(i);
			String t = title.text();
			Element percent = percents.get(i);
			String p = percent.text();
		//	System.out.println(t);
		//	System.out.println(p);
			
			MovieVo vo = new MovieVo();
			double pv = Double.parseDouble(p.replace("%", ""));
			
			vo.setTitle(t);
			vo.setPercent(pv);
			
			list.add(vo);
		}
		
		return list;
	}

}

JUM 실시간 검색어 크롤링

/* JUM 실시간 검색어 */
		Document doc = Jsoup.connect("https://zum.com/").get();
		Elements searchs = doc.select("div.issue_keyword_total span.d_keyword");
		
		System.out.println("줌 실시간 검색어");
		for (int i = 0; i < 20; i+=2) {
			Element search = searchs.get(i);
			String s = search.text();
			System.out.println((i/2)+1 +" "+s);
		}

- 커스텀 어노테이션을 활용한 AOP 구현

한 예로 aop를 활용하여 login session 이 있는지를 검사할 때, 모든 컨트롤러 메소드에 적용하게 되면 로그인마저 되지 않는 불상사가 생긴다. 이렇게 aop를 적용하고 싶지 않은 메소드가 있다면 커스텀 어노테이션을 활용하면 된다.

1. 어노테이션 생성

임의의 이름으로 커스텀 어노테이션을 생성한다.

NoLogging.java

package bit.com.a.annotation;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;

@Target({ElementType.TYPE, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
public @interface NoLogging {

}

2. AOP 포인트컷에 어노테이션 조건 추가

bit.com.a.controller 하위에 있는 메소드이면서 NoLogging 어노테이션이 붙지 않은 것만 AOP가 실행되게 조건을 건다.

LogAOP.java

@Around("within(bit.com.a.controller.*)" +
			"&& !@annotation(bit.com.a.annotation.NoLogging)")

3. AOP가 발동되지 않을 메소드 위에 @어노테이션 추가

여기선 NoLogging이라는 이름의 어노테이션을 만들었다. 어노테이션을 추가하면 해당 메소드는 AOP가 발동되지 않는다.

@NoLogging
@RequestMapping(value = "login.do", method = RequestMethod.GET)
public String login() {
	return "login.tiles";
}

- Web Socket (웹 소켓)

- 두 프로그램간의 메시지를 교환하기 위한 통신방법 중 하나

특징

1. 영구적 양방향 통신

클라이언트와 서버가 서로 원할 때 데이터를 주고 받을 수 있으며 연결이 끊어지지 않고 지속된다.

2. 실시간 네트워킹

빠르게 데이터를 교환하는 실시간 처리가 필요할 때 사용된다.

구현 방법

1. pom.xml에 dependency 추가

  <!-- 웹 소켓 -->
   <dependency>
       <groupId>org.springframework</groupId>
       <artifactId>spring-websocket</artifactId>
       <version>5.3.3</version>
   </dependency>
   
   <dependency>
       <groupId>org.glassfish</groupId>
       <artifactId>javax.json</artifactId>
       <version>1.0.4</version>
   </dependency>   
   
   <dependency>
       <groupId>org.json</groupId>
       <artifactId>json</artifactId>
       <version>20190722</version>
   </dependency>
   
   <dependency>
       <groupId>com.googlecode.json-simple</groupId>
       <artifactId>json-simple</artifactId>
       <version>1.1.1</version>
   </dependency>

2. spring 폴더 안 websocket-context.xml 생성

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:websocket="http://www.springframework.org/schema/websocket"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
		http://www.springframework.org/schema/websocket http://www.springframework.org/schema/websocket/spring-websocket-4.3.xsd">

	<websocket:handlers>
		<websocket:mapping handler="myHandler" path="/echo.do"/>
		<websocket:handshake-interceptors>
			<bean class="org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor"/>
		</websocket:handshake-interceptors>
		
	</websocket:handlers>
	
	<bean id="myHandler" class="bit.com.a.websocket.WebSocket"/>
	
</beans>

3. web-xml 수정

<async-supported>true</async-supported> 태그도 추가

<servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>
	      /WEB-INF/spring/servlet-context.xml
	      /WEB-INF/spring/aop-context.xml
	      /WEB-INF/spring/file-context.xml
	      /WEB-INF/spring/websocket-context.xml <!-- 여기추가 -->
      </param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
    <async-supported>true</async-supported> <!-- 여기추가 -->
  </servlet>

4. WebSocket.java 생성

- TextWebSocketHandler를 상속

- 체크된 것들 Override 해준다.

package bit.com.a.websocket;

import java.util.Date;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

public class WebSocket extends TextWebSocketHandler{
	
	private Map<String, WebSocketSession> userMap = new ConcurrentHashMap<String, WebSocketSession>();

	public WebSocket() {
		System.out.println("EchoHandler 생성됨" + new Date());
	}

	
	/* 클라이언트와 접속이 성공했을 때 호출 */
	@Override
	public void afterConnectionEstablished(WebSocketSession session) throws Exception {
		System.out.println("연결됨" + session.getId() + " " + new Date());
		userMap.put(session.getId(), session);
	}

	/* 클라이언트와 접속이 끊겼을 때 */
	@Override
	public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
		System.out.println("연결 종료" + session.getId() + " " + new Date());
		userMap.remove(session.getId());
	}

	/* 메시지 송수신(recv & send) */
	@Override
	protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
		
		// 수신(recv)
		System.out.println("메시지 수신:" +message.getPayload()+" "+ new Date());
		
		// 송신(send) - 모든 client에 전송한다.
		for (WebSocketSession s : userMap.values()) {
			s.sendMessage(message);
		}
		
	}

	/* 예외 발생 */
	@Override
	public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
		System.out.println(session.getId() + " 예외 발생 " + new Date());
	}
	
}

5. 뷰 & 자바스크립트 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<table class="list_table" style="width: 85%">
	<colgroup>
		<col width="200px"><col width="500px">
	</colgroup>
	<tr>
		<th>채팅명</th>
		<td style="text-align: left;">
			<input type="text" id="name"> 
			<input type="button" id="enterBtn" value="입장" onclick="connect()">
			<input type="button" id="exitBtn" value="나가기" onclick="disconnect()">
		</td>
	</tr>
	<tr>
		<th>아이디</th>
		<td style="text-align: left;">
			<input type="text" id="id" value="${login.id }" readonly="readonly">
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<textarea rows="10" cols="70" id="messageArea"></textarea>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="text" id="message" size="50">
			<input type="button" id="sendBtn" value="전송" onclick="send()">
		</td>
	</tr>
</table>


<script>
	let wSocket;
	
	// 접속	
	function connect() {
		
		if(wSocket != undefined && wSocket.readyState != WebSocket.CLOSED) {
			alert('이미 입장하셨습니다.');
			return;
		}
		
		//WebSocket 생성
		wSocket = new WebSocket("ws://192.168.0.231:8090/sample10/echo.do");

		
		wSocket.onopen = onOpen;
		wSocket.onmessage = onMessage;
		wSocket.close = onClose;
		
		
	}
	
	// 접속을 중단
	function disconnect() {
		wSocket.close();
		location.href = "chating.do";
	}
	
	// 연결이 되었을 때
	function onOpen(evt) {
		appendMessage("연결되었습니다.");
		
	}
	
	//수신이 되었을 때
	function onMessage(evt) {
		let data = evt.data;
		if(data.substring(0, 4) == "msg:") {
			appendMessage(data.substring(4));
		}
	}
	
	// 끊겼을 때
	function onClose() {
		appendMessage("연결이 끊겼습니다.");
	}
	
	// 메시지 송신
	function send() {
		let id = $('#id').val();
		let msg = $('#message').val();
		
		wSocket.send("msg:"+id+":"+msg);
		$("#message").val("");
	}
	
	// 추가 문자열을 기입
	function appendMessage(msg) {
		//메시지를 추가 하고 개행
		$("#messageArea").append(msg+"\n");
		
		// 스크롤을 위로 이동 시킨다
		const top = $('#messageArea').prop("scrollHeight");
		
		$("#messageArea").scrollTop(top);
		
	}

</script>

웹소켓 실시간 채팅 구현 화면

왼쪽이 Edge, 오른쪽이 Chrome으로 접속하였다.

하단 콘솔에 다른 세션ID값이 출력되는 것을 확인할 수 있다.

저작자표시 (새창열림)

'💻 개발 > 📖 TIL (Today I Learned)' 카테고리의 다른 글

210422 TIL (D+71 스프링 File 업로드, 다운로드 구현) (0)	2021.04.22
ajax 활용 캘린더 만들기 (1)	2021.04.21

- Spring으로 투표 기능 구현하기

1. 투표 기능에 필요한 DB 테이블 작성

2. MyBatis를 활용한 쿼리문 작성

3. ServiceImpl에서 트랜잭션 처리

4. Controller 작성

5. 뷰단 작성

- Crawling (크롤링)

Jsoup을 활용한 크롤링

- 커스텀 어노테이션을 활용한 AOP 구현

- Web Socket (웹 소켓)

'💻 개발 > 📖 TIL (Today I Learned)' 카테고리의 다른 글

티스토리툴바