FrameWork/Spring

[SPRING] HTML5 SOCKET 통신 [sample]

밍글링글링 2017. 12. 11.
728x90

1. POM에서 dependency를 생성한다.

<!-- WebSocket -->
<dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-websocket</artifactId>
   <version>4.1.6.RELEASE</version>
</dependency>
<!-- jackson -->
<dependency>
   <groupId>com.fasterxml.jackson.core</groupId>
   <artifactId>jackson-databind</artifactId>
   <version>2.5.3</version>
   <scope>runtime</scope>
</dependency>

 

 

JS에서 sockjs-0.3.4.js를 추가한다.

sockjs-0.3.4.js
다운로드

Controller에서 보여질 페이지를 설정한 다음,

EchoHandler.java 를 생성하여

아래와 같은 소스를 추가한다.

package jungle.util;

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 static Logger logger = LoggerFactory.getLogger(EchoHandler.class);
 //세션을 모두 저장한다.
    //방법 1 :  1:1 채팅
//    private Map<String, WebSocketSession> sessions = new HashMap<String, WebSocketSession>();
    
    //방법 2 : 전체 채팅
    private List<WebSocketSession> sessionList = new ArrayList<WebSocketSession>();
    /**
     * 클라이언트 연결 이후에 실행되는 메소드
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session)
            throws Exception {
        sessionList.add(session);
        logger.info("{} 연결됨", session.getRemoteAddress());
    }

    /**
     * 클라이언트가 웹소켓서버로 메시지를 전송했을 때 실행되는 메소드
     */
    @Override
    protected void handleTextMessage(WebSocketSession session,
        TextMessage message) throws Exception {
        logger.info("{}로 부터 {} 받음", session.getRemoteAddress(), message.getPayload());
        for(WebSocketSession sess : sessionList){
            sess.sendMessage(new TextMessage(session.getRemoteAddress() +" : "+ message.getPayload()));
        }
    }

    /**
     * 클라이언트가 연결을 끊었을 때 실행되는 메소드
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session,
            CloseStatus status) throws Exception {
        sessionList.remove(session);
        logger.info("{} 연결 끊김", session.getRemoteAddress());
    }
}
 
 

스프링 컨테이너에 가서, namespaces에 websocket을 체크해 준 뒤,

<bean id="echoHandler" class="jungle.util.EchoHandler"/>
    <websocket:handlers>
        <websocket:mapping handler="echoHandler" path="/echo" />
        <websocket:sockjs />
    </websocket:handlers>
</bean>
를 추가하고,
 

JSP 페이지에 아래와 같은 내용을 추가한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP</title>
<script type="text/javascript" src="<c:url value="https://code.jquery.com/jquery-3.1.1.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/sockjs-0.3.4.js"/>"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#sendBtn").click(function() {
            sendMessage();
        });
    });
    var sock;
    //웸소켓을 지정한 url로 연결한다.
    sock = new SockJS("<c:url value="/echo"/>");
    //자바스크립트 안에 function을 집어넣을 수 있음.
    //데이터가 나한테 전달되읐을 때 자동으로 실행되는 function
    sock.onmessage = onMessage;
    //데이터를 끊고싶을때 실행하는 메소드
    sock.onclose = onClose;
    /* sock.onopen = function(){
        sock.send($("#message").val());
    }; */
    function sendMessage() {
        /*소켓으로 보내겠다.  */
        sock.send($("#message").val());
    }
    //evt 파라미터는 웹소켓을 보내준 데이터다.(자동으로 들어옴)
    function onMessage(evt) {
        var data = evt.data;
        $("#data").append(data + "<br/>");
        //sock.close();
    }
    function onClose(evt) {
        $("#data").append("연결 끊김");
    }
</script>
</head>
<body>
    <input type="text" id="message" />
    <input type="button" id="sendBtn" value="전송" />
    <div id="data"></div>
</body>
</html>
 

728x90

댓글