테스트사용자()

2_JSP_환경설정.pptx

이제 마지막입니다

[4. socket.io.js를 이용한 웹페이지 작성]

ㅇ jQuery 및 socket.io Import

CDN 을 사용하지 않고 로컬에 저장해놓고 사용했습니다

그래서 WebContent 에 js 폴더를 하나 만들어주고 2개 파일을 넣어줍니다

jquery-1.10.2.min.js

socket.io.js

최종 파일 구성 형태입니다

이제 앞에서 작성했던 main.jsp 와 main2.jsp 를 조금 수정해줍니다

두개 파일 내용은 같구요..

각각 다른 주소로 접속을 해도 서로 푸시 기능이 잘 된다는 걸 확인하기 위한 목적이거든요

위 내용을 간략하게 설명하자면..

socket.io 기능을 사용해서 connect를 맺어주고 

서버로부터 특정 키 명으로 오는 메세지를 받을수 있도록  socket.on 을 작성해줍니다

메세지를 보내는 기능도 있어야 하므로 입력창과 버튼을 하나 만들고 

버튼을 클릭하면 socket.emit() 을 사용하여 서버로 전송합니다

그럼 서버에서는 VertxSample 클래스에 작성되어 있는 socket.on 에서 메세지를 받아서 그대로 각 소켓들로 emit을 시켜 줍니다

이런식으로 반복되는 거죠

이제 모든 작업이 끝났습니다

톰캣을 구동시키고 결과를 확인해보겠습니다

확인 방법은 

IE 창 1개 : http://localhost/main.do 접속

크롬 창 2개 : http://localhost/main.do & http://localhost/main2.do (각 다른 주소로 접속)

각 브라우저 개발자도구 - 콘솔 창 오픈

이렇게 3개를 띄워놓은 뒤에 메세지를 입력하고 send 버튼을 누르면 콘솔창에 메세지가 들어와있는걸 확인할 수 있습니다

클라이언트에서는 아무 요청도 하지 않았는데 서버쪽에서 일방적으로 푸시를 하는 거죠 ㅎㅎ

IE 창에서 입력한 결과 입니다

각 창으로 다 메세지가 들어와지구요

크롬에서 해도 마찬가지 입니다

단순히 콘솔 로그로만 출력을 했지만 대화창 모양을 구성해서 출력을 시켜주면 그럴듯한 대화방을 만들수 있습니다

이런 방법들을 응용하면 실시간으로 어떤 사용자가 데이터를 입력했을때 관리자에게 푸시를 해준다던지 등 

여러 재미있는 웹 애플리케이션을 만들수 있을 것 같습니다 ㅎㅎ

최종 완성 프로젝트 파일입니다

Vertx.zip

안된다는 분들 덕분에 추가 설명입니다

당연히 서버의 설정을 맞춰줘야 됩니다

브라우저 실행 예) 캡쳐 이미지에 나와있듯이

현재 localhost 라는 url 다음에 특별히 컨텍스트 패스가 없는 것 처럼 서버의 설정을 맞춰줘야 제대로 실행이 됩니다

[3. Vert.x 동작 코드 작성 및 스프링 연결(?)]

Vert.x는 독립적인 애플리케이션으로 구성할 수도 있고 

스프링+Vert.x 처럼 Embedded 형태로 구성할 수도 있습니다

저는 Embedded 형태로 작성을 하였구요

자세한 방법은 [http://vertx.io] 나 

백기선님의 강의 영상[http://devon.daum.net/2012/session/b3#.Uw1du-N_tWA]을 봐주시면 됩니다

ㅇ VertxSample 클래스

VertxSample 클래스를 그냥 controller 패키지 안에 넣었습니다 ㅎㅎ

간략하게 설명하자면... 

- HttpServer 생성 : HttpServer server = vertx.createHttpServer()

- Connection 이벤트 연결 : io.sockets().onConnection()

- 특정 키 명으로 요청시 동작할 이벤트 연결 : socket.on() 

- 모든 클라이언트로 메세지 전달 : io.sockets().emit()

순수 Vert.x 모듈만 가지고 작성을 하려면 굉장히 힘들텐데

백기선님께서 mod-socket-io 라는 좋은 모듈을 만들어 주셔서 위처럼 간단하게 구현이 가능합니다

이제 위 클래스를 스프링 프로젝트가 로드될때 같이 실행시켜 주기만 하면 됩니다

vertx-servlet.xml 에 bean 으로 선언만 해주시면 프로젝트가 로드될때 같이 실행이 됩니다

그래서 2장에서 작성했던 vertx-servlet.xml 에서 주석처리 했던 것을 풀어 주시면 됩니다

<bean id="vertxSample" class="com.spring.vertx.controller.VertxSample" />

서버 쪽 구성은 이제 끝났습니다 

다음 장에서는 클라이언트에서 socket.io.js 를 사용하여 요청 및 출력하는 부분을 만들어 보도록 하겠습니다

이제 두번째 입니다

[2. 스프링을 사용해서 프로젝트 구성]

일단 스프링으로 웹페이지가 잘 돌아가도록 구성을 해놓고 시작을 해야겠죠

ㅇ Dynamic Web Project 생성

ㅇ JAR 파일 복사

준비한 JAR 파일들을 WebContent -> WEB-INF -> lib 폴더로 다 넣구요

ㅇ Folder 생성

스프링 설정을 저장할 [res] 폴더와 View 페이지 파일이 들어갈 [views] 폴더를 생성해줍니다

[res]를 Source Folder 로 만드는 이유는 컴파일할때 WEB-INF/classes 밑으로 저장하도록 하기 위해서입니다

그래야 스프링 설정파일의 위치를 정의하는 곳에 classpath: 이런 구문을 사용할 수 있습니다

ㅇ web.xml 설정

web.xml의 선언부는 사용하는 톰캣 버전에 따라서 약간 모습이 달라질수 있습니다

저는 6.0을 기준으로 작성했습니다

web.xml

ㅇ 서블릿 설정 파일 vertx-servlet.xml

vertx-servlet.xml

웹페이지가 잘 뜨는지 확인할때는 

아직 VertxSample 클래스를 작성하지 않아서 오류가 나기 때문에 일단 주석으로 처리해놓구요

나중에 주석을 풀어 주시면 됩니다

이 파일은 [res] 에 넣어줘야 합니다 (Source Folder)

ㅇ log4j 설정 파일

log4j.dtd

log4j.xml

이 log4j 설정파일들은 그냥 [res] 로 넣으면 됩니다

ㅇ JSP View 파일 생성

이클립스에서 JSP 파일 생성하면 기본 구문들은 자동으로 입력을 시켜 줍니다

[main.jsp] & [main2.jsp]

대충 페이지가 돌아간다는 것만 확인할 수 있도록 아무 글자나 찍도록 해놓구요

main.jsp / main2.jsp 파일 두개를 생성해줍니다

서로 다른 페이지에서 채팅 기능이 잘 되는지 확인하기 위해서 입니다

ㅇ Controller 클래스 

아까 자동 스캔을 지정한 com.spring.vertx 를 기본 패키지로 만들구요

controller 패키지를 추가해서 MainController.java 를 만들어 줍니다

[MainController.java]

MainController.java

프로젝트 설정은 끝났습니다

이제 톰캣에 프로젝트를 등록하고 확인해보면 됩니다

다음 장에서는 위 스프링 프로젝트에 Vert.x 적용 클래스를 만들어서 포함시켜 보도록 하겠습니다

모든 자료는 

백기선님의 [Vert.x & Socket.IO 이해 및 활용] 및  Vert.x 사이트 [http://vertx.io] 의 문서를 참고하였습니다

좋은 모듈을 만들어주신 백기선님께 감사드립니다

메이븐에 익숙하지 않은 사람도 많기 때문에 일반 웹 프로젝트로 만들었구요

따라서.. 라이브러리 JAR 파일도 각각 따로 넣어줘야 합니다

현재 Vert.x 버전이 2.1M5 까지 나와있는데요..

최신 버전으로 적용하면 백기선님께서 만드신 mod-socket-io 가 제대로 동작이 되질 않아서 1.3.1 final 버전을 사용했습니다

1. 라이브러리 JAR 파일 준비

2. 스프링을 사용해서 프로젝트 구성

3. Vert.x 동작 코드 작성 및 스프링 연결(?)

4. socket.io.js를 이용한 웹페이지 작성

위 순서대로 만들어보겠습니다

[1. 라이브러리 JAR 파일 준비]

ㅇ Vert.x JAR

Vert.x 사이트로 가서 맨밑에 Older versions 에서 1.3.1 final 버전을 받습니다

vertx-1.3.1.zip

귀찮은 분들은 이 파일을 받으시면 됩니다 ㅎ

ㅇ mod-socket-io JAR 

이건 조금 작업을 해주셔야 하는데요.. 백기선님의 Github 주소로 프로젝트를 받으셔야 합니다

[https://github.com/keesun/mod-socket-io]

git을 사용하기 위한 이클립스 설정과 다운로드 방법은 너무 내용이 길어지기 때문에 생략하도록 하겠습니다 ㅎㅎ

검색을 해보시면 아주 많은 방법들이 잘 나와있으니 참고해주세요

단.. 현재 개발중인 master 말고 verx-131 로 받아주시면 됩니다

위와같이 Git Repository 로 받아주시구요 

받아온 프로젝트를 Import 하시면 됩니다

이제 mod-socket-io 프로젝트를 JAR 파일로 Export 시켜줍니다

이클립스 설정을 통해서 개발할때는 프로젝트를 연결시켜서 오류를 없앨수 있지만

컴파일할때 등 여러 귀찮은 문제가 생겨서 미리 JAR로 추출한 다음에 코딩하는게 편합니다

JAR Export 하는 방법은 아실꺼니까.. 생략하겠습니다

mod-socket-io-131.jar

mod-socket-io 프로젝트를 Export 한 JAR 입니다

ㅇ Spring JAR 

스프링 공식사이트에 가보시면 안타깝게도 직접 다운로드 메뉴가 없습니다

메이븐으로 받도록 설명하고 있습니다... 제길...

그래서 제가 예전에 받아놓은 스프링 3.1 버전 JAR 파일을 올려놓도록 하겠습니다

jar_spring_3.1.zip

ㅇ 그리고 기타 부수적인 JAR 입니다

로그도 찍어야 하고.. JSP 파일에서 JSTL 도 쓸수 있으므로 아래 파일들이 필요합니다

commons-logging-1.1.1.jar

jstl-1.2.jar

log4j-1.2.16.jar

slf4j-api-1.7.5.jar

slf4j-log4j12-1.7.5.jar

이제 spring + vert.x 를 써보기 위한 라이브러리는 준비가 끝났습니다

다음 장에서 위 파일들을 가지고 프로젝트를 구성해 보도록 하겠습니다

JSTL 이란..

JSP 표준 태그 라이브러리 이다 (JSP Standard Tag Library)

설정

jsp 에서

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

EL^#

1. 생존범위 속성 맵

   1. pageScope
   2. requestScope
   3. sessionScope
   4. applicationScope

2. 요청 파라미터 맵

   1. param
   2. paramValues

3. 요청 헤더 맵

   1. header
   2. headerValues

4. 쿠키 맵

   1. cookie

5. 컨텍스트 초기화 파라미터 맵(서블릿 초기화 파라미터 아님)

   1. initParam

6. 실제 pageContext 객체에 대한 참조. 이것은 빈임

   1. pageContext

      1. pageContext 접근자

         1. getErrorData()
         2. getPage()
         3. getRequest()
         4. getResponse()
         5. getServletConfig)()
         6. getServletContext()
         7. getSession()

      2. JspContext로 부터 상속받은 접근자

         1. getAttribute()
         2. getAttributeNamesInScope()
         3. getAttributesScope()
         4. getExpression!Eval!uator()
         5. getOut()
         6. getVariableResolver()

스크립팅

1. <$= request.getHeader("host") %>

EL 내장 객체

1. ${header["host"]}
2. ${header.host}
3. ${headerValues.host[]}

스크립팅

1. <%= request.getMethod() %>

EL 내장 객체

1.  ${pageContext.request.method}

core

① set

     - JSP의 setAttribute()와 같은 역활
     - 기본형
       <c:set   var="변수명"
                    value="변수명에 할당된 값"
                    target="자바빈 객체명이나 Map 객체명"
                    property="자바빈 객체나 Map 객체의 값을 설정할 프로퍼티 명"
                    scope="변수의 공유 범위(유효기간)으로 page|request|session|application" />
     - 예제
          <c:set var="country" value="${'Korea'}" />
          <c:set var="intArray" value="<%=new int[] {1,2,3,4,5}%>" />
          <c:set var="sum" value="${sum+i}" />
 
② out

     - JSP의 표현식을 대체하는 것으로 많이 사용됨
     - 기본형
          <c:out var="변수명"
                    default="기본값"
                    escapeXML="true|false" />
 
     * escapeXML
     > 생략시 기본값은 true
     > true일 경우 값 중에 포함된 <>&'" 문자들을 각각 <, >, &, ', "로 출력

     - 예제
          <c:out value="${sum}" />
          <c:out value="${val}" />
 
③ remove

     - JSP의 removeAttribute()와 같은 역활
     - 기본형
          <c:remove var="변수명"
                              scope="변수의 공유 범위로 page(생략 시 기본)|request|session|application" />
     - 예제
          <c:remove var="browser" />
 
④ catch

     - body 위치에서 실행되는 코드의 예외를 잡아내는 역할
     - 기본형
          <c:catch var="에러가 발생할 때 에러 메세지가 포함될 변수명" />
     - 예제
          <c:catch var="errmsg">
               line 1~
               <%=1/0%>
               line 2~
          </c:catch>
          <c:out value="${errmsg}" />
 
⑤ if

     - 조건문에 사용
     - 기본형
          <c:if   test="조건 판별식"
                    var="변수명"
                    scope="변수의 공유범위 page|request|session|application"
     - 예제
          <c:if test="${country != null}">
               국가명 : <c:out value="${country}" />
          </c:if>
 
⑥ choose

     - 자바의 switch문과 동일
     - 조건에서 문자열 비교가 가능
     - 하나 이상의 <when>과 하나의 <otherwise> 서브 태그를 가짐
 
⑦ when

     - choose 태그의 서브태그
     - choose 태그내에서 여러번 사용될 수 있다.
     - 기본형
          <c:when test="조건 판별식" />
 
⑧ otherwise

     - choose 태그의 서브태그
     - choose 태그내에서 한번만 사용될 수 있다.
     - 예제 :
          <c:choose>
               <c:when test="${country == 'Korea'}">
               나라 : <c:out value="${country}" />
          </c:when>
 
          <c:when test="${country == 'Canada'}">
               나라 : <c:out value="${country}" />
          </c:when>
   
          <c:otherwise>
               선택된 나라가 없습니다.
          </c:otherwise>
     </c:choose>
 
⑨ forEach

     - 객체 전체에 걸쳐 반복 실행할 때 사용
     - 기본형
          <c:forEach   items="반복할 객체명"
                              begin="시작값"
                              end="종료값"
                              step="증가값"
                              var="변수명"
                              varStatus="별도의 변수" />

⑩ forTokens

     - 문자열을 주어진 구분자(delimiter)로 분할
     - 기본형
          <c:forTokens items="반복할 객체명"
                              delims="구분자"
                              begin="반복할 시작값"
                              end="반목 마지막값"
                              step="증가값"
                              var="변수명"
                              varStatus="별도의 변수"
     - 예제
          <c:forTokens var="color" items="빨강색,주황색.노란색.초록색,파랑색,남색.보라색" delims=",.">
               color : <c:out value="${color}" /><br>
          </c:forTokens>
 
⑪ import!

 - 웹 어플리케이션 내부의 자원 및 http, ftp와 같은 외부에 있는 자원에 대해 접근
 - 기본형
  <c:import! url="읽어올 URL"
     var="읽어올 데이터를 저장할 변수명"
     scope="변수의 공유 범위"
     varReader="리소스의 내용을 Reader 객체로 읽어올 때 사용"
     charEncoding="읽어온 데이터의 캐릭터셋 지정" />
 
⑫ redirect

     - response.sendRedirect()를 대체하는 태그로 지정한 다른 페이지로 이동
     - 기본형
          <c:redirect url="이동할 URL" />
 
⑬ url

     - 쿼리 파라미터로 부터 URL 생성
     - 기본형
          <c:url var="생성한 URL이 저장될 변수명"
                    value="생성할 URL"
                    scope="변수의 공유 범위" />
 
⑭ param

     - 기본형
          <c:param name="파라미터 명"
                         value="파라미터 값" />
               <c:url var="registrationURL" value="/customers/register">
               <c:param name="name" value="${param.name}" />
               <c:param name="country" value="${param.country}" />
          </c:url>

<c:set var="temp" value="Hello! World" />
<c:out value="${ temp }" default="value is null"/><br>
<c:out value="${ temp }" default="value is null" escapeXml="false" /><br>
<c:out value="${ temp2 }" default="value is null" /><br>

<c:remove var="timezone" scope="session"/>
<c:set var="timezone" scope="session">CST</c:set>

<c:out value="${cookie['tzPref'].value}" default=="CST"/>

function

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

${fn:substring(name, 1, 10)}

fn:contains(string, substring)  
string이 substring을 포함하면 true 리턴. 

fn:containsIgnoreCase(string,substring)
대소문자에 관계없이, string이 substring을 포함하면 true 리턴. 

fn:endsWith(string, suffix)   
string이 suffix로 끝나면 true 리턴. 

fn:escapeXml(string)    
string에 XML과 HTML에서 특별한 의미를 가진 문자들이 있으면, XML 엔티티 코드로 바꿔준 뒤 문자열 리턴. 

fn:indexOf(string,substring)  
string에서 substring이 처음으로 나타나는 인덱스 리턴. 

fn:join(array, separator)  
array(배열) 요소들을 separator를 구분자로 하여 연결해서 리턴 

fn:length(item)      
item 이 배열이나 컬렉션이면 요소의 갯수를, 문자열이면 문자의 갯수를 리턴. 

fn:replace(string, before, after) 
string 내에 있는 before 문자열을 after 문자열로 모두 바꿔서 리턴. 

fn:split(string, separator)   
string 내의 문자열을 separator에 따라 나누어서 배열로 구성해 리턴. 

fn:startsWith(string, prefix)  
string이 prefix로 시작하면 true 리턴. 

fn:substring(string, begin, end) 
tring에서 begin 인덱스에서 시작해서 end 인덱스에 끝나는 부분
(end 인덱스에 있는문자 포함)의 문자열을 리턴.

fn:substringAfter(string, substring)
string에서 substring이 나타나는 이후의 부분에 있는 문자열을 리턴. 

fn:substringBefore(string, substring)
string에서 substring이 나타나기 이전의 부분에 있는 문자열을 리턴. 

fn:toLowerCase(string)    
string을 모두 소문자로 바꿔 리턴. 

fn:toUpperCase(string)    
string을 모두 대문자로 바꿔 리턴. 

fn:trim(string)      
string 앞뒤의 공백(whitespace)을 모두 제거하여 리턴.

fmt

jstl fmt로 날짜보여줄때, pattern attribute에 의한 날짜 표현 방식들

pattern="yyyy-MM-dd aa h:mm:ss"    
2007-12-13 오전 9:36:48

pattern="yyyy-MM-dd aa hh:mm:ss"  
2007-12-13 오전 09:36:48

pattern="yyyy-MM-dd H:mm:ss"      
2007-12-13 9:36:48

pattern="yyyy-MM-dd HH:mm:ss"    
2007-12-13 09:36:48

<fmt:setLocale value="fr_CA" scope="session"/>
<fmt:setTimeZone value="Australia/Brisbane" scope="session"/>

<fmt:formatDate value="${blogEntry.created}" dateStyle="full"/>
<c:out value="${blogEntry.title}" escapeXml="false"/>
<fmt:formatDate value="${blogEntry.created}" pattern="h:mm a zz"/>
<fmt:formatNumber value="0.02" type="currency" currencySymbol="원"/>

<fmt:formatNumber value="9876543.61" type="number"/>

[type="{number|currency|percent}"]

<fmt:parseDate value="${usDateString}" parseLocale="en_US" type="both" dateStyle="short" timeStyle="short" var="usDate"/>

sql

<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>

xml

출처 : http://tazz009.tistory.com/484