서블릿 프로그래밍 #5 - 클라이언트 당기기, 서블릿, frame을 이용한 채팅 프로그램 소개
이번 시간에는 클라이언트 당기기, 서블릿, frame을 이용한 채팅 프로그램을 만들어 보겠습니다.
일단 용어 설명을 먼저 해야겠지요?
클라이언트 당기기란?
meta 태그를 이용한 클라이언트 f5 신공입니다. 쉽죠?? 자동으로 f5를 일정시간마다 눌러주는 겁니다. ㅋㅋㅋㅋㅋ 좀 더 기술적으로 말하면 meta 태그의 http-equiv 속성에 refresh 속성값을 이용해서 일정시간마다 서버에 페이지를 요청하는 것이라고 보시면 됩니다.
frame이란??
원래 한 번에 한개의 페이지를 보여주는 웹 페이지에 영역을 나누어 서로 다른 페이지를 보여주는 html 태그입니다. 우리는 이 태그를 텍스트를 입력하는 부분과 보여주는 부분으로 나누어서 제작할 것입니다.
서블릿은 다들 아시죠??
다음으로 보실 것은 채팅 프로그램의 페이지 구성입니다.
처음으로 보여줄 페이지는 chat.html 페이지 입니다.
이 페이지에서는 접속자에게 사용할 닉네임을 물어보는 페이지라고 보시면 됩니다.
닉네임을 입력 하시면 ChatLogin.java의 서블릿 페이지를 요청합니다. 이 곳에서 닉네임을 입력하지 않고 들어온 사용자를 다시 chat.html 페이지로 넘기고 사용자의 id를 저장합니다. 그리고 frame을 이 페이지에서 나누어 각각 ChatInput 페이지와 ChatServer 페이지를 보여줍니다.
ChatInput 페이지는 텍스트를 입력하는 페이지고 ChatServer 페이지는 입력한 내용을 클라이언트에게 보여주는 페이지라고 생각하시면 됩니다.
다음 글에서 chat.html 페이지부터 찬찬히 살펴보도록 하겠습니다.
글 목록
<html>
<head>
<title>채팅 로그인</title>
</head>
<body>
<h2>채팅 로그인</h2>
<form method = get action =ChatLogin>
사용자 ID : <input type = text name =id>
<input type = submit value='확인'>
</form>
</body>
</html>
chat.html은 별게 없습니다.
get method를 이용해 ChatLogin 페이지를 요청하고 페이지에 넘겨줄 데이터는 name 속성값이 id 인 텍스트 뿐입니다!!
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
/**
* Servlet implementation class ChatLogin
*/
public class ChatLogin extends HttpServlet {
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException{
login(req, res);
//get 메소드로 페이지를 요청했을 때 실행되는 부분으로 바로 login 메소드를 호출합니다.
}
public void doPost(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException{
login(req, res);
//post 메소드로 페이지를 요청했을 때 실행되는 부분으로 바로 login 메소드를
호출합니다.
}
public void login(HttpServletRequest req, HttpServletResponse res)
throws IOException, ServletException{
req.setCharacterEncoding("KSC5601");
res.setContentType("text/html;charset=KSC5601");
PrintWriter out = res.getWriter();
//PrintWriter 객체에 페이지에 텍스트를 표시하는 PrintWriter 객체를 획득합니다.
//여기까지는 일반적인 서블릿 페이지와 같습니다. 별거 없지요?
String id = req.getParameter("id");
//전 페이지에서 id라는 이름이로 된 태그의 value 값을 Stirng 형식으로 받습니다.
//이렇게 서버는 사용자와 대화를 합니다.
if(id == null || id.trim().length() == 0){
res.sendRedirect("/chat.html");
return;
}//만약 id의 속성값이 없다면 chat.html로 다시 돌아갑니다. id는 꼭 필요한 것이니깐요.
out.println("<html>");
out.println("<frameset rows='85%, 15%'>");
out.println("<frame src='ChatServlet?id="+id+"'&frirst=true' name ='main'>");
//frame 을 다음과 같이 호출할 수 도 있다. 보시면 알겠지만, id속성과 first속성을 get 형태 로 넘겨준것입니다.
out.println("<frame src='reChatInput?id="+id+"'>");
//위 frame에도 id 값을 속성으로 넘겨줍니다.
out.println("</frameset>");
out.println("</html>");
}
}
ChatLogin.java는 로그인을 확인하고 페이지의 틀을 만들어주는 부분이라고 보시면 됩니다.
id를 확인 하는 부분이 있지요 그래서 ChatLogin인것 같아요 ㅋㅋㅋㅋㅋ
ChatServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
/**
* Servlet implementation class ChatLogin
*/
public class ChatServlet extends HttpServlet {
String message[];
//사용자들이 입력한 메시지를 저장하는 부분입니다.
int index = 0 , size = 10;
public void init(){
message = new String[size];
//message 데이터를 size값을 이용해 memory를 할당해 줍니다. 이에 의해서 메시지는 10
//개 까지밖에 저장이 되지 않는다는 것을 알 수 있습니다.
for(int i=0; i<size; i++)
{
message[i] = "";
//메모리만 할당해 주었으니,,, 쓰레기 값이 들어있겠죠?? 빈칸으로 초기화 해줍니다.
}
}
public void doPost(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException{
req.setCharacterEncoding("KSC5601");
String id = req.getParameter("id");
String msg = req.getParameter("msg");
//위의 두줄의 코드는 왜 있는 것일까요? 바로 id와 사용자가 입력한 메시지를 계속
//받아오는 것입니다. 페이지가 계속 로딩되기 때문에 id를 계속 넘겨 주어야 하는 ////것이지요. 넘겨주지 않으면 id를 페이지가 까먹게 됩니다. 별다른 데이터 //베이스나 파일이 없기 때문이지요.
if(msg!=null && msg.trim().length() != 0){
synchronized(message){
message[index] = id + " : " + msg;
//메시지는 'id : 입력한 메시지 내용'으로 저장이 되게 설정 했습니다.
index = (index+1) % size;
//index가 message배열의 index인 것은 아시겠죠?
//지속적으로 1씩 추가되는 index도 10을 넘으면 안되기 때문에 size로
//나눈 나머지만 사용을합니다!! 그럼 0~9까지 순서대로 나오겠죠?
}//여기서 나오는 synchronized 속성을 통해서 message 배열을 한번에 한명
//만 접근할 수 있도록 lock을 걸어 놓습니다. synchronized에 대한 더 많은
// 정보를 알 고 싶으신 분은 제 블로그에서 synchronized 키워드로 검색을 해
//보세요. 나와요
}
doGet(req, res);
//doGet 메소드를 호출합니다. 왜 이렇게 코딩이 되어있는지는 코드의 밖에서
//설명을 드리겠습니다.
}
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException{
res.setContentType("text/html;charset=KSC5601");
String first = req.getParameter("first");
//어느 사용자가 접속을 했는지 알려주기 위해서 사용합니다. 밑의 if문을 보시면 들어왔
//다고 표시해주는 부분이 보이시죠?
if(first != null){
String id = req.getParameter("id");
synchronized(message){
message[index] ="<p align = center>" + id +" 님이 들어왔씁니다.</p>";
index=(index+1) % size;
}
}
PrintWriter out = res.getWriter();
out.println("<html><head>");
out.println("<meta http-equiv='pragma' content='no-cache'>");
out.println("<meta http-equiv='cache-control' content='no-cache'>");
out.println("<meta http-equiv='refresh' ");
out.println("content = '2; url=ChatServlet'>");
out.println("<title>채팅</title></head>");
out.println("<body><center<h2>채팅</h2></center><hr>");
int i = index;
while(true){
out.println(message[i]);
out.println("<br>");
i = ++i %size;
if(i == index - 1)
break;
//while문이 돌다가 입력되어있는 index까지 출력이 되면 while문을 멈춥니다.
if(index == 0 && i == size - 1)
break;
//아무 글도 입력되어있지 않거나, 9칸까지 출력을 다 하였으면 while문을 멈춥니다.
}
out.print(message[i]);
out.println("<br>");
out.println("</body></html>");
}
}
자, 이제 왜 doPost에서 메시지를 처리하고, 그 뒤에 doGet 메소드를 요청하는지 설명을 드리겠습니다.
쉬어요. ㅋㅋ 프레임에서 페이지를 요청할 때는 get메소드를 사용하였고, 채팅을 입력하는 부분은 post로 넘겨봤기 때문이지요. 즉, doGet 메소드는 페이지가 항상 공통으로 처리해야할 부분을 나타내는 것입니다.
만약, doPost부분이 doGet메소드 안에 있다면,,, 채팅 내용을 입력했을때에만 처리해야 하는 부분을 맨 처음 frame을 통해 접속했을 때도 처리를 하겠지요?
그것을 막기 위해서 이런식으로 코딩을 한 것입니다.
두가지의 데이터 전달방법을 적절하게 사용한 예라고 생각하시면 됩니다.
doPost 부분은 말씀드린대로 채팅 내용을 입력했을때 넘겨받는 메소드로 내용을 입력했을 때, 처리해야할 부분이 들어가 있습니다.
ChatInput.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
/**
* Servlet implementation class ChatLogin
*/
public class reChatInput extends HttpServlet {
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException{
DO(req, res);
//get 메소드로 페이지를 호출했을때 DO 메소드를 호출합니
//다.
}
public void doPost(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException{
DO(req, res);
//post 메소드로 페이지를 호출했을때 DO 메소드를 호출합니
//다.
}
public void DO(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException{
res.setContentType("text/html;charset=KSC5601");
PrintWriter out = res.getWriter();
req.setCharacterEncoding("KSC5601");
String id = req.getParameter("id");
if(id == null || id.trim().length() == 0){
res.sendRedirect("/chat.html");
return;
}//ChatLogin과 마찬가지로 id가 제대로 넘어왔는지 확인을 합니다.
//안 왔다면 다시 chat.html페이지로 돌아가지요.
out.println("<html><head>" );
out.println("<script language = 'JavaScript'> ");
//자바스크립트 부분 시작
out.println("function send(form) { ");
out.println(" form.msg.value = form.temp.value;");
//msg의 value값에 temp의 value값을 넣어 줍니다.
//왜냐하면 전달할때 value값을 빈칸으로 해야지만,,, 다음 텍스트를
//입력할때 다시 지우고 쓰는 불편을 없앨수 있거든요.
//target속성으로 현재 페이지는 그냥 유지 된다는 것을 아셔야해요!!
//만약 그냥 바로 temp가 아닌 msg에 입력을 받고 reset을 해버리면
//입력한 내용 자체가 증발을 해버립니다.
//그래서 이렇게 번거롭게 프로그래밍 하는 것이지요.
out.println(" form.temp.value = ''; ");
//이게 reset을 한 것입니다.
out.println(" form.temp.focus(); ");
//focus라는 것은 대충 감이 오시죠? 커서가 temp위에 깜빡이게 해줍니다.
out.println(" return true; ");
//return true를 이용해서 데이터를 넘겨줍니다. onsubmit return true에
//대해서는 검색을 해보세요. 나름 중요한 자바스크립트 코딩 기법?
//입니다.
out.println("} ");
//자바스크립트 부분 끝
out.println("</script> ");
out.println("<title>채팅 로그인</title></head> ");
out.println("<body> ");
out.println("<form method = post action =ChatServlet ");
//앞에서 말씀드린대로 채팅 내용은 method를 post로 전달합니다.
//페이지가 처음으로 로딩했을때와 아닐때를 구분하기 위해서지요,
out.println("onSubmit='return send(this)' target='main'> ");
//엔터를 눌렀을때 send 함수를 실행합니다. target은 main인데 frame에
//설정한 name 속성값으로 ChatServlet.java 부분이지요.
out.println("메시지 : <input type = text size = 50 name= temp> ");
out.println("<input type = hidden name = msg> ");
out.println("<input type = hidden name = id value='"+id+"'> ");
//넘겨줄 부분입니다. 메시지와 아이디가 되겠네요. temp와 msg의 관계
//는 자바스크립트 부분에서 설명을 하겠습니다.
out.println("</form> ");
out.println("</body></html> ");
}
}
출처: http://webclass.tistory.com/entry/서블릿-프로그래밍-5-클라이언트-당기기-서블릿-frame을-이용한-채팅-프로그램-1 [Welcome PHP World!!!!]