[Spring/JS] Websocket을 이용한 실시간 QnA 채팅방 만들기

 

기존까지 QnA 웹을 만들어 사용중이었는데,

추가로 채팅방 처럼, 실시간 소통도 가능하면 좋겠다는 생각이 들었다.

 

실시간 채팅을 위해 사용할 기술 스택은 다음과 같다.

구성 요소	선택 기술	이유
메시지 브로커	STOMP over WebSocket (Spring)	별도 외부 브로커 없이 내장으로 가능
실시간 데이터 저장소	Redis Sorted Set	개별 메시지 TTL 처리에 최적화
사용자 식별	JSESSIONID (HTTP 세션)	새로고침해도 닉네임 유지
보안/인증	Spring Security 세션 기반	관리자 페이지와 자연스럽게 연동

 

 

WebSocket과 STOMP

 

WebSocket은 한 번 연결이 맺어지면 서버와 클라이언트가 양방향으로 자유롭게 데이터를 주고받을 수 있는 통신 프로토콜이다.

채팅처럼 실시간성이 중요한 기능을 만들 때는 폴링 방식보다 훨씬 효율적이다.

 

STOMP는 WebSocket 위에서 동작하는 메시지 프로토콜이다.

메시지의 목적지와 구독 개념을 지원해 주기 때문에,

단순히 WebSocket만 쓰는 것보다 채팅방 관리, 특정 사용자에게만 메시지 보내기 등을 구현하기가 훨씬 편리하다.

 

 

기능 구현

 

먼저 채팅을 담을 DTO는 다음과 같이 구현했다.

id는 Redis에서 찾기 위한 고유 식별자고, sessionId에는 JSESSIONID를 담는다.

@Getter @Setter
@NoArgsConstructor
@AllArgsConstructor
public class ChatMessage {
    private String id;
    private String sender;
    private String content;
    private String roomId;
    private String timestamp;
    private String sessionId;
}

 

 

그리고 WebSocketConfig 클래스

Spring Boot에서는 @EnableWebSocketMessageBroker 어노테이션으로 STOMP 브로커가 활성화된다.

클라이언트가 /pub으로 메시지를 발행하면, 서버는 /topic을 구독중인 모두에게 전송한다.

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic", "/queue");   
        registry.setApplicationDestinationPrefixes("/pub");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws-chat")
                .addInterceptors(new HttpSessionHandshakeInterceptor())
                .withSockJS();
    }
}

 

 

그리고 WebSocket 연결은 매번 새 STOMP 세션을 만들기 때문에,

HTTP 세션의 JSESSIONID를 그대로 쓰려면 핸드셰이크 시점에 복사해야 한다.

따라서 인터셉터에 명시를 해주었다.

public class HttpSessionHandshakeInterceptor implements HandshakeInterceptor {
    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response,
                                   WebSocketHandler wsHandler, Map<String, Object> attributes) {
        if (request instanceof ServletServerHttpRequest servletRequest) {
            HttpSession session = servletRequest.getServletRequest().getSession(false);
            if (session != null) {
                attributes.put("JSESSIONID", session.getId()); 
            }
        }
        return true;
    }
}

 

 

추가로 채팅을 위해 필요한 웹도 SecurityConfig에 명시하였다.

@Bean
public SecurityFilterChain webFilterChain(HttpSecurity http) throws Exception {
    http
        .securityMatcher("/", "/questions/**", "/admin/**", "/css/**", "/js/**", "/images/**", "/webjars/**",
                         "/ws-chat/**", "/chat/**", "/api/chat/**")
        ...
    return http.build();
}

 

 

이제 서비스 부분을 구현해보자.

ChatService 클래스를 생성 후, 메시지 전송 메소드를 구현했다.

Sorted Set의 score로 메시지 생성 시각과 ZADD로 JSON을 저장해서 전송한다.

public void sendMessage(ChatMessage message) {
    if (message.getId() == null) {
        message.setId(UUID.randomUUID().toString());
    }

    String roomKey = "chat:zset:room:" + message.getRoomId();
    long score = Instant.parse(message.getTimestamp()).toEpochMilli();
    String json = objectMapper.writeValueAsString(message);
    redisTemplate.opsForZSet().add(roomKey, json, score);

    messagingTemplate.convertAndSend("/topic/room/" + message.getRoomId(), message);
}

 

 

메시지는 6시간이 지나면 만료처리를 할 것이므로, 해당 메소드도 구현해보자

처음에는 Redis List를 썼지만, List는 키 전체에 TTL이 걸려서 6시간 이지나면 모든 메시지가 사라지는 문제가 있었다.

 

따라서, Sorted Set으로 바꾸고 조회할때마다 ZREMRANGEBYSCORE로 오래된 데이터를 쓸어냈다.

이로써 별도 스케줄러 없이도 해당 기능을 구현 할 수 있었다.

public List<ChatMessage> getRecentMessages(String roomId) {
    String roomKey = "chat:zset:room:" + roomId;

    long cutoff = Instant.now().minusSeconds(60 * 60 * 6).toEpochMilli();
    redisTemplate.opsForZSet().removeRangeByScore(roomKey, 0, cutoff);

    Set<String> jsonSet = redisTemplate.opsForZSet().range(roomKey, 0, -1);
    if (jsonSet == null || jsonSet.isEmpty()) return Collections.emptyList();

    return jsonSet.stream()
            .map(json -> {
                try { return objectMapper.readValue(json, ChatMessage.class); }
                catch (Exception e) { return null; }
            })
            .filter(Objects::nonNull)
            .sorted(Comparator.comparingLong(m -> Instant.parse(m.getTimestamp()).toEpochMilli()))
            .collect(Collectors.toList());
}

 

 

마지막으로 관리자용 메시지 삭제 기능도 구현했다.

public boolean deleteMessage(String roomId, String messageId) {
    String roomKey = "chat:zset:room:" + roomId;
    Set<String> all = redisTemplate.opsForZSet().range(roomKey, 0, -1);
    if (all == null) return false;

    for (String json : all) {
        try {
            ChatMessage msg = objectMapper.readValue(json, ChatMessage.class);
            if (messageId.equals(msg.getId())) {
                redisTemplate.opsForZSet().remove(roomKey, json);

                ChatMessage notice = new ChatMessage();
                notice.setId(UUID.randomUUID().toString());
                notice.setSender("시스템");
                notice.setContent("관리자가 메시지를 삭제했습니다.");
                notice.setRoomId(roomId);
                notice.setTimestamp(Instant.now().toString());
                messagingTemplate.convertAndSend("/topic/room/" + roomId, notice);
                return true;
            }
        } catch (Exception e) { ... }
    }
    return false;
}

 

 

그리고 ChatSessionService 클래스도 구현

 

ConcurrentHashMap으로 서버 메모리에 닉네임을 JSESSIONID별로 저장하고

이름은 익명1~99 사이에서 무작위로 생성 시켰다.

차단은, Redis Set에 JSESSIONID를 넣고 6시간 TTL을 걸었다. (시간 지나면 자동 해제)

@Service
public class ChatSessionService {

    private final ConcurrentHashMap<String, String> sessionNames = new ConcurrentHashMap<>();
    private final StringRedisTemplate redisTemplate;

    public String getOrCreateName(String sessionId) {
        return sessionNames.computeIfAbsent(sessionId,
                id -> "익명" + ThreadLocalRandom.current().nextInt(1, 100));
    }

    public boolean isBanned(String sessionId) {
        return Boolean.TRUE.equals(redisTemplate.opsForSet().isMember("chat:banned:sessions", sessionId));
    }

    public void banSession(String sessionId) {
        redisTemplate.opsForSet().add("chat:banned:sessions", sessionId);
        redisTemplate.expire("chat:banned:sessions", Duration.ofHours(6));
    }
}

 

 

이제 Controller를 구현해보자, 메시지 전송과 차단 알림 기능이 필요하다.

 

처음에는 convertAndSendToUser를 써서 개인 메시지를 보내려 했지만,

/user/queue/ban 구독이 제대로 동작하지 않았다.

 

따라서 차단메시지를 공개 채널(/topic/room/main)으로 보내고

클라이언트에서 자신의 JSESSIONID와 비교하여 표시하는 방식으로 바꿨다.

@MessageMapping("/chat.send")
public void sendMessage(ChatMessage message, Principal principal,
                        SimpMessageHeaderAccessor headerAccessor) {
    String jsessionId = (String) headerAccessor.getSessionAttributes().get("JSESSIONID");
    String sessionId = (jsessionId != null) ? jsessionId : headerAccessor.getSessionId();

    if (chatSessionService.isBanned(sessionId)) {
        ChatMessage banNotice = new ChatMessage();
        banNotice.setSender("시스템");
        banNotice.setContent("관리자에 의해 일시적으로 차단되었습니다.");
        banNotice.setTimestamp(Instant.now().toString());
        banNotice.setRoomId(message.getRoomId());
        banNotice.setSessionId(sessionId);

        messagingTemplate.convertAndSend("/topic/room/" + message.getRoomId(), banNotice);
        return;
    }

    String nickname = chatSessionService.getOrCreateName(sessionId);
    if (principal != null) {
        Authentication auth = (Authentication) principal;
        boolean isAdmin = auth.getAuthorities().stream()
                .anyMatch(a -> a.getAuthority().equals("ROLE_ADMIN"));
        message.setSender(isAdmin ? "관리자" : nickname);
    } else {
        message.setSender(nickname);
    }

    message.setSessionId(sessionId);
    message.setTimestamp(Instant.now().toString());
    chatService.sendMessage(message);
}

 

 

AdminChatController에서는 유저 일시 차단, 메시지 삭제 기능을 구현했다.

@RestController
@RequestMapping("/admin/chat")
@RequiredArgsConstructor
public class AdminChatController {

    private final ChatSessionService chatSessionService;
    private final ChatService chatService;

    @PostMapping("/ban/{sessionId}")
    public ResponseEntity<?> banUser(@PathVariable String sessionId) {
        chatSessionService.banSession(sessionId);
        return ResponseEntity.ok().build();
    }

    @DeleteMapping("/messages/{messageId}")
    public ResponseEntity<?> deleteMessage(@PathVariable String messageId) {
        boolean deleted = chatService.deleteMessage("main", messageId);
        return deleted ? ResponseEntity.ok().build() : ResponseEntity.notFound().build();
    }
}

 

 

기능 구현은 완료했으니 화면을 구현해보도록 하자

 

 

화면 구현

 

기본적인 HTML 뼈대를 만들고 (코드 생략)

필요한 기능들을 javascript로 만들어야 한다.

 

WebSocket 연결과 시스템 메시지 필터링을 하는 기능

차단 알림은 공개 채널로 오지만, 차단 당한 본인일 경우에 showMessage를 호출한다.

var stompClient = null;
var roomId = "main";

function connect() {
    var socket = new SockJS('/ws-chat');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function(frame) {
        stompClient.subscribe('/topic/room/' + roomId, function(message) {
            var msg = JSON.parse(message.body);
            if (msg.sender === '시스템' && msg.sessionId !== myJSessionId) {
                return;
            }
            showMessage(msg);
        });
        loadHistory();
    });
}

 

 

메시지 전송은 STOMP를 통해, /pub/chat.send로 JSON을 보낸다.

서버는 메시지를 받고 발신자 닉네임을 결정, redis에 저장 후 구독자들에게 broadcast 한다.

function sendMessage() {
    var content = document.getElementById('message-input').value.trim();
    if (content && stompClient) {
        stompClient.send("/pub/chat.send", {}, JSON.stringify({
            content: content,
            roomId: roomId
        }));
        document.getElementById('message-input').value = '';
    }
}

 

 

메시지 표시와, 관리자 전용 버튼 메소드

 

삭제 버튼은 속성에 메시지 UUID를 담아, 클릭시 DELETE 요청을 보내고

차단 버튼은 매 채팅에 보이면 복잡해지므로, 해당 세션의 마지막 메시지에만 보이게 했다.

var lastBanButtonElements = {};

function showMessage(message) {
    var container = document.getElementById('chat-messages');
    var div = document.createElement('div');

    if (message.sender === '시스템') {
        div.className = 'chat-message system-chat';
    } else if (message.sender === '관리자') {
        div.className = 'chat-message admin-chat';
    } else {
        div.className = 'chat-message user-chat';
    }

    var html = '<strong>' + message.sender + ':</strong> ' + message.content +
               ' <small>' + new Date(message.timestamp).toLocaleTimeString() + '</small>';

    if (isAdmin && message.id && message.sender !== '시스템') {
        html += ' <button class="delete-msg-btn" data-message-id="' + message.id + '">✕</button>';
    }

    div.innerHTML = html;
    container.appendChild(div);

    if (isAdmin && message.sessionId && message.sender !== '관리자' && message.sender !== '시스템') {
        addOrReplaceBanButton(div, message.sessionId);
    }

    ...
}

 

 

기능과 화면까지 완료했으니 마지막 CSS로 디자인을 다듬어 보자

 

메시지 스타일은, 문자열이 채팅방을 넘지 않게 했고

관리자나, 시스템 메시지는 디자인 별도로 주었다.

.chat-message {
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  margin-bottom: 6px;
  word-break: break-word;
}

.admin-chat {
  background: #e3f2fd;
  border-left: 4px solid #007aff;
}

...

 

 

채팅 입력창과 전송 버튼의 디자인도 설정

입력창과 전송버튼이 한줄에 위치하게 nowrap과 flex속성을 조정했다.

.input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

...

 

 

모바일 대응에서는 채팅창이 너무 작아지지 않게 calc로 동적 높이를 설정했다.

@media (max-width: 768px) {
  .chat-container {
    height: calc(100vh - 220px);
    min-height: 280px;
  }
  ...
}

 

 

이외 기타 세부적인 디자인 조정을 하고 개발은 끝.

https://github.com/101Sean/devlog-qna

GitHub - 101Sean/devlog-qna: 개발 블로그 QnA를 위한 댓글 + 실시간 채팅 형식 웹

 

 

테스트

 

이제 라이브 서버에 올리기 전, 테스트를 해보자

 

먼저 채팅은 세션별로 정상적으로 동작이 됐다.

 

관리자 관점에서는 채팅 삭제와, 차단 버튼이 정상 동작

 

그리고 차단된 세션은 메시지를 칠 수 없게 경고 알람까지 완료

 

 

이로써 실시간 QnA 기능까지 완성하게 되었다.

당분간은 더 추가할 기능은 없어 보이지만 필요할때 하나하나 추가해 나가야겠다.

 

 

원본 게시글

https://blog.naver.com/101artspace/224339806196

[Spring/JS] Websocket을 이용한 실시간 QnA 채팅방 만들기