1. pom.xml

 

 

2. web.xml

- servlet-mapping (url-pattern : *.do)

- servlet-context.xml, root-context.xml

- CharacterEncodingFilter

3. servlet-context.xml

- base-package 지정 (com.ch.webSock)

- ViewResolver : prefix, suffix

- 웹 소켓 기능을 처리하기 위한 클래스 경로 매핑

chat-ws.do 값을 요청했을 때, webChatHandler bean 객체가 동작한다.

 

4. root-context.xml, configuration.xml, mapper.xml

- DB 연동을 하지 않기 때문에 현재는 비어있다.

크롬과 익스플로러를 켜서 실행시켜보았다.

 

index 파일을 실행한다.

chat.do 값을 찾아 컨트롤러로 이동한다.

메소드에 별다른 내용이 없어서 바로 뷰 페이지로 이동한다.

 

 

 

뷰 페이지 chat.jsp

head 영역에 여러 함수들이 정의되어 있고,

body 태그에는 채팅을 하기 위한 최소한의 기능인

닉네임 설정 양식과 채팅방 입장, 채팅 입력 양식과 채팅창, 퇴장 기능이 설정되어 있다.

 

각 버튼의 id값은 enterBtn, exitBtn, sendBtn 인데,

이 id값을 가진 버튼에 클릭 이벤트가 발생했을 때, 함수가 실행되도록 설정된 구조다.

현재, 대화영역의 입력 양식의 id 값은 message로 지정되어 있다.

 

이 message 입력 양식에 keypress 이벤트가 발생하면 함수가 실행되는데,

만약 enter키를 누르면 send() 메소드를 실행시키는 함수이다.

keycode == 13 이 enter 키 입력이다. (아스키 코드)

 

또, 입력 양식 옆의 전송 버튼을 클릭 해도 send() 메소드를 실행하여

메시지가 전송된다.

 
 

[입장] 버튼을 클릭하면 connect 함수를 호출한다.

 

생성자에 들어간 url 값은 servlet-context.xml 의 핸들러 클래스를 동작시키기 위한 것이다.

핸들러 클래스 WebChatHandler가 실행된다.

afterConnectionEstablished : 입장

afterConnectionClosed : 퇴장

handleTextMessage : 채팅

 
 
 

입장 메소드를 실행하고 다시 chat.jsp로 돌아간다.

chat-ws.do 값 요청에 따른 핸들러 동작이 이루어지고 난 이후로는

onopen 함수와 onMessage 함수가 차례대로 실행된다.

 
 

메시지를 입력하고 [메시지 전송] 을 클릭하면 클릭 이벤트가 발생하여 (또는 엔터 키 이벤트 발생)

send 메소드를 호출한다.

nickName 변수에 닉네임 값을 구해와 저장하고,

msg 변수에 메시지 값을 구해와 저장한다.

 
 

nickName과 msg 값을 매개로 채팅에 필요한 핸들러 메소드를 동작시킨다.

 

[퇴장] 버튼을 누른 유저만 채팅 그룹에서 빠진다.

 
 

 

+ Recent posts