웹소켓
팀 프로젝트 중 채팅 기능을 넣자는 이야기가 나왔다.
전에 프로젝트 할때는 웹소켓이 별로 끌리지 않았고 힘들어보여서 다른 팀원에게 넘겼었다.
하지만 이번엔 머리에 든게 꽤 있으니 그리 어렵게 하지 않을거라는 생각이 들었다.
하다가 정 안되면 저번 프로젝트의 코드를 참고하면 되겠지 싶어서 해보았다.
이번 글에서는 메시지를 저장하지는 않고 웹소켓을 통해 채팅하기 까지만 구현한다.
사용 기술
프론트엔드는 Next.js / 백엔드는 스프링을 이용하여 채팅 기능을 구현해볼 것이다.
채팅 기능에만 집중해서 만들것이며 기본적인 CORS같은건 굳이 설명하지 않는다.
어차피 설정해줄 것도 origin, credential 설정 뿐이기도 하다.
이 글에는 백엔드 사이드 내용만 적고 프론트엔드 쪽은 이 글로 분리하려고 한다.
웹 소켓 통신은 프론트/백엔드 모두 알아야 연동하기 쉬우므로 프론트쪽 글과 함께 읽는걸 추천한다.
- Spring Boot 3.2.4 / gradle-kotlin
- Java 17
- STOMP(프론트엔드에서는 구현체를 SockJS로 쓰긴 했음)
1. 웹소켓 관련 설정 해주기
WebSocket 의존성 추가
// build.gradle.kts
implementation("org.springframework.boot:spring-boot-starter-websocket")WebSocketConfig 설정
채팅 기능을 구현하려면 MessageBroker가 필요하다.
웹소켓을 사용하기로 했으므로 WebSocketMessageBrokerConfigurer 설정을 해준다.
프론트엔드에서 구현체를 SockJS로 써서 아래처럼 설정한다.
+ 추가 ) 만약 STOMP Client를 사용한다면 withSockJS() 부분을 제거해야한다.
@Configuration
@RequiredArgsConstructor
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
private final AppConfig appConfig;
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic"); // "/topic"을 구독하는 클라이언트에게 메시지 전송
registry.setApplicationDestinationPrefixes("/app"); // 프론트에서 붙여줄 엔드포인트의 prefix
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws") // 백엔드 URL의 엔드포인트
.setAllowedOrigins(appConfig.getFrontUrl()) // 허용할 origin
.withSockJS(); // SockJS로 통신함.STOMP Client를 사용하면 이 부분을 제거한다.
}
}2. 웹소켓을 이용한 채팅 구현
2-1. 도메인 객체 구현
연습용으로는 DTO로 만들어도 되지만 아마 저장까지 해야할것 같아서 엔티티로 만들었다.
단순하게 발송자, 내용, 메시지 타입만 설정해두었다.
ChatMessage
package com.pawland.chat.domain;
import com.pawland.user.domain.User;
import jakarta.persistence.*;
import lombok.*;
@Getter
@Entity
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class ChatMessage {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String content;
private String sender;
private MessageType type;
@Builder
public ChatMessage(String content, String sender, MessageType type) {
this.content = content;
this.sender = sender;
this.type = type;
}
}
MessageType
아래는 프론트와 주고 받을 메시지 타입이다.
public enum MessageType {
CHAT,
JOIN,
LEAVE
}
2-2. 컨트롤러 구현
컨트롤러 설정은 아래와 같다.
@Payload 애노테이션으로 프론트에서 JSON으로 받을 데이터를 DTO로 역직렬화 할 수 있다.
@DestinationVariable 애노테이션으로 HTTP요청의 @PathVariable 처럼 사용할 수 있다.
@Slf4j
@RestController
@RequiredArgsConstructor
public class ChatController {
@MessageMapping("/chat.addUser/{roomId}") // 프론트가 publish 할 때 사용할 백엔드 엔드포인트
@SendTo("/topic/{roomId}") // 백엔드에서 웹소켓으로 프론트에 메시지를 보내주는 구독 url
public ChatMessage addUser(@Payload ChatMessage chatMessage, @DestinationVariable String roomId, SimpMessageHeaderAccessor headerAccessor) {
// Add username in websocket session
log.info("[유저 입장] chatMessage = {}, roomId = {}", chatMessage, roomId);
headerAccessor.getSessionAttributes().put("username", chatMessage.getSender());
headerAccessor.getSessionAttributes().put("roomId", roomId);
return chatMessage;
}
@MessageMapping("/chat.sendMessage/{roomId}") // 프론트가 publish 할 때 사용할 백엔드 엔드포인트
@SendTo("/topic/{roomId}") // 백엔드에서 웹소켓으로 프론트에 메시지를 보내주는 구독 url
public ChatMessage sendMessageToOne(@Payload ChatMessage chatMessage, @DestinationVariable String roomId) {
log.info("[메시지 전송 to {}번 방] chatMessage = {}", roomId, chatMessage);
log.info("id = {}", roomId);
return chatMessage;
}
}
본인이 작성한 엔드포인트에 대한 설명은 아래와 같다.
/app/chat.addUser/{roomId}
프론트에서는 위 엔드포인트로 입장 알림을 보낸다.
이 때 headerAccessor에 username과 roomId 값을 넣는다.
이는 이후 한쪽이 연결을 종료했을 때 상대방에게 퇴장 메시지를 보내기 위한 EventListener에서 사용한다.
/app/chat.addUser/{roomId}
프론트에서 입력한 채팅 메시지를 /topic/{roomId} 토픽을 구독하고 있는 모든 사용자에게 전송한다.
2-3. WebSocketListener 구현
한쪽이 연결을 종료했을 때 상대방에게 퇴장 메시지를 보내는 EventListener를 작성한다.
SessionDisConnectEvent를 이용하여 구현하였다.
프론트에서는 남은 한 쪽이 이걸 받고 메시지를 확인할 수 있게 출력하면 된다.
@Component
@RequiredArgsConstructor
@Slf4j
public class WebSocketListener {
private final SimpMessageSendingOperations messageTemplate;
@EventListener
public void handleWebSocketDisconnectListener(SessionDisconnectEvent event) {
StompHeaderAccessor headerAccessor = StompHeaderAccessor.wrap(event.getMessage());
String username = (String) headerAccessor.getSessionAttributes().get("username");
String roomId = (String) headerAccessor.getSessionAttributes().get("roomId");
if (username != null) {
log.info("User disconnected");
ChatMessage chatMessage = ChatMessage.builder()
.type(MessageType.LEAVE)
.sender(username)
.build();
messageTemplate.convertAndSend("/topic/" + roomId, chatMessage);
}
}
}'API 만들어 보기 > 실시간 채팅' 카테고리의 다른 글
| 실시간 채팅 3: STOMP로 실시간 채팅 구현 시 Nginx 추가 설정 (0) | 2024.05.11 |
|---|---|
| 실시간 채팅 2: STOMP로 실시간 채팅 구현 - Next.js 코드 (0) | 2024.04.11 |
