記錄

Spring) 웹소켓_1) 기본 개념 (Echo를 예시로) 본문

Web/Spring framework

Spring) 웹소켓_1) 기본 개념 (Echo를 예시로)

surhommejk 2018. 5. 13. 14:59


1. dependency 설정

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-websocket</artifactId>
            <version>4.0.4.RELEASE</version>
        </dependency>






2. Controller 오버라이드

public class EchoHandler extends TextWebSocketHandler {

    // afterConnectionEstablished : 웹소켓이 연결되면 호출되는 함수
    // 웹소켓이 연결 되는 것 = 프론트에서 웹소켓이 정확한 경로를 잡아 생성 되는 것
    @Override
    public void afterConnectionEstablished(WebSocketSession session)
            throws Exception {
        System.out.printf("%s 연결 됨\n", session.getId());
    }

    // 웹소켓 클라이언트가 텍스트 메세지 전송시 호출되는 메소드
    // WebSocketSession session : 전송 주체 정보가 담긴 세션
    // TextMessage message : 전송 받은 메세지 정보
    @Override
    protected void handleTextMessage(
            WebSocketSession session, TextMessage message) throws Exception {
        System.out.printf("%s로부터 [%s] 받음\n",
                session.getId(), message.getPayload());
        session.sendMessage(new TextMessage("echo: " + message.getPayload()));
    }

    // afterConnectionClosed : 웹소켓이 연결이 종료되면 호출되는 함수
    // 웹소켓이 연결이 종료 = 세션 종료
    @Override
    public void afterConnectionClosed(
            WebSocketSession session, CloseStatus status) throws Exception {
        System.out.printf("%s 연결 끊김\n", session.getId());
    }
}






3. ws-config.xml

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    

<필요한 네임스페이스 선언 1>

    xmlns:websocket="http://www.springframework.org/schema/websocket"
    
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
    <필요한 네임스페이스 선언 2> 
     http://www.springframework.org/schema/websocket
http://www.springframework.org/schema/websocket/spring-websocket.xsd">

    <!-- 웹소켓 핸들러(프론트) 선언과 매핑 -->
    <!-- 현재 path는 echo-ws.html 을 가리키고 있다 -->

<!-- 웹소켓 클라이언트가 '/echo-ws' 로 접속하면 -->
<!-- echoHandler라는 bean으로 처리하겠다는 것 (아래 bean 선언과 연결하여..) -->
    <websocket:handlers>
        <websocket:mapping handler="echoHandler" path="/echo-ws" />
    </websocket:handlers>

    <!-- 위에서 선언한 핸들러의 bean 설정 -->
    <!-- Controller의 경로를 정확시 설정해준다 -->
    <bean id="echoHandler" class="net.madvirus.spring4.chap09.ws.EchoHandler" />

</beans>







4. web.xml (ws-config.xml를 dispatcherServlet으로 설정)

    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/ws-config.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>






5. echo-ws.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>에코</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    
    $(document).ready(function() {
        $('#sendBtn').click(function() { sendMessage(); });
    });
    
    var wsocket;
    function sendMessage() {

/*
WebSocket WebSocket(
in DOMString url,
in optional DOMString protocols
);

or

WebSocket WebSocket(
in DOMString url,
in optional DOMString[] protocols
);
url
연결할 URL 주소.
웹소켓 서버가 응답할 수 있는 위치의 주소이여야 함.

protocols Optional(옵셔널 파라미터)
단일 프로토콜 문자열, 또는 프로토콜 문자열의 배열.
이 문자열들은 서브 프로토콜을 지정하는데 사용.
이를 통해 하나의 웹소켓 서버가 여러개의 웹 소켓 서브 프로토콜을 구현 하도록 해준다.
(예를 들어, 하나의 서버가 두 개 이상의 커뮤니케이션 방식을 가지고 싶도록 하고 싶을 때)

만약 지정하지 않으면 빈 문자열을 넣은 것으로 간주된다.
이 생성자는 예외가 발생할 수 있다.
*/
        wsocket = new WebSocket("ws://localhost:8090/spring4-chap09-ws/echo-ws");
        
        /* The onmessage property of the WindowEventHandlers is
         the EventHandler called whenever an object receives a message event. */
        wsocket.onmessage = onMessage;
    
        /* WebSocket 인터페이스의 연결상태가 readyState 에서CLOSED 로
         바뀌었을 때 호출되는 이벤트 리스너이다.
         이 이벤트 리스너는 "close"라는 이름의 CloseEvent를 받습니다.*/
        wsocket.onclose = onClose;
        
     /* WebSocket 인터페이스의 연결상태가 readyState 에서 OPEN으로 바뀌었을 때\
호출되는 이벤트 리스너.
     연결 상태가 OPEN으로 바뀌었다는 말은 데이터를 주고 받을 준비가 되었다는 뜻.
     이 리스너가 처리하는 이벤트는 "open"이라는 이벤트 하나. */
        wsocket.onopen = function() {
            wsocket.send( $("#message").val() );
        };
    }
    
    
    function onMessage(evt) {
        var data = evt.data;
        alert("서버에서 데이터 받음: " + data);
        wsocket.close();
    }
    
    
    function onClose(evt) {
        alert("연결 끊김");
    }
</script>
</head>
<body>
<input type="text" id="message">
<input type="button" id="sendBtn" value="전송">
</body>
</html>



Comments