[Spring Boot] 웹 소켓(Web Socket)을 사용해 실시간 채팅 구현

웹 소켓(Web Socket)이란?

웹 소켓(Web Socket)은 클라이언트와 서버 간의 양방향 통신을 지원하는 프로토콜로, HTTP보다 효율적인 실시간 데이터 전송이 가능하다.

HTTP는 요청과 응답을 기반으로 한 단방향 통신이지만, 웹 소켓은 연결을 유지하면서 양방향으로 데이터를 주고받을 수 있다.

 

✅ 웹 소켓의 특징

• 양방향 통신 : 클라이언트와 서버가 실시간으로 데이터를 주고받을 수 있다.
• 지속적인 연결 유지: 최초 handshake 후 지속적인 연결을 유지하면서 데이터 전송 가능
• 낮은 오버헤드: HTTP 요청/응답보다 헤더 크기가 작아 네트워크 부하 감소
• 빠른 응답 속도: 실시간 서비스(채팅, 알림 등) 등에 적합

 

---

웹 소켓으로 실시간 채팅 구현하기

웹 소켓 라이브러리 추가

 

build.gradle 파일에 웹 소켓 라이브러리를 추가해준다.

implementation 'org.springframework.boot:spring-boot-starter-websocket'

 

---

프론트엔드

 

vue 코드

<script setup>
import { ref, onMounted } from 'vue'

const message = ref('')
const socket = ref(null);

const sendMessage = () => {
  console.log(message.value)
    socket.value.send(message.value);
}


const connectWebsocket = () => {
  // 웹 소켓 열기
  socket.value = new WebSocket('ws://localhost:8080/ws/chat');

  // 연결되었다면 연결 확인 메시지 출력
  socket.value.onopen = () => {
    console.log('서버에 연결');
  };
  
  // 메시지를 받았으면 메시지 출력 
  socket.value.onmessage = (e) => {
    console.log(event.data + "메세지를 받음");
  };
  
  // 닫혔으면 연결 해제 메시지 출력
  socket.value.onclose = () => {
    console.log('서버와 연결이 해제');
  };
}

  onMounted(() => {
    connectWebsocket();
  });

</script>

<template>
  <div>
    채팅목록
  </div>
  <input v-model="message" type="text" placeholder="메세지를 입력하세요">
  <button @click="sendMessage">전송</button>
</template>

 

---

 

백엔드

MessageHandler

메시지를 처리할 메소드들을 작성한다.

@Component
public class MessageHandler extends TextWebSocketHandler {

    @Override
    public void afterConnectionEstablished(WebSocketSession session)throws Exception {
        System.out.println("클라이언트가 연결했다");
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println(message + "메시지를 받았다.");
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("클라이언트가 연결을 종료했다.");
    }
}

 

 

 

WebSocketConfig

웹 소켓 설정을 작성한다.

/ws/chat 경로에서 웹 소켓 핸들러를 등록하고, 모든 도메인에서 접근을 허용해준다.

@EnableWebSocket
@RequiredArgsConstructor
@Configuration
public class WebSocketConfig implements WebSocketConfigurer {
    private final MessageHandler messageHandler;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(messageHandler, "/ws/chat").setAllowedOrigins("*");
    }
}

 

 

 

 

---

테스트

프론트엔드

 

 

 

백엔드

 

 

 

 

---

웹 소켓 세션 저장 (Set)

 

연결된 모든 클라이언트에게 메시지를 전달한다.

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.util.HashSet;
import java.util.Set;

public class MessageHandler extends TextWebSocketHandler {
    // 현재 연결된 웹소켓 세션을 저장하는 Set (중복 방지)
    private final Set<WebSocketSession> sessions = new HashSet<>();

    // 클라이언트가 웹소켓에 연결되었을 때 실행되는 메서드
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session); // 새 클라이언트 세션을 저장
        System.out.println("클라이언트가 연결했다");
    }

    // 클라이언트가 메시지를 보냈을 때 실행되는 메서드
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println(message + " 메시지를 받았다."); // 받은 메시지 출력
        
        // 연결된 모든 클라이언트에게 받은 메시지를 전송 (브로드캐스트)
        for (WebSocketSession session1 : sessions) {
            session1.sendMessage(message);
        }
    }
}

 

 

 

---

세션 확인 후 처리 (내가 보낸 메시지 안 받게 설정)

 

메시지를 보내는 세션과 서버가 메시지를 전달하려고 하는 세션이 같으면 continue로 다음 작업이 실행되게 한다.

@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
    System.out.println(message + "메시지를 받았다.");
    for(WebSocketSession session1 : sessions){
       // 현재 메시지를 보내려고 하는 세션과 서버가 메시지를 전달하려고 하는 세션이 같으면
       if(session1.equals(session)) {
           continue;
       }
       session1.sendMessage(message); 
    }
}