(23.01.02)Spring 프레임워크: 웹소켓을 이용한 채팅프로그램 만들기

●● 웹소켓●●

    - Thymeleaf, Websocket
    - HttpSession 전달(Controller -> WebSocket)
    - Interceptor 방식으로 ServletContext 전달
    - page, request, session, application
    - application : 웹서버에 한개만 존재
    - application = ServletContext
    - Controller에서 ServletContext 에 HttpSession의 참조를 저장
    - 인터셉터를 통해 ServletContext 를 WebSocket으로 전달
    - WebSocket에서는 WebSocketSession을 통해서 전달된 속성 값을 추출할 수 있다
    - WebSocket에서는 먼저 ServletContext를 추출하고 ServletContext를 통해
    HttpSession객체를 추출할 수 있다

 

applicaation < jsp에서 부르는 말 (영역 객체) 서버에선 ServletContext라고 부른다.

 

---

 

●●전체 채팅방 만들기●●

 

 

WebSocketConfiguration.java

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;
import lombok.extern.slf4j.Slf4j;
 
@Slf4j
@Configuration
@EnableWebSocket
public class WebSocketConfiguration implements WebSocketConfigurer
{
   private final static String CHAT_ENDPOINT="/ws/chat";
   
   @Override
   public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
      
      registry.addHandler(getChatWebSocketHandler(), CHAT_ENDPOINT)
            .addInterceptors(new HttpHandshakeInterceptor())
            .setAllowedOrigins("*");
      // 위에서 지정한 인터셉터를 통해 WebSocketHandler에게 필요한 속성들을 전달할 수 있다
      log.info("웹소켓 핸들러 등록 완료");
   }
   
   @Bean
   public WebSocketHandler getChatWebSocketHandler() {
      return new WebSocketHandler();
   }
}

 

 

 

WSChatController.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import jakarta.servlet.ServletConfig;
import jakarta.servlet.ServletContext;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import lombok.extern.slf4j.Slf4j;
 
@Slf4j
@Controller
@RequestMapping("/ws")
public class WSChatController 
{
   @GetMapping("/")
   public String index(HttpServletRequest req)
   {   
      return "thymeleaf/index"; 
   } 
   
   @GetMapping("/in")   //  localhost/ws/in?userid=smith  형식으로 요청하여 로그인 테스트
   public String chatForm(HttpServletRequest request, @RequestParam("userid")String userid, Model model)
   {   
      model.addAttribute("userid", userid);
 
      HttpSession session = request.getSession();
      log.info("생성된 세션 ID={}", session.getId());
 
      //HttpSession을 ServletContext 영역에 저장하면 인터셉터를 거쳐 WebSocketHandler에게 전달됨
      request.getServletContext().setAttribute("httpSession", session);
      session.setAttribute("userid", userid);
      
      log.info("로그인 성공({}), session={}", userid, session.getId());
      
      return "thymeleaf/chat";
   }
}

 

 

 

HttpHandshakeInterceptor.java

import java.util.Map;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.web.socket.server.HandshakeInterceptor;
import jakarta.servlet.ServletContext;
import jakarta.servlet.http.HttpSession;
import lombok.extern.slf4j.Slf4j;
 
@Slf4j 
public class HttpHandshakeInterceptor implements HandshakeInterceptor 
{
   @Override
   public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response,
         org.springframework.web.socket.WebSocketHandler wsHandler, Map<String, Object> attributes)
         throws Exception {
      if (request instanceof ServletServerHttpRequest) {
         
         //파라미터로 전달된 attributes 에 속성을 설정해주면 WebSocketHandler안의 WebSocketSession으로 전달됨
         
         Object obj = ((ServletServerHttpRequest) request).getServletRequest().getServletContext().getAttribute("httpSession");
         HttpSession session = (HttpSession) obj;
         attributes.put("httpSession", session);  // WebSocketHandler에게 HttpSession 전달
         
         log.info("인터셉터, 세션 ID={}", session.getId());
      }
      return true;
   }
 
   @Override
   public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response,
         org.springframework.web.socket.WebSocketHandler wsHandler, Exception exception) {
      // TODO Auto-generated method stub
      
   }
}

 

 

 

WebSocketHandler.java

 
import java.util.ArrayList;
import java.util.List;
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;
import jakarta.servlet.http.HttpSession;
import jakarta.websocket.OnOpen;
import lombok.extern.slf4j.Slf4j;
 
@Slf4j
public class WebSocketHandler extends TextWebSocketHandler 
{
   private final List<WebSocketSession> webSocketSessions = new ArrayList<>();
   
   @Override  /* 클라이언트 접속시에 호출됨 */
   public void afterConnectionEstablished(WebSocketSession session) throws Exception {
      webSocketSessions.add(session);
      System.out.println("Client Connected");
       
      //인터셉터에 의해 HttpSession의 속성은 아래처럼 WebSocketSession객체로 전달되어 여기서 다룰 수 있다
      HttpSession httpSession = (HttpSession)session.getAttributes().get("httpSession");
      log.info("웹소켓핸들러, httpSession={}", httpSession.getId());  // 컨트롤러의 세션id와 동일한지 확인
      String userid = (String)httpSession.getAttribute("userid");
      log.info("웹소켓핸들러, userid={}", userid);
   }
 
   @Override  /* 서버에 메시지 도착시 호출됨 */
   protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
      System.out.println("Text Message:"+ message);
      for(WebSocketSession webSocketSession: webSocketSessions) {
         webSocketSession.sendMessage(message);
      }
   }
 
   @Override   /* 접속 해제시 호출됨 */
   public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
      System.out.println("Connection Closed");
      webSocketSessions.remove(session);
   }
 
   @Override   /* 오류 발생시 호출됨 */
   public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
      System.out.println("Error:" + exception);
      super.handleTransportError(session, exception);
   }
 
 

 

 

 

chat.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>웹소켓 테스트 페이지</title>
<script type="text/javascript">
 
var userid = '[[${userid}]]';
alert('userid=' + userid);
 
var g_webSocket = null;
window.onload = function() {
    host = "192.168.0.94";   /* 배포시에 호스트 주소로 변경 */
   //host = "localhost";
    g_webSocket = new WebSocket("ws://"+host+"/ws/chat");
    
    
    /* 웹소켓 접속 성공시 실행 */
    g_webSocket.onopen = function(message) {
        addLineToChatBox("Server is connected.");
    };
    
    
    /* 웹소켓 서버로부터 메시지 수신시 실행 */
    g_webSocket.onmessage = function(message) {
        addLineToChatBox(message.data);
    };
 
    /* 웹소켓 이용자가 연결을 해제하는 경우 실행 */
    g_webSocket.onclose = function(message) {
        addLineToChatBox("Server is disconnected.");
    };
 
    /* 웹소켓 에러 발생시 실행 */
    g_webSocket.onerror = function(message) {
        addLineToChatBox("Error!");
    };
}
 
/* 채팅 메시지를 화면에 표시 */
function addLineToChatBox(_line) {
    if (_line == null) {
        _line = "";
    }
    
    var chatBoxArea = document.getElementById("chatBoxArea");
    chatBoxArea.value += _line + "\n";
    chatBoxArea.scrollTop = chatBoxArea.scrollHeight;    
}
 
/* Send 버튼 클릭하면 서버로 메시지 전송 */
function sendButton_onclick() {
    var inputMsgBox = document.getElementById("inputMsgBox"); // $('#inputMsgBox').val();
    if (inputMsgBox == null || inputMsgBox.value == null || inputMsgBox.value.length == 0) {
        return false;
    }
    
    var chatBoxArea = document.getElementById("chatBoxArea");
    
    if (g_webSocket == null || g_webSocket.readyState == 3) {
        chatBoxArea.value += "Server is disconnected.\n";
        return false;
    }
    
    // 서버로 메시지 전송
    g_webSocket.send('['+ userid +'] ' + inputMsgBox.value);
    inputMsgBox.value = "";
    inputMsgBox.focus();
    
    return true;
}
 
/* Disconnect 버튼 클릭하는 경우 호출 */
function disconnectButton_onclick() {
    if (g_webSocket != null) {
        g_webSocket.close();    
    }
}
 
/* inputMsgBox 키 입력하는 경우 호출 */
function inputMsgBox_onkeypress() {
    if (event == null) {
        return false;
    }
    
    // 엔터키 누를 경우 서버로 메시지 전송
    var keyCode = event.keyCode || event.which;
    if (keyCode == 13) {
        sendButton_onclick();
    }
}
</script>
</head>
<body>
    <input id="inputMsgBox" style="width: 250px;" type="text" onkeypress="inputMsgBox_onkeypress()">
    <input id="sendButton" value="Send" type="button" onclick="sendButton_onclick()">
    <input id="disconnectButton" value="Disconnect" type="button" onclick="disconnectButton_onclick()">
    <br/>
    <textarea id="chatBoxArea" style="width: 100%;" rows="10" cols="50" readonly="readonly"></textarea>
</body>
</html>

 

 

 

 

 

---

 

●●특정 인물만 지정하여 해당 상대방에게만 메세지 보내기●●

 

WebSocketHandler.java , WSChatController.java , WebSocketConfiguration.java  위에 코드와 같다.

 

 

 

WebSocketHandler.java

import java.util.*;
import java.util.Map.Entry;
import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;
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;
import jakarta.servlet.http.HttpSession;
import jakarta.websocket.OnOpen;
import jakarta.websocket.Session;
import lombok.extern.slf4j.Slf4j;
 
@Slf4j
public class WebSocketHandler extends TextWebSocketHandler {
    //private final List<WebSocketSession> webSocketSessions = new ArrayList<>();
    private static Map<String, WebSocketSession> userMap = new HashMap<>();
 
    @Override /* 클라이언트 접속시에 호출됨 */
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        //webSocketSessions.add(session);
        System.out.println("Client Connected");
 
        // 인터셉터에 의해 HttpSession의 속성은 아래처럼 WebSocketSession객체로 전달되어 여기서 다룰 수 있다
        HttpSession httpSession = (HttpSession) session.getAttributes().get("httpSession");
        log.info("웹소켓핸들러, httpSession={}", httpSession.getId()); // 컨트롤러의 세션id와 동일한지 확인
        String userid = (String) httpSession.getAttribute("userid");
        log.info("웹소켓핸들러, userid={}", userid);
        userMap.put(userid, session);
    }
 
    @Override /* 서버에 메시지 도착시 호출됨 */
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println("Text Message:" + message.getPayload());
        JSONParser parser = new JSONParser(); // JSON-Simple 라이브러리 사용
        JSONObject jsObj = (JSONObject) parser.parse(message.getPayload().toString());
        String sender = (String) jsObj.get("sender");
        String receiver = (String) jsObj.get("receiver");
        WebSocketSession sess = userMap.get(receiver);
        /*for (WebSocketSession webSocketSession : webSocketSessions) {
         webSocketSession.sendMessage(message);
        }*/
        sess.sendMessage(message);
    }
 
    @Override /* 접속 해제시 호출됨 */
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("Connection Closed");
        String findUserid = "";
        for (Entry<String, WebSocketSession> entry : userMap.entrySet()) {
            if (entry.getValue()==session) { // 키가 null이면 NullPointerException 예외 발생
                findUserid = entry.getKey();
                userMap.remove(findUserid);
                break;
            }
        }
    }
 
    @Override /* 오류 발생시 호출됨 */
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        System.out.println("Error:" + exception);
        super.handleTransportError(session, exception);
    }
 
}

 

 

 

chat.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>웹소켓 테스트 페이지</title>
<script type="text/javascript">
 
var userid = '[[${userid}]]';
alert('userid=' + userid);
 
var g_webSocket = null;
window.onload = function() {
    host = "localhost";   /* 배포시에 호스트 주소로 변경 */
   //host = "localhost 192.168.0.94";
    g_webSocket = new WebSocket("ws://"+host+"/ws/chat");
    
    
    /* 웹소켓 접속 성공시 실행 */
    g_webSocket.onopen = function(message) {
        addLineToChatBox("Server is connected.");
    };
    
    
    /* 웹소켓 서버로부터 메시지 수신시 실행 */
    g_webSocket.onmessage = function(message) {
        var jsObj = JSON.parse(message.data);
        
        addLineToChatBox('[' + jsObj.sender +'] ' + jsObj.msg);
    };
 
    /* 웹소켓 이용자가 연결을 해제하는 경우 실행 */
    g_webSocket.onclose = function(message) {
        addLineToChatBox("Server is disconnected.");
    };
 
    /* 웹소켓 에러 발생시 실행 */
    g_webSocket.onerror = function(message) {
        addLineToChatBox("Error!");
    };
}
 
/* 채팅 메시지를 화면에 표시 */
function addLineToChatBox(_line) {
    if (_line == null) {
        _line = "";
    }
    
    var chatBoxArea = document.getElementById("chatBoxArea");
    chatBoxArea.value += _line + "\n";
    chatBoxArea.scrollTop = chatBoxArea.scrollHeight;    
}
 
/* Send 버튼 클릭하면 서버로 메시지 전송 */
function sendButton_onclick() {
    var inputMsgBox = document.getElementById("inputMsgBox"); // $('#inputMsgBox').val();
    if (inputMsgBox == null || inputMsgBox.value == null || inputMsgBox.value.length == 0) {
        return false;
    }
    
    var chatBoxArea = document.getElementById("chatBoxArea");
    
    if (g_webSocket == null || g_webSocket.readyState == 3) {
        chatBoxArea.value += "Server is disconnected.\n";
        return false;
    }
    
    // 서버로 메시지 전송
    //g_webSocket.send('['+ userid +'] ' + inputMsgBox.value);
    //inputMsgBox.value = "";
   // inputMsgBox.focus();
    
    var jsObj = {};
    jsObj.sender = userid;
    jsObj.receiver = 'jone';
    jsObj.msg = inputMsgBox.value;
    
    var jsStr = JSON.stringify(jsObj);
    g_webSocket.send(jsStr);
    
    inputMsgBox.value = "";
    inputMsgBox.focus();
    
    return true;
}
 
/* Disconnect 버튼 클릭하는 경우 호출 */
function disconnectButton_onclick() {
    if (g_webSocket != null) {
        g_webSocket.close();    
    }
}
 
/* inputMsgBox 키 입력하는 경우 호출 */
function inputMsgBox_onkeypress() {
    if (event == null) {
        return false;
    }
    
    // 엔터키 누를 경우 서버로 메시지 전송
    var keyCode = event.keyCode || event.which;
    if (keyCode == 13) {
        sendButton_onclick();
    }
}
</script>
</head>
<body>
    <input id="inputMsgBox" style="width: 250px;" type="text" onkeypress="inputMsgBox_onkeypress()">
    <input id="sendButton" value="Send" type="button" onclick="sendButton_onclick()">
    <input id="disconnectButton" value="Disconnect" type="button" onclick="disconnectButton_onclick()">
    <br/>
    <textarea id="chatBoxArea" style="width: 100%;" rows="10" cols="50" readonly="readonly"></textarea>
</body>
</html>

 

 

실행결과 :

 

수신자로 지정해둔 jone 만 메세지를 확인할 수 있다.

 

 

 

 모든 채팅 접속자 리스트 구하기
    - 채팅에 접속하는 모든 이용자의 리스트 작성
    - 한 이용자가 모든 이용자의 아이디를 구하려면...
    - 누구나 접근할 수 있는 영역에 접속자 목록을 유지
    - 접속자가 이용자 목록을 요청할 때 컨트롤러에서 그 영역에 접속
    - 접속자 목록을 JSON 배열 형식으로 응답
    - application 영역(Scope)에 모든 접속자의 ID를 기록한다
    - ServletContext ctx = request.getServletContext();
    - ctx.setAttribute("key", "value");
    - ctx.setAttribute("allids", "value");  // list, set, map
   Set<String> set = new HashSet<>();
   ctx.setAttribute("allids", set);

   set = ctx.getAttribute("allids");
   set.add("접속자 ID");

   @GetMapping("/allids")
   @ResponseBody
   public Map<String, List<String>> getAllIds(HttpServletRequest request)
   {
       Set<String> set = (Set<String>)request.getServletContext().getAttribute("allids");
       // set으로부터 아이디를 꺼내서 리스트에 담는다
       // 리스트를 맵에 저장
       // 맵을 리턴
   }

   웹소켓 접속시
    - ServletContext 에 userid 저장
    - 웹소켓 핸들러에서도 ServletContext에 접근이 가능해야 함
    - 인터셉터를 통해서 ServletContext를 구해서 attributes.put("ctx", ctx 참조변수);

   웹소켓 핸들러에서...
   ServletContext ctx = (ServletContext)attributes.get.....get("ctx");

 

모든 이용자에게 접속자 목록 보내기
   WebSocketHandler, afterConnectionEstablished 메소드에 아래의 내용 추가
   /* 모든 이용자에게 이용자 목록을 JSON문자열로 전송한다 */
   Set<String> set = userMap.keySet();
   JSONArray jsArr = new JSONArray();
   Iterator<String> it = set.iterator();
   while(it.hasNext())
   {
      String uid = it.next();
      jsArr.add(uid);
   }
   JSONObject jsObj = new JSONObject();
   jsObj.put("allids", jsArr);
   String jsStr = jsObj.toJSONString();
   session.sendMessage(new TextMessage(jsStr));