웹 소켓 채팅_수정

• 웹 소켓

-html5의 주요 api중 하나

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

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

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

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

 

 

• JSR-356

-자바의 웹 소켓 표준

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

 

• WebSocketHandler

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

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

 

---

 

• Maven 의존 설정

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

 

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

 

 

 

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

• WebSocket 설정

 

 

 

 

<?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>

 

 

web.xml 수정

 

 <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>

• jQuery와 sockjs를 이용한 Client개발

<%@ 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>

 

 

 

<결과>