본문 바로가기
Back-end/Spring

[HTML5] WebSocket을 이용한 채팅 만들기

by JiGyeong 2016. 4. 22.

EchoHandler  spring bean 파일을 만들어준다.



EchoHandler 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
package com.ktds.jgbaek.handler;
 
import java.util.ArrayList;
import java.util.List;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
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 EchoHandler extends TextWebSocketHandler {
 
    private Logger logger = LoggerFactory.getLogger(EchoHandler.class);
    
    /**
     * 서버에 연결한 사용자들을 저장하는 리스트.
     */
    private List<WebSocketSession> connectedUsers;
    
    public EchoHandler() {
        connectedUsers = new ArrayList<WebSocketSession>();
    }
    
    /**
     * 접속과 관련되어 있는 Event Method
     * @param WebSocketSession 접속한 사용자
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        logger.info(session.getId() + "님이 접속했습니다.");
        logger.info("열결 IP : " + session.getRemoteAddress().getHostName());
        connectedUsers.add(session);
    }
    
    /**
     * 두 가지 이벤트를 처리함
     * 1. Send : 클라이언트가 서버에게 메시지를 보냄.
     * 2. Emit : 서버에 연결되어 있는 클라이언트들에게 메시지를 보냄
     * 
     * @param WebSocketSession 메시지를 보낸 클라이언트
     * @param TextMessage 메시지의 내용
     */
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        
        /*
         * payload : 사용자가 보낸 메시지
         */
        logger.info(session.getId()+"님이 메시지를 보냈습니다." + message.getPayload());
        for (WebSocketSession webSocketSession : connectedUsers) {
            if ( !session.getId().equals(webSocketSession.getId()) ) {
                webSocketSession.sendMessage( new TextMessage(message.getPayload()));
            }
        }
    }
    
    /**
     * 클라이언트가 서버와 연결을 끊음.
     * 
     * @param WebSocketSession 연결을 끊은 클라이언트
     * @param CloseStatus 연결 상태 ( 확인필요함 )
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        logger.info(session.getId()+ "님이 퇴장했습니다.");
        connectedUsers.remove(session);
    }
}
 
cs



SocketController 를 만들고

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package com.ktds.jgbaek.handler.socket.web;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class SocketController {
 
    @RequestMapping("/chat")
    public String viewChattingPage(){
        return "chatting/chat";
    }
    
}
 
 
 
cs


bean을 추가해준다.




ws-config.xml

파일을 만들어준다.



web.xml에 url을 추가해준다.



jsp 파일에 javascript를 추가해준다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/board/js/jquery-1.12.1.js"></script>
<script type="text/javascript" src="/board/js/sockjs-1.0.3.min.js"></script>
<script type="text/javascript">
    
    var sock = null;
    
    $(document).ready(function() {
        sock = new SockJS("/board/echo-ws")
    });
</script>
</head>
<body>
안녕하세요~
</body>
</html>
 
cs


저작자표시

'Back-end > Spring' 카테고리의 다른 글

[HTML] 자동완성 기능 만들기  (0) 2016.05.03
[HTML] 서버돌리지 않고 창 띄우기  (0) 2016.05.02
[HTML5] 웹소켓( WebSockat )  (2) 2016.04.22
[Spring] 게시판 만들기  (0) 2016.04.21
[Spring] 게시판 만들기 기본  (2) 2016.04.21

관련글

티스토리툴바