관리 메뉴

nalaolla

웹 소켓 채팅_수정 본문

SPRING

웹 소켓 채팅_수정

날아올라↗↗ 2016. 4. 26. 17:59
728x90
반응형
  • 웹 소켓

-html5의 주요 api중 하나

-HTTP Protocol을 기반으로 웹 브라우저와 웹 서버 간의 양방향 통신을 지원하기 위한 표준

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

-Windows Application 같은 어플리 케이션의 개발이 가능

-주로 채팅 서비스를 개발한다.

 

 

  • JSR-356

-자바의 웹 소켓 표준

-JSR-356으로 웹 소켓 서버 기능을 개발하기는 매우힘듦

 

  • WebSocketHandler

 -JSR-356의 구현체로써 Spring에서 제공되고 있는 객체

-Servlet3의 웹 소켓 기능에 의존적. 때문에 Servlet3을 지원하지 않는 컨테이너에선 사용할 수 없다.

 


 

  • Maven 의존 설정
1
2
3
4
5
<dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-websocket</artifactId>
          <version>4.1.6.RELEASE</version>
      </dependency>
cs

 

  • WebSocketHandler를 이용한 웹 소켓 서버 구현

 

 

 

  
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
76
77
78
79
80
81
82
83
84
85
86
87
88
package com.ktds.mcjang.chat;
 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
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{
    
    //세션을 모두 저장한다.
    //방법 1 :  1:1 채팅
//    private Map<String, WebSocketSession> sessions = new HashMap<String, WebSocketSession>();
    
    //방법 2 : 전체 채팅
    private List<WebSocketSession> sessionList = new ArrayList<WebSocketSession>();
    
    
    private static Logger logger = LoggerFactory.getLogger(EchoHandler.class);
    
    /**
     * 클라이언트 연결 이후에 실행되는 메소드
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session)
            throws Exception {
        //맵을 쓸때 방법
//        sessions.put(session.getId(), session);
        //List쓸때 방법
        sessionList.add(session);
         //0번째 중괄호에 session.getId()을 넣으라는뜻
        logger.info("{} 연결됨", session.getId()); 
        
    }
    
    /**
     * 클라이언트가 웹소켓 서버로 메시지를 전송했을 때 실행되는 메소드
     */
    @Override
    protected void handleTextMessage(WebSocketSession session,
            TextMessage message) throws Exception {
        
        //0번째에 session.getId() 1번째에 message.getPayload() 넣음
        logger.info("{}로 부터 {} 받음", session.getId(), message.getPayload());
    //    logger.info("{}로부터 {}받음", new String[]{session.getId(),message.getPayload()});
        
        //연결된 모든 클라이언트에게 메시지 전송 : 리스트 방법
        for(WebSocketSession sess : sessionList){
            sess.sendMessage(new TextMessage("echo:" + message.getPayload()));
        }
        
        // 맵 방법.
        /*Iterator<String> sessionIds = sessions.ketSet().iterator();
        String sessionId = "";
        while (sessionIds.hasNext()) {
            sessionId = sessionIds.next();
            sessions.get(sessionId).sendMessage(new TextMessage("echo:" + message.getPayload()));
            
        }*/
        
        //연결되어 있는 모든 클라이언트들에게 메시지를 전송한다.
//        session.sendMessage(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());
    }
 
}
 
cs
cs
  • WebSocket 설정

 

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:websocket="http://www.springframework.org/schema/websocket"
    xsi:schemaLocation="http://www.springframework.org/schema/beans 
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/websocket 
        http://www.springframework.org/schema/websocket/spring-websocket-4.1.xsd">
 
<websocket:handlers>
    <websocket:mapping handler="echoHandler" path="/echo"/>
    <websocket:sockjs/>
</websocket:handlers>
 
<bean id="echoHandler" class="com.ktds.mcjang.chat.EchoHandler"/>
 
</beans>
cs

 

 

web.xml 수정

 

1
2
3
4
5
6
7
8
9
10
11
12
13
 <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>
  </servlet>
cs

 

 

https://github.com/sockjs/sockjs-client

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • jQuery와 sockjs를 이용한 Client개발
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
<%@ 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/js/jquery/jquery-1.11.2.js"/>"></script>
<script type="text/javascript" src="<c:url value="/static/js/sockjs-0.3.4.js"/>"></script>
<script type="text/javascript">
 
    $(document).ready(function(){
        $("#sendBtn").click(function(){
            sendMessage();
        });
    });
    
    //websocket을 지정한 URL로 연결
    var sock= new SockJS("<c:url value="/echo"/>");
    //websocket 서버에서 메시지를 보내면 자동으로 실행된다.
    sock.onmessage = onMessage;
    //websocket 과 연결을 끊고 싶을때 실행하는 메소드
    sock.onclose = onClose;
    
    
    function sendMessage(){
        
            //websocket으로 메시지를 보내겠다.
            sock.send($("#message").val());
        
    }
            
    //evt 파라미터는 websocket이 보내준 데이터다.
    function onMessage(evt){  //변수 안에 function자체를 넣음.
        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>
cs

 

 

 

<결과>

 

 

728x90
반응형