ITHRer (IT분야에서 취업하는 사람들)

프로젝트 이름

ITHRer - (IT + Human Resources + er)

(IT분야 에서 취업하는 사람들)

 

프로젝트 개요

프로젝트 설명

Spring Framework를 이용한 Server 개발 및 mvc 와 디자인 패턴 적용

아마존의 EC2, RDS를 활용한 클라우드 서비스 공부

Kakao Open i builder를 활용한 간단한 챗봇 구현

Websocket를 활용한 채팅 구현 및 폴링, 롱폴링 등에 대한 이해

 

프로젝트 기획

특정 분야로 제한된 정보로 사용자에게 양질의 정보를 제공

프로젝트 환경

개발 환경

jdk 1.8 | STS | AWS | Kakao i open builder | Oracle

 

실행 환경

Mac OS | Window OS | jre 1.8 | Google Chrome

 

프로그래밍 언어

Java 1.8 | HTML5 | JSP | JavaScript

 

프로젝트 예시

준비된 예시 종류

Github Repository

 

깃허브

깃허브 링크

프로젝트 특징

팀프로젝트로 진행하면서 본인이 맡은 부분에 대한 정리를 말씀드리겠습니다.

 

EC2 , RDS

프로젝트를 진행하면서 대부분 서버를 로컬에서 수행했지만, 이번 프로젝트에서는 클라우드 서비스 AWS를 활용

Ubuntu 환경의 EC2를 활용했으며 이에 따라 기본적인 linux에 대한 복습 및 공부

그리고 로컬과 달리 FTP를 사용해야 하는 경우가 있어서 이 때 FileZilla를 활용

또한 디버깅 할 때, STS에서 Logger를 활용하여 Console에서 간단하게 확인을 했다면, EC2에서는 tomcat에서 catalina에서 로그 확인을 통해 디버깅을 해야했는데, 이 때 로그가 축적되어 감당하기 힘든 크기가 되어, 이를 하루 단위로 로그를 나누던가 다른 방법으론 주기적으로 로그를 초기화 해주는 조치가 필요

 

스케줄링

스케줄링의 사용법은 대표적으로 3가지

1. 쿼츠
2. xml에서 설정
3. 어노테이션에서 스케줄러사용

그 중 가장 간단한 사용방법인 3번을 선택했고, 리눅스와 동일한 방법인 cron양식으로 설정하면 됨.

익명게시판의 경우 3일이 지난 게시물들을 자동으로 삭제해야하기 때문에 스케줄러를 사용하여 관리자가 직접 처리하지 않아도 되기 때문에 편리

 

챗봇

이번에 'Kakao i 오픈빌더'를 이용할 수 있는 기회가 있어 카카오 플러스친구를 활용하여

완벽하진 않지만, 챗봇을 만들어 보았다.

준비물 - STS + Kakao i openbuilder + kakao 플러스친구 관리자 계정 + EC2

자세한 내용은 링크를 통해 정리한 내용을 확인

카카오 아이 오픈빌더 + Java Spring 정리한 것!

 

JSP WebSocket (채팅 구현)

WebSocket을 이용해 유저간의 채팅을 구현한 부분인 것이였던 것입니다.

흐름

1. 서버는 Socket 생성 후 Server Socket으로 등록 합니다. 이를 바인딩 이라고 합니다.

   그 다음 클라이언트의 접속 요청을 받기 위한 설정을 하는데 이를 listen 이라 칭합니다.

2. 그 후 서버는 Server Socket은 클라이언트의 접속 요청을 하염없이 기다리는 것이였답니다. 이를 accept 상태라고 합니다

3. 클라이언트 쪽에서 채팅을 마구마구 즐기기 위해 Socket을 만들고, WebServetEnd 포인트로 접근 을 요청합니다. 이 때 책 읽는 사람들은 TCP로 연결이 되는데 , TCP연결을 하기 위해선 3 way handshake를 해야합니다. 알맞게 연결이 되면 , 서버는 와 클라이언트는 서로 read/write 할 수 있고, 서로 물고 뜯고 마구마구 엉망진창이 될 수 있던 것입니다.

   이 때 서버는 또한 새로운 클라이언트의 접근을 확인할 수 있는 accept 상태인 것을 알고 계시면 됩니다.

   (여기서 ajax를 통해서도 채팅을 구현할 수 있는데, 웹소켓과 ajax로 채팅을 구현할 때 생기는 차이점을 설명드리자면, ajax로 채팅을 구현할 경우, 클라이언트가 서버쪽에 요청을 보내고 , 막 명령을 시킬 수 있는 것에서 끝나지만, WebSocket으로 구현 할 경우, 클라이언트가 서버쪽에 요청을 할 수 있는건 물론이고 , 서버쪽에서도 클라이언트를 부를 수 있다는것이 차이점입니다.

 

위에 내용에서 면접에 정말 많이 나오는 내용

1. TCP / UDP 통신 차이

2. 3 way handshake & 4 way handshake

3. http / https 차이

이 쪽 소스는 웹소켓 통신할 때 쓰는 기본적인 소스인데 , onOpen 과 onClose 즉 클라이언트의 접속과 연결해제 할 때 onMessage를 호출 하는데 이 때 chat_user_CNT를 같이 보내 , 현재 이용자의 수를 모든 클라이언트들에게 쫙 보냅니다.

header.jsp를 보시면 서버쪽에 접근하기 위해 클라이언트 쪽에서 소켓을 만드는걸 보실 수 있습니다. 바로 요놈

xxxxxxxxxx
var webSocket = new WebSocket('ws://52.78.61.219:8080/brw/broadcasting/login.do');

url에 대한 부분은 스크린샷을 참고하삼

 

onOpen 부분은 클라이언트가 연결에 성공했을 때 실행

onMessage 부분은 서버에서 클라이언트에게 메시지를 보낼 때

send 부분은 클라이언트에서 서버로 메시지를 보내는 메소드 였던 것이였던 것입니다

BroadSocket.java

xxxxxxxxxx
package com.brw.websocket;
​
import java.io.IOException;
import java.util.Collections;
import java.util.HashSet;
import java.util.Set;
​
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
​
/**
 * 작성자 : 김은찬
 * 내용 : WebSocket 채팅 구현
 */
// 클라이언트에 접속할 서버 주소
@ServerEndpoint("/broadcasting/login.do")
public class BroadSocket {
    /*
     * 자료구조 set ==> 순서 신경 X , 중복 허용 X  , set은 HashSet(정렬X) , TreeSet(저장된 데이터값에 따라 정렬 - red-black tree타입 ) , LinkedHashSet (저장된 순서에 따라 값 정렬) 
     */
    private static Set<Session> clients = Collections.synchronizedSet(new HashSet<Session>());
    
    // 클라이언트로부터 메시지가 도착했을 경우 처리
    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        System.out.println(message);
        if(message.equals("chat_user_CNT")) {
            synchronized (clients) {
                for(Session client : clients) {
                    client.getBasicRemote().sendText("접속자 : "+clients.size());
                    System.out.println("클라 아이디"+client.getId());
                    System.out.println(client.hashCode());  
                }
            }
        }
        else { 
            synchronized (clients) {
                for (Session client : clients) {
                if(!client.equals(session)) {
                    client.getBasicRemote().sendText(message);  
                    }
                }
            }
        }
    }
    
    // 클라가 접속할 때 처리
    @OnOpen
    public void onOpen(Session session) throws IOException {
        System.out.println(session);
        System.out.println("클라이언트 접속 완료");
        clients.add(session);
        onMessage("chat_user_CNT" , session);
    }
    
    // 클라가 접속을 끊을 때 처리
    @OnClose
    public void onClose(Session session) throws IOException {
        System.out.println("클라이언트 접속 종료");
        clients.remove(session);
        onMessage("chat_user_CNT" , session);
    }
}
​

 

header.jsp

xxxxxxxxxx
<script>
    function chatting(){
/*      $("#chatting_div").css('display','block'); */
        $("#chatting_div").toggle();
    }
/*     var textarea = document.getElementById("messageWindow"); */
    var textarea = $("#messageWindow");
    <%if(user != null) {%>
        var webSocket = new WebSocket('ws://52.78.61.219:8080/brw/broadcasting/login.do');
    <%}%>
    var inputMessage = $("#inputMessage");
    
    webSocket.onerror = function(event) {
      onError(event)
    };
    webSocket.onopen = function(event) {
      onOpen(event)
    };
    webSocket.onmessage = function(event) {
      onMessage(event)
    };
    function onMessage(event) {
        if(event.data.indexOf('접속자 : ') == 0){
            $("#chat_cnt").text("채팅 ("+event.data+")");
            return;
        }
        textarea.val(textarea.val() + event.data + "\n");
        const top = textarea.prop('scrollHeight');
        textarea.scrollTop(top);
    }
    function onOpen(event) {
        textarea.val("채팅방에 입장 하셨습니다❤\n");
        console.log(event);
    }
    function onError(event) {
      alert(event.data);
    }
    function send() {
        if(inputMessage.val().length != 0){
        <%if(user != null){%>
        textarea.val(textarea.val() + '<%=user.getUserName()%>띠 : ' + inputMessage.val() + "\n");
        webSocket.send('<%=user.getUserName()%>띠 : ' + inputMessage.val());
        inputMessage.val("");
        /* 채팅창 스크롤 자동 내리기 */
        const top = textarea.prop('scrollHeight');
        textarea.scrollTop(top);
        <%}%>
        }
    }
</script>

 

그외 내용 (링크)

JSP 중복 로그인 (세션바인딩리스너) 정리