[OneStack]팀 프로젝트 개발 과정 - WebSocket 실시간 채팅

본 프로젝트 개발자 과정 학원의 파이널 프로젝트 기획, 개발, 배포 과정을 담고 있습니다. 

 

OneStack

---

📌 WebSocket이란?

WebSocket은 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜입니다. HTTP와 달리 연결을 유지하면서 실시간으로 데이터를 주고받을 수 있는 장점이 있습니다.

---

✅ WebSocket의 장점

• 실시간 양방향 통신: 서버와 클라이언트가 자유롭게 데이터를 주고받을 수 있음
• 낮은 지연 시간: 기존 HTTP 요청/응답 방식보다 빠른 데이터 전송
• 효율적인 서버 리소스 사용: 연결 유지로 인한 반복적인 요청 오버헤드 감소
• 최적화된 데이터 전송: 헤더 크기가 작아 네트워크 비용 절감

---

🛠 WebSocket 기반 실시간 채팅 구현

WebSocket을 활용한 실시간 채팅을 구현하기 위해 다음과 같은 단계로 진행됩니다.

1️⃣ WebSocket 설정

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic"); // 구독 경로 설정
        config.setApplicationDestinationPrefixes("/app"); // 메시지 발행 경로 설정
    }
    
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws")
               .setAllowedOrigins("https://www.onestack.store")
               .withSockJS(); // SockJS 지원
    }
}

🔹 STOMP 프로토콜을 적용하여 메시지 브로커를 활용

🔹 SockJS를 지원하여 브라우저 호환성을 높임

---

2️⃣ 채팅 메시지 도메인

@Getter @Setter
@NoArgsConstructor
@AllArgsConstructor
public class ChatMessage {
    private Long messageId;
    private String roomId;
    private String sender;
    private String nickname;
    private String message;
    private String type;     // ENTER, TALK, LEAVE
    private LocalDateTime sentAt;
    private String socialType;
    private String profileImage;
}

🔹 메시지 유형 (입장, 대화, 퇴장) 지정 가능

🔹 보낸 시간과 프로필 이미지 정보 포함

---

3️⃣ 채팅방 도메인

@Getter @Setter
public class ChatRoom {
    private String roomId;
    private String roomName;
    private int memberNo;
    private int proNo;
    private int estimationNo;
    private int maxUsers;
    private LocalDateTime createdAt;
    private List<ChatMessage> recentMessages;
    private int roomAdmin;
    private String estimationContent;
    private String memberNickname;
    private String proNickname;
    private int progress;
    private String lastMessage;
    private LocalDateTime updatedAt;
    private int unreadCount;
}

🔹 견적 요청과 연동된 채팅방 생성 가능

🔹 읽지 않은 메시지 수 및 채팅방 진행 상태 저장

---

4️⃣ 채팅 컨트롤러

@Controller
@Slf4j
public class ChatController {
    
    @Autowired
    private ChatService chatService;
    
    @Autowired
    private SimpMessagingTemplate messagingTemplate;
    
    @MessageMapping("/chat/message")
    public void sendMessage(@Payload ChatMessage message) {
        chatService.saveMessage(message);
        messagingTemplate.convertAndSend("/topic/chat/room/" + message.getRoomId(), message);
        chatService.updateChatRoom(message.getRoomId());
    }
    
    @GetMapping("/chat/room/{roomId}")
    public String enterRoom(@PathVariable String roomId, Model model, HttpSession session) {
        ChatRoom room = chatService.findRoom(roomId);
        List<ChatMessage> messages = chatService.getRecentMessages(roomId, 50);
        model.addAttribute("room", room);
        model.addAttribute("messages", messages);
        return "chat/room";
    }
}

🔹 WebSocket을 통해 메시지 전송 및 채팅방 정보 업데이트

🔹 채팅방 입장 시 최근 메시지 50개 로드

---

5️⃣ 채팅 서비스

@Service
@Slf4j
public class ChatService {
    
    @Autowired
    private ChatMapper chatMapper;
    
    public String createRoom(ChatRoom room) {
        String roomId = UUID.randomUUID().toString();
        room.setRoomId(roomId);
        room.setCreatedAt(LocalDateTime.now());
        chatMapper.createChatRoom(room);
        return roomId;
    }
    
    public void saveMessage(ChatMessage message) {
        message.setSentAt(LocalDateTime.now());
        chatMapper.insertMessage(message);
    }
    
    public List<ChatMessage> getRecentMessages(String roomId, int limit) {
        return chatMapper.getRecentMessages(roomId, limit);
    }
}

🔹 DB에 메시지를 저장하여 채팅 내역 유지

🔹 채팅방 입장 시 최근 메시지를 불러올 수 있도록 처리

---

💡 WebSocket 기반 실시간 채팅의 특징

✅ 실시간 통신

• WebSocket을 통한 즉각적인 메시지 전달
• 채팅방 참여자 모두에게 동시 전송

✅ 메시지 영속성

• DB에 메시지 저장으로 채팅 내역 유지
• 채팅방 입장 시 이전 메시지 로드 가능

✅ 채팅방 관리

• 견적 요청과 연동된 채팅방 생성 가능
• 참여자 권한 관리 및 읽지 않은 메시지 카운트 제공

✅ 보안 강화

• SockJS를 통한 WebSocket 폴백 지원 (브라우저 호환성 확보)
• 허용된 도메인에서만 접근 가능 (CORS 설정)
• 세션 기반 인증 적용 가능

---

🔍 개선 가능 포인트

• 메시지 큐 도입 (대량 메시지 처리 및 서버 부하 분산)
• 실시간 알림 기능 추가 (푸시 알림, 이메일 알림 등)
• 파일 전송 기능 지원 (이미지/파일 업로드 및 미리보기 제공)

---

🎯 마무리

WebSocket을 활용한 실시간 채팅 시스템은 사용자 경험을 크게 향상시킬 수 있습니다.

특히 견적 요청과 연동된 채팅 기능을 통해 의뢰인과 전문가 간의 원활한 소통이 가능합니다.
다음 포스팅에서는 채팅방 내 게시판과 캘린더 기능 구현에 대해 다뤄보겠습니다.

---

🔗Spring WebSocket과 STOMP, 그리고 Kafka를 활용한 실시간 통신

Spring WebSocket과 STOMP, 그리고 Kafka를 활용한 실시간 통신