$$config title: SSE 로 구현하는 채팅 keywords: - IT $$ # 1강 : 폴링 VS SSE ## 폴링 통신방식 $$uml 브라우저 <-> 서버 : 연결1 수립(3 Way 핸드쉐이크) 브라우저 -> 서버 : 연결1 요청 브라우저 <- 서버 : 연결1 응답 브라우저 <-> 서버 : 연결1 끊기(4 Way 핸드쉐이크) 브라우저 -> 브라우저 : IDLE 브라우저 <-> 서버 : 연결2 수립(3 Way 핸드쉐이크) 브라우저 -> 서버 : 연결2 요청 브라우저 <- 서버 : 연결2 응답 브라우저 <-> 서버 : 연결2 끊기(4 Way 핸드쉐이크) 브라우저 -> 브라우저 : IDLE 브라우저 <-> 서버 : 연결3 수립(3 Way 핸드쉐이크) 브라우저 -> 서버 : 연결3 요청 브라우저 <- 서버 : 연결3 응답 브라우저 <-> 서버 : 연결3 끊기(4 Way 핸드쉐이크) $$ ## SSE 통신방식 $$uml 브라우저 <-> 서버 : 연결1 수립(3 Way 핸드쉐이크) 브라우저 -> 서버 : 연결1 요청 서버 -> 서버 : 이벤트 발생 브라우저 <- 서버 : 연결1 응답 서버 -> 서버 : 이벤트 발생 브라우저 <- 서버 : 연결1 응답 서버 -> 서버 : 이벤트 발생 브라우저 <- 서버 : 연결1 응답 서버 -> 서버 : 이벤트 발생 브라우저 <- 서버 : 연결1 응답 브라우저 <-> 서버 : SSE 자동 재연결 서버 -> 서버 : 이벤트 발생 브라우저 <- 서버 : 연결1 응답 브라우저 -> 브라우저 : 브라우저 종료 브라우저 <-> 서버 : 연결1 끊기(4 Way 핸드쉐이크) $$ # 2강 : 채팅앱 구조 - [영상 - 22 12 19, ken 11575, 2강, 1부, 메세지들을 그리는 구조(폴링방식)](https://youtu.be/VTB-i9O8B80) - [영상 - 22 12 19, ken 11575, 2강, 2부, 메세지를 작성하는 구조](https://youtu.be/UxfNdctl0dc) ## 메세지들을 그리는 구조(폴링방식) $$uml 클라이언트 -> "GET /chat/room" : 채팅방 접속 클라이언트 -> 클라이언트 : 일정시간 대기 후 메세지들 요청 API 호출 클라이언트 -> "GET /chat/messages" : 전체 메세지 클라이언트 -> 클라이언트 : 로딩한 메세지 그리기 클라이언트 -> 클라이언트 : 일정시간 대기 후 메세지들 요청 API 호출 클라이언트 -> "GET /chat/messages" : ?fromUuid=D, 메세지 D 이후로 발생한 메세지들 클라이언트 -> 클라이언트 : 로딩한 메세지 그리기 클라이언트 -> 클라이언트 : 일정시간 대기 후 메세지들 요청 API 호출 클라이언트 -> "GET /chat/messages" : ?fromUuid=F, 메세지 F 이후로 발생한 메세지들 클라이언트 -> 클라이언트 : 로딩한 메세지 그리기 클라이언트 -> 클라이언트 : 채팅방 퇴장 $$ ## 메세지를 작성하는 구조 $$uml 클라이언트 -> "GET /chat/room" : 채팅방 접속 클라이언트 -> 클라이언트 : IDLE 클라이언트 -> 클라이언트 : 작성폼에서 작성자와 채팅내용을 입력하고 엔터 클라이언트 -> "POST /chat/writeMessage" : {"authorName": "홍길동", "content": "내용1"} 클라이언트 -> 클라이언트 : IDLE 클라이언트 -> 클라이언트 : 작성폼에서 작성자와 채팅내용을 입력하고 엔터 클라이언트 -> "POST /chat/writeMessage" : {"authorName": "홍길동", "content": "내용2"} 클라이언트 -> 클라이언트 : IDLE 클라이언트 -> 클라이언트 : 작성폼에서 작성자와 채팅내용을 입력하고 엔터 클라이언트 -> "POST /chat/writeMessage" : {"authorName": "홍길동", "content": "내용3"} 클라이언트 -> 클라이언트 : IDLE 클라이언트 -> 클라이언트 : 작성폼에서 작성자와 채팅내용을 입력하고 엔터 클라이언트 -> "POST /chat/writeMessage" : {"authorName": "홍길동", "content": "내용4"} 클라이언트 -> 클라이언트 : 채팅방 퇴장 $$ # 3강 : 채팅UI HTML ```html

``` # 4강 : 자바스크립트 라이브러리 ```js function fetchPost(url, data) { return fetch(url, { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json" }, body: JSON.stringify(data), }) .then(response => response.json()) } function fetchGet(url, data) { let query = Object.keys(data) .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(data[k])) .join('&'); return fetch(url + "?" + query, { method: "GET", headers: { "Content-Type": "application/json", "Accept": "application/json" } }) .then(response => response.json()) } ``` # 5강 : 글 작성 요청 ```html

``` ```js function Chat__writeMessage(form) { form.authorName.value = form.authorName.value.trim(); if (form.authorName.value.length == 0) { alert("작성자를 입력해주세요."); form.authorName.focus(); return; } form.content.value = form.content.value.trim(); if (form.content.value.length == 0) { form.content.focus(); return; } fetchPost("/chat/writeMessage", { authorName: form.authorName.value, content: form.content.value }) .then(body => console.log); form.content.value = ''; form.content.focus(); } ``` # 6강 : 글들 가져오기(수동) ```js // 현재 클라이언트가 받은 메세지 번호를 입력해야 합니다. // 그래야 메세지 요청시에 필요한 부분만 가져오게 됩니다. let Chat__lastLoadedUuid = ""; function Chat__loadMore() { fetchGet("/chat/messages", { fromUuid: Chat__lastLoadedUuid }) .then(body => { Chat__drawMessages(body.data.messages); }); } const Chat__elMessageUl = document.querySelector('.chat__message-ul'); function Chat__drawMessages(messages) { if ( messages.length == 0 ) return; // 메세지를 그리기 전에 Chat__lastLoadedUuid 변수를 갱신합니다. Chat__lastLoadedUuid = messages[messages.length - 1].uuid; messages.forEach((message) => { Chat__elMessageUl .insertAdjacentHTML( "afterBegin", `

${message.authorName} : ${message.content}

` ); }); } Chat__loadMore(); ``` # 7강 : 글들 가져오기(폴링) ```js // 현재 클라이언트가 받은 메세지 번호를 입력해야 합니다. // 그래야 메세지 요청시에 필요한 부분만 가져오게 됩니다. let Chat__lastLoadedUuid = ""; function Chat__loadMore() { fetchGet("/chat/messages", { fromUuid: Chat__lastLoadedUuid }) .then(body => { Chat__drawMessages(body.data.messages); setTimeout(Chat__loadMore, 500); // 추가 }); } const Chat__elMessageUl = document.querySelector('.chat__message-ul'); function Chat__drawMessages(messages) { if ( messages.length == 0 ) return; // 메세지를 그리기 전에 Chat__lastLoadedUuid 변수를 갱신합니다. Chat__lastLoadedUuid = messages[messages.length - 1].uuid; messages.forEach((message) => { Chat__elMessageUl .insertAdjacentHTML( "afterBegin", `

${message.authorName} : ${message.content}

` ); }); } Chat__loadMore(); ``` # 8강 : 글들 가져오기(SSE) ```js // 현재 클라이언트가 받은 메세지 번호를 입력해야 합니다. // 그래야 메세지 요청시에 필요한 부분만 가져오게 됩니다. let Chat__lastLoadedUuid = ""; function Chat__loadMore() { fetchGet("/chat/messages", { fromUuid: Chat__lastLoadedUuid }) .then(body => { Chat__drawMessages(body.data.messages); }); } const Chat__elMessageUl = document.querySelector('.chat__message-ul'); function Chat__drawMessages(messages) { if ( messages.length == 0 ) return; // 메세지를 그리기 전에 Chat__lastLoadedUuid 변수를 갱신합니다. Chat__lastLoadedUuid = messages[messages.length - 1].uuid; messages.forEach((message) => { Chat__elMessageUl .insertAdjacentHTML( "afterBegin", `

${message.authorName} : ${message.content}

` ); }); } const sse = new EventSource("/sse/connect"); sse.addEventListener('chat__messageAdded', e => { Chat__loadMore(); }); Chat__loadMore(); ``` # 9강 : 백엔드 코드 설명 ## Ut.java ```java package com.ll.exam.app_2022_12_12__1.util; import java.util.LinkedHashMap; import java.util.Map; public class Ut { public static Map mapOf(Object... args) { Map map = new LinkedHashMap<>(); int size = args.length / 2; for (int i = 0; i < size; i++) { int keyIndex = i * 2; int valueIndex = keyIndex + 1; K key = (K) args[keyIndex]; V value = (V) args[valueIndex]; map.put(key, value); } return map; } } ``` ## MessageDao.java ```java package com.ll.exam.app_2022_12_12__1.bounded_context.chat.adapter.out.pure; import com.ll.exam.app_2022_12_12__1.bounded_context.chat.domain.model.Message; import com.ll.exam.app_2022_12_12__1.bounded_context.chat.port.out.MessageLoadPort; import com.ll.exam.app_2022_12_12__1.bounded_context.chat.port.out.MessageSavePort; import org.springframework.stereotype.Repository; import java.util.ArrayList; import java.util.List; import java.util.UUID; import java.util.stream.IntStream; @Repository public class MessageDao implements MessageSavePort, MessageLoadPort { private final List messages = new ArrayList<>(); @Override public void save(Message message) { messages.add(message); } @Override public List getMessages(UUID fromUuid) { if (fromUuid == null) { return messages; } int index = IntStream.range(0, messages.size()) .filter(i -> messages.get(i).getUuid().equals(fromUuid)) .findFirst() .orElse(-1); return messages.subList(index + 1, messages.size()); } } ``` ## Message.java ```java package com.ll.exam.app_2022_12_12__1.bounded_context.chat.domain.model; import lombok.AllArgsConstructor; import lombok.Getter; import lombok.ToString; import java.time.LocalDateTime; import java.util.UUID; @AllArgsConstructor @Getter @ToString public class Message { private final UUID uuid; private final LocalDateTime createDate; private final String authorName; private final String content; public Message(String authorName, String content) { this(UUID.randomUUID(), LocalDateTime.now(), authorName, content); } } ``` ## GetMessagesUseCase.java ```java package com.ll.exam.app_2022_12_12__1.bounded_context.chat.port.in; import com.ll.exam.app_2022_12_12__1.bounded_context.chat.domain.model.Message; import java.util.List; import java.util.UUID; public interface GetMessagesUseCase { List getMessages(UUID fromUuid); } ```` ## GetMessagesService.java ```java package com.ll.exam.app_2022_12_12__1.bounded_context.chat.domain.service; import com.ll.exam.app_2022_12_12__1.bounded_context.chat.domain.model.Message; import com.ll.exam.app_2022_12_12__1.bounded_context.chat.port.in.GetMessagesUseCase; import com.ll.exam.app_2022_12_12__1.bounded_context.chat.port.out.MessageLoadPort; import lombok.RequiredArgsConstructor; import org.springframework.stereotype.Service; import java.util.List; import java.util.UUID; @Service @RequiredArgsConstructor public class GetMessagesService implements GetMessagesUseCase { private final MessageLoadPort messageLoadPort; @Override public List getMessages(UUID fromUuid) { return messageLoadPort.getMessages(fromUuid); } } ``` ## WriteMessageUseCase.java ```java package com.ll.exam.app_2022_12_12__1.bounded_context.chat.port.in; import java.util.UUID; public interface WriteMessageUseCase { UUID write(String authorName, String content); } ``` ## WriteMessagesService.java ```java package com.ll.exam.app_2022_12_12__1.bounded_context.chat.domain.service; import com.ll.exam.app_2022_12_12__1.bounded_context.chat.domain.model.Message; import com.ll.exam.app_2022_12_12__1.bounded_context.chat.port.in.WriteMessageUseCase; import com.ll.exam.app_2022_12_12__1.bounded_context.chat.port.out.MessageSavePort; import lombok.RequiredArgsConstructor; import lombok.extern.slf4j.Slf4j; import org.springframework.stereotype.Service; import java.util.UUID; @Service @RequiredArgsConstructor @Slf4j public class WriteMessageService implements WriteMessageUseCase { private final MessageSavePort messageSavePort; @Override public UUID write(String authorName, String content) { Message message = new Message(authorName, content); messageSavePort.save(message); log.debug("message : {}", message); return message.getUuid(); } } ``` ## ChatController.java ```java package com.ll.exam.app_2022_12_12__1.bounded_context.chat.adapter.in.http; import com.ll.exam.app_2022_12_12__1.base.SseEmitters; import com.ll.exam.app_2022_12_12__1.base.dto.RsData; import com.ll.exam.app_2022_12_12__1.bounded_context.chat.domain.model.Message; import com.ll.exam.app_2022_12_12__1.bounded_context.chat.port.in.GetMessagesUseCase; import com.ll.exam.app_2022_12_12__1.bounded_context.chat.port.in.WriteMessageUseCase; import lombok.RequiredArgsConstructor; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import java.util.List; import java.util.UUID; @Controller @RequestMapping("/chat") @RequiredArgsConstructor public class ChatController { private final SseEmitters sseEmitters; // writeMessageUseCase 시작 // private final WriteMessageUseCase writeMessageUseCase; public record WriteMessageRequest(String authorName, String content) { } public record WriteMessageResponse(UUID uuid) { } @PostMapping("/writeMessage") @ResponseBody public RsData writeMessage(@RequestBody WriteMessageRequest request) { UUID writeUuid = writeMessageUseCase.write(request.authorName, request.content); sseEmitters.noti("chat__messageAdded"); return RsData.successOf(new WriteMessageResponse(writeUuid)); } // writeMessageUseCase 끝 // // getMessagesUseCase 시작 // private final GetMessagesUseCase getMessagesUseCase; public record GetMessagesRequest(UUID fromUuid) { } public record GetMessagesResponse(List messages) { } @GetMapping("/messages") @ResponseBody public RsData getMessages(GetMessagesRequest request) { List messages = getMessagesUseCase.getMessages(request.fromUuid); return RsData.successOf(new GetMessagesResponse(messages)); } // getMessagesUseCase 끝 // @GetMapping("/room") public String showRoom() { return "chat/room"; } } ``` ## RsData.java ```java package com.ll.exam.app_2022_12_12__1.base.dto; import lombok.AllArgsConstructor; import lombok.Getter; @Getter @AllArgsConstructor public class RsData { private String resultCode; private String msg; private T data; public static RsData of(String resultCode, String msg, T data) { return new RsData<>(resultCode, msg, data); } public static RsData of(String resultCode, String msg) { return of(resultCode, msg, null); } public static RsData successOf(T data) { return of("S-1", "성공", data); } public static RsData failOf(T data) { return of("F-1", "실패", data); } public boolean isSuccess() { return resultCode.startsWith("S-1"); } public boolean isFail() { return isSuccess() == false; } } ``` ## SseEmitters.java ```java package com.ll.exam.app_2022_12_12__1.base; import com.ll.exam.app_2022_12_12__1.util.Ut; import lombok.extern.slf4j.Slf4j; import org.apache.catalina.connector.ClientAbortException; import org.springframework.stereotype.Component; import org.springframework.web.servlet.mvc.method.annotation.SseEmitter; import java.io.IOException; import java.util.List; import java.util.Map; import java.util.concurrent.CopyOnWriteArrayList; @Component @Slf4j public class SseEmitters { private final List emitters = new CopyOnWriteArrayList<>(); public SseEmitter add(SseEmitter emitter) { this.emitters.add(emitter); emitter.onCompletion(() -> { this.emitters.remove(emitter); }); emitter.onTimeout(() -> { emitter.complete(); }); return emitter; } public void noti(String eventName) { noti(eventName, Ut.mapOf()); } public void noti(String eventName, Map data) { emitters.forEach(emitter -> { try { emitter.send( SseEmitter.event() .name(eventName) .data(data) ); } catch (ClientAbortException e) { } catch (IOException e) { throw new RuntimeException(e); } }); } } ``` ## SseController.java ```java package com.ll.exam.app_2022_12_12__1.bounded_context.sse.adapter.in.http; import com.ll.exam.app_2022_12_12__1.base.SseEmitters; import lombok.RequiredArgsConstructor; import org.springframework.http.MediaType; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.mvc.method.annotation.SseEmitter; import java.io.IOException; @Controller @RequestMapping("/sse") @RequiredArgsConstructor public class SseController { private final SseEmitters sseEmitters; @GetMapping(value = "/connect", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public ResponseEntity connect() { SseEmitter emitter = new SseEmitter(); sseEmitters.add(emitter); try { emitter.send(SseEmitter.event() .name("connect") .data("connected!")); } catch (IOException e) { throw new RuntimeException(e); } return ResponseEntity.ok(emitter); } } ```