Spring(스프링) + WebSocket(웹소켓)을 이용한 실시간 채팅

스프링 + 웹소켓을 이용한 간단한 실시간 채팅

---

우선 웹소켓이란 간단히 이야기하면 서버와 양방향 통신이 가능한 통신 방법이다. 그럼으로써 실시간 채팅 등이 구현이 가능한 것이다. 여기서 그러면 "ajax로 구현하면 되잖아? ajax도 서버와 통신이 되는데?" 생각을 하게된다. 나도 처음에는 그렇게 생각했는데, 생각해보면 ajax는 클라이언트가 서버로 데이터를 요청을 한다. 하지만 서버가 클라이언트에게 요청할 수 있는 방법이 없다. 하지만 웹소켓은 가능하다라는 것 ! ajax로 채팅을 구현한다면 클라이언트가 보낸 메시지를 서버가 받아서 그 메시지를 모든 사람에게 전송한다? ajax는 예를 들어 10초에 한번씩 서버에서 메시지를 뿌려주는 기능을 구현해야 할것이다. 왜냐하면 서버가 클라이언트에게 요청을 할수 있는 방법이 없기때문이다.

https://developer.mozilla.org/ko/docs/WebSockets/Writing_WebSocket_client_applications -> 참고

---

1. 시작전 설정

---

pom.xml

<dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-websocket</artifactId>
            <version>${org.springframework-version}</version>
</dependency>

web.xml

<servlet>
        <servlet-name>appServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>
                /WEB-INF/config/presentation-layer.xml
            </param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
        <async-supported>true</async-supported> <!-- 웹소켓을 위한 설정(비동기지원) -->
</servlet>

---

2.WebSocketChat

package com.web.rnb.controller;
 
import java.util.ArrayList;
import java.util.List;
 
import javax.websocket.server.ServerEndpoint;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
 
import javax.websocket.RemoteEndpoint.Basic;
 
@Controller
@ServerEndpoint(value="/echo.do")
public class WebSocketChat {
    
    private static final List<Session> sessionList=new ArrayList<Session>();;
    private static final Logger logger = LoggerFactory.getLogger(WebSocketChat.class);
    public WebSocketChat() {
        // TODO Auto-generated constructor stub
        System.out.println("웹소켓(서버) 객체생성");
    }
    @RequestMapping(value="/chat.do")
    public ModelAndView getChatViewPage(ModelAndView mav) {
        mav.setViewName("chat");
        return mav;
    }
    @OnOpen
    public void onOpen(Session session) {
        logger.info("Open session id:"+session.getId());
        try {
            final Basic basic=session.getBasicRemote();
            basic.sendText("Connection Established");
        }catch (Exception e) {
            // TODO: handle exception
            System.out.println(e.getMessage());
        }
        sessionList.add(session);
    }
    /*
     * 모든 사용자에게 메시지를 전달한다.
     * @param self
     * @param message
     */
    private void sendAllSessionToMessage(Session self,String message) {
        try {
            for(Session session : WebSocketChat.sessionList) {
                if(!self.getId().equals(session.getId())) {
                    session.getBasicRemote().sendText(message.split(",")[1]+" : "+message);
                }
            }
        }catch (Exception e) {
            // TODO: handle exception
            System.out.println(e.getMessage());
        }
    }
    @OnMessage
    public void onMessage(String message,Session session) {
        logger.info("Message From "+message.split(",")[1] + ": "+message.split(",")[0]);
        try {
            final Basic basic=session.getBasicRemote();
            basic.sendText("to : "+message);
        }catch (Exception e) {
            // TODO: handle exception
            System.out.println(e.getMessage());
        }
        sendAllSessionToMessage(session, message);
    }
    @OnError
    public void onError(Throwable e,Session session) {
        
    }
    @OnClose
    public void onClose(Session session) {
        logger.info("Session "+session.getId()+" has ended");
        sessionList.remove(session);
    }
}
 

@ServerEndpoint(value="/echo.do") 는 /echo.do 라는 url 요청을 통해 웹소켓에 들어가겠다라는 어노테이션입니다.

@onOpen 는 클라이언트가 웹소켓에 들어오고 서버에 아무런 문제 없이 들어왔을때 실행하는 메소드입니다.

@onMessage 는 클라이언트에게 메시지가 들어왔을 때, 실행되는 메소드입니다.

@onError 

@onClose 는 클라이언트와 웹소켓과의 연결이 끊기면 실행되는 메소드입니다.

sendAllSessionToMessage()는 어떤 누군가에게 메시지가 왔다면 그 메시지를 보낸 자신을 제외한 연결된 세션(클라이언트)에게 메시지를 보내는

메소드입니다.

---

3.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 56 57 58 59 60 61 62

<%@ page language="java" contentType="text/html; charset=EUC-KR"     pageEncoding="EUC-KR"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <title>Insert title here</title> </head> <body>     <div>         <input type="text" id="sender" value="${sessionScope.member.m_id }" style="display: none;">         <input type="text" id="messageinput">     </div>     <div>         <button type="button" onclick="openSocket();">Open</button>         <button type="button" onclick="send();">Send</button>         <button type="button" onclick="closeSocket();">Close</button>     </div>     <!-- Server responses get written here -->     <div id="messages"></div>     <!-- websocket javascript -->     <script type="text/javascript">         var ws;         var messages=document.getElementById("messages");                  function openSocket(){             if(ws!==undefined && ws.readyState!==WebSocket.CLOSED){                 writeResponse("WebSocket is already opened.");                 return;             }             //웹소켓 객체 만드는 코드             ws=new WebSocket("ws://localhost:9080/rnb/echo.do");                          ws.onopen=function(event){                 if(event.data===undefined) return;                                  writeResponse(event.data);             };             ws.onmessage=function(event){                 writeResponse(event.data);             };             ws.onclose=function(event){                 writeResponse("Connection closed");             }         }                  function send(){             var text=document.getElementById("messageinput").value+","+document.getElementById("sender").value;             ws.send(text);             text="";         }                  function closeSocket(){             ws.close();         }         function writeResponse(text){             messages.innerHTML+="<br/>"+text;         }   </script> </body> </html> Colored by Color Scripter

cs

---