웹 소켓(spring을 이용한 채팅)

휴고

추천 수 249

웹 소켓

Http protocol을 기반으로 하지만, WS라는 protocol을 쓴다.

웹 브라우저와 웹 서버 간의 양방향 통신을 지원하기 위한 표준이며,

클라이언트와 서버가 서로 실시간으로 메시지를 자유롭게 주고 받을 수 있다.

Windows Application 같은 어플리케이션의 개발이 가능하며, 주로 채팅 서비스를 개발한다.

JSR-356는 자바의 웹 소켓 표준이지만, 이것으로 서버 기능을 개발하기는 매우 힘들어서 spring이 지원을 해준다.

그게 WebSockHandler이다. JSR-356의 구현체로써 Spring에서 제공되고 있는 객체이다. Servlet 3의 웹 소켓 기능에 의존적이기 때문에 Servlet 3을 지원하지 않는 컨테이너에서는 사용 할 수 없다.

채팅을 할 수 있는 프로그램으로는 nodejs가 있으나, 사용하려면 서버가 독립적이기 때문에 느리며, Sing Thread이기 때문에 직렬지원을 하므로 여러명이 한꺼번에 이용한다면 문제가 발생한다.

반면, 웹 소켓은 직렬지원도 하며 또한, 병렬지원을 한다.

홧팅2 웹 소켓을 지원해주기 위한 설정

Maven의존 설정(poem.xml)

1
2
3
4
5
<dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-websocket</artifactId>
          <version>4.1.6.RELEASE</version>
      </dependency>
cs

EchoHandler.java

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
72
73
74
75
package com.ktds.mcjang.chat;
 
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
 
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);
    
    //방법일 일대일챗팅 map사용
    Map<String, WebSocketSession> sessions  = new HasMap<String, WebSocketSession>();*/
    
    private List<WebSocketSession> sessionList = new ArrayList<WebSocketSession>();
    /**
     * 클라이언트 연결 이후에 실행되는 메소드
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session)
            throws Exception {
        //Map사용시
        session.put(session.getId(), session);
        
        //List쓸때
        sessionList.add(session);
        logger.info("{} 연결됨", session.getId());
    }
    /**
     * 클라이언트가 웹소켓서버로 메시지를 전송했을 때 실행되는 메소드
     */
    @Override
    protected void handleTextMessage(WebSocketSession session,
        TextMessage message) throws Exception {
        logger.info("{}로 부터 {} 받음", session.getId(), message.getPayload());
        
        //배열이면 많이 쓸수 있고, 쓰지않으면 최대 2개임여
        /*logger.info("{}와 부터 {}받음",new String[] {session.getId(), message.getPayload()});*/
        
        //연결되어있는 모든 클라이언트들에게 메시지를 전송한다 
        //session.sendMessage(new TextMessage("echo:" + message.getPayload()));
 
        for(WebSocketSession sess : sessionList){
            sess.sendMessage(new TextMessage("echo: " +  message.getPayload()));
        }
        
        /*map사용
        Interator<String> sessionIds = sessions.keySet().iterator();
        String sessionId="";
        while(sessionIds.hasNext()){s
            sessionId = sessionIds.next();
            sessions.get(sessionId).sendMessaget(new TextMessage("echo:" + message.getPayload()));
            
        }*/
        
    }
    /**
     * 클라이언트가 연결을 끊었을 때 실행되는 메소드
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session,
            CloseStatus status) throws Exception {
        //list
        sessionList.remove(session);
        //map
        //sessions.remove(session.getId());
        //logger.info("{} 연결 끊김", session.getId());
    }
    
    
}
 
Colored by Color Scripter
cs
 
web.xml에 추가할 부분  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<servlet>
      <servlet-name>dispatcherServlet</servlet-name>
      <servlet-class>
          org.springframework.web.servlet.DispatcherServlet
      </servlet-class>
      <init-param>
          <param-name>contextConfigLocation</param-name>
          <param-value>
              /WEB-INF/config/spring/dispatcherServlet.xml
              /WEB-INF/config/spring/ws-config.xml
          </param-value>
      </init-param>
      <load-on-startup>1</load-on-startup>
  </servlet>
Colored by Color Scripter
cs
https://github.com/sockjs/sockjs-client
 
저장후 압축 푼 다음에
 
 
이파일을 첫번째 파일 위치를 봐서 옮김
1
<mvc:resources location="/WEB-INF/static/" mapping="/static/**"/> 
cs
이거했는지 확인하기
chat.jsp
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
<%@ 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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<c:url value="/static/jquery/jquery-1.11.2.js"/>"></script>
<script type="text/javascript" src="<c:url value="/static/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>
Colored by Color Scripter
cs
 

출처: http://souning.tistory.com/13 [-]

< Prev Building a chat application with Spring Boot and WebSocket

웹 소켓 - 채팅(Chatting) 프로그램 만들기 Next >

♥