# 관련링크 - [인텔리제이 세팅 - slog.gg/p/13923](https://slog.gg/p/13923) - [재생목록](https://www.youtube.com/playlist?list=PLMzNIYZSiq7YN2nVwjIvFlFxF7ewH_LW-) # 1강 : 프로젝트 세팅 - [영상 - 24 12 30, p 13919, 1강, 스프링부트 프로젝트 세팅](https://youtu.be/eK8t_duGSxU) - [Spring Initializr](https://start.spring.io/) - [Spring Initializr - 셋업 버전](https://start.spring.io/#!type=gradle-project&language=java&platformVersion=3.4.1&packaging=jar&jvmVersion=21&groupId=com.ll&artifactId=chat2412&name=chat2412&description=Demo%20project%20for%20Spring%20Boot&packageName=com.ll.chat2412&dependencies=web,lombok,devtools) - [리포지터리](https://github.com/sik2/chat_app_1st_2024_12) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/???) # 2강 : 코드펜 세팅법 - [영상 - 24 12 30, p 13919, 2강, 코드펜 세팅법](https://youtu.be/6cu6v-wPl7M) - [코드펜 - https://codepen.io/pen](https://codepen.io/pen) - [코드펜 가입 - https://codepen.io/accounts/signup/user/free](https://codepen.io/accounts/signup/user/free) - [코드펜 에디터세팅 - https://codepen.io/settings/editor](https://codepen.io/settings/editor) # 3강 : 코드펜으로 작성한 프론트 코드 설명 - [영상 - 24 12 30, p 13919, 3강, 코드펜으로 작성한 프론트 코드 설명](https://youtu.be/YLxxweF_LbA) - [코드펜 - 프론트코드](https://codepen.io/sik2/pen/ByBwRJr?editors=1010) # 4강 : 폴링 VS SSE - [영상 - 24 12 30, p 13919, 4강, 폴링, SSE 개념](https://youtu.be/IClq7VEPK74) - 폴링, SSE는 http 프로토콜로 실시간을 흉내내는 방법 - HTTP 프로토콜 특징 - 무상태성(stateless) : 서버가 클라이언트의 상태를 유지하지 않는다. - 비연결성(connectionless) : 서버와 클라이언트가 한번 연결되면 끊어진다. ## 폴링 통신방식 $$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 핸드쉐이크) $$ # 5강 : 채팅앱 구조 - [영상 - 24 12 30, p 13919, 5강, 메세지들을 그리는 구조(폴링방식)](https://youtu.be/IClq7VEPK74) ## 메세지들을 그리는 구조(폴링방식) - /chat/messages 전체 채팅 메세지 조회 - ?fromUuid=D, 메세지 D 이후로 발생한 메세지들 - ?fromUuid=F, 메세지 F 이후로 발생한 메세지들 $$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"} 클라이언트 -> 클라이언트 : 채팅방 퇴장 $$ # 6강 : POST /chat/writeMessage - [영상 - 24 12 30, p 13919, 6강, 1부, POST /chat/writeMessage](https://youtu.be/44TAJhoNvWw) - [영상 - 24 12 30, p 13919, 6강 2부, 포트번호 바꾸기, 포트번호 점유 프로세스 종료 방법](https://youtu.be/77LMScrInR0) - [포스트맨 설치, 가입 후 사용하세요](https://www.postman.com/downloads/) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/24748ef) ```java import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.ResponseBody; @Controller public class ChatController { @GetMapping("/chat/writeMessage") @ResponseBody public String getMessage() { return "응답입니다."; } @PostMapping("/chat/writeMessage") @ResponseBody public String writeMessage() { return "응답입니다."; } } ``` # 7강 : ChatMessage 클래스 - [24 12 30, p 13919, 7강, ChatMessage 클래스](https://youtu.be/FzWMI3MjCRE) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/13099d0) - ChatMessage | 필드명 | 타입 | 설명 | |--------|------|------| | id | long | 메시지 고유 식별자 | | authorName | String | 작성자 이름 | | content | String | 메시지 내용 | | createDate | LocalDateTime | 메시지 생성 일시 | - ChatMessage.java ```java @AllArgsConstructor @Getter public class ChatMessage { private long id; private String authorName; private String content; private LocalDateTime createDate; } ``` - RsData ```java import lombok.AllArgsConstructor; import lombok.Getter; @AllArgsConstructor @Getter public class RsData { private String resultCode; private String msg; private T data; } ``` # 8강 : 메세지를 리스트에 저장 - [24 12 30, p 13919, 8강 1부, 메세지를 리스트에 저장](https://youtu.be/eFpLKW4Iyz0) - [24 12 30, p 13919, 8강 2부, id 자동 생성, 응답객체 작업](https://youtu.be/t3nqQkb-y0w) - [GIT 1부](https://github.com/sik2/chat_app_1st_2024_12/commit/8c1cec5) - [GIT 2부](https://github.com/sik2/chat_app_1st_2024_12/commit/3ea67bb) # 9강 : GET /chat/messages 채팅 메세지들 가져오기 - [영상 - 24 12 30, p 13919, 9강, GET /chat/messages](https://youtu.be/MbcTZaw28G0) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/690e335) # 10강 : 메세지 작성시에 작성자 이름과 메세지 본문을 JSON 형태로 전달 - [영상 - 24 12 30, p 13919, 10강, 메세지 작성시에 작성자 이름과 메세지 본문을 JSON 형태로 전달](https://youtu.be/NQ3BQ_ZzQZg) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/453f5c8) # 11강 : WriteMessageResponse, MessagesResponse 클래스 수정 - [영상 - 24 12 30, p 13919, 11강, WriteMessageResponse, MessagesResponse 클래스 수정](https://youtu.be/hub06jX3CgE) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/f88eb0a) # 12강 : messages 필터링, GET /chat/messages?fromId=번호 - [영상 - 24 12 30, p 13919, 12강, messages 필터링, GET /chat/messages?fromId=번호](https://youtu.be/_lawz8jDtrI) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/d7e1bf7) # 13강 : 자바 record 와 class 의 차이점 - [영상 - 24 12 30, p 13919, 13강, 자바 record 와 class 의 차이점](https://youtu.be/Hm742FXM1VA) ```java public record MessagesRequest(Long fromId, Long toId) { } @AllArgsConstructor @Getter public class MessagesRequest { private final Long fromId; private final Long toId; } ``` # 14강 : 스트림과 메세지 필터링 - [실습 - mycompiler](https://www.mycompiler.io/ko/new/java) - [영상 - 24 12 30, p 13919, 14강, 기존 반복문 버전 스트림 버전으로 수정](https://youtu.be/FdwmF_spRY0) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/7f5adbc) ## 번호가 1번인 사람의 index 구하기 ```java // Main.java import java.util.ArrayList; import java.util.List; import java.util.stream.IntStream; public class Main { public static void main(String[] args) { List people = new ArrayList<>(); people.add(new Person(2, 22, "홍길순")); people.add(new Person(1, 23, "홍길동")); people.add(new Person(50, 50, "임꺽정")); int foundIndex = -1; for (int i = 0; i < people.size(); i++) { if (people.get(i).id == 1) { foundIndex = i; break; } } //System.out.printf("foundIndex : %d\n", foundIndex); int index = IntStream.range(0, people.size()) .filter(i -> people.get(i).id == 1) .findFirst() .orElse(-1); // 번호(id)가 2번인 사람의 순서(index)는? : } } class Person { int id; int age; String name; public Person(int id, int age, String name) { this.id = id; this.age = age; this.name = name; } } ``` ## req.fromId 의 값이 3이라고 가정할 때, 채팅메세지의 번호가 3번인 객체가 messages 라는 배열에서 몇번째 인덱스에 있는지 조사 ### v1 : 스트림 버전, 반복문이 숨어있어서 오타날 확률이 적다. ```java int index = IntStream.range(0, messages.size()) .filter(i -> chatMessages.get(i).getId() == req.fromId) // 아래의 findFirst 때문에 이 필터함수에서 하나라도 결과값이 true 인 index 가 발견되면 그 즉시 findFirst 가 실행되고 스트림이 끝난다. .findFirst() .orElse(-1); // 모든 스트림 원소가 위의 filter 를 통과하지 못할때만 실행된다. ``` ### v2 : for 문 버전, 반복문을 직접 돌려야 하니, 버그발생의 가능성이 스트림보다 크다. ```java int index = -1; for ( int i = 0; i < messages.size(); i++ ) { if ( messages.get(i).getId() == req.fromId ) { index = i; break; } } ``` # 15강 : 타임리프 도입 채팅방, 채팅메세지 프론트 작업 - [영상 - 24 12 30, p 13919, 15강 1부, 타임리프 도입 채팅방, 채팅메세지 프론트 작업](https://youtu.be/JUfRXnrHC10) - [영상 - 24 12 30, p 13919, 15강 2부, 캐시 무효화 처리, 오토 리로드 활성화](https://youtu.be/fp-Qu1VaqNc) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/5fb99a4) - [LiveReload 크롬 확장프로그램](https://chromewebstore.google.com/detail/livereload++/ciehpookapcdlakedibajeccomagbfab?hl=ko) - build.gradle ```gradle implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' ``` - application.yml ```yml server: port: 8020 spring: thymeleaf: cache: false prefix: file:src/main/resources/templates/ devtools: livereload: enabled: true restart: enabled: true ``` - room.html ```html

``` # 16강 : 채팅 메세지들을 가져오기, 수동방식 - [영상 - 24 12 30, p 13919, 16강, 채팅 메세지들을 가져오기, 수동방식](https://youtu.be/o_1KGMkW738) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/a2bc461) ```js // (...) // 채팅 메세지 작성 끝 // 채팅 메세지들 읽기 시작 // 현재 클라이언트가 받은 메세지 번호를 입력해야 합니다. // 그래야 메세지 요청시에 필요한 부분만 가져오게 됩니다. let Chat__lastLoadedId = 0; function Chat__loadMore() { fetchGet("/chat/messages", { fromId: Chat__lastLoadedId }) .then(body => { Chat__drawMessages(body.data.chatMessages); }); } const Chat__elMessageUl = document.querySelector('.chat__message-ul'); function Chat__drawMessages(messages) { if (messages.length == 0) return; // 메세지를 그리기 전에 Chat__lastLoadedUuid 변수를 갱신합니다. Chat__lastLoadedId = messages[messages.length - 1].id; messages.forEach((message) => { Chat__elMessageUl .insertAdjacentHTML( "afterBegin", `

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

` ); }); } // 채팅 메시지들 읽기 끝 ``` # 17강 : 채팅 메세지들을 가져오기, 0.5초 마다 요청, 자동방식 - [영상 - 24 12 30, p 13919, 17강, 채팅 메세지들을 가져오기, 0.5초 마다 요청, 자동방식](https://youtu.be/9gCpYRlp6hI) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/da76af4) ```js // if (messages.length == 0) return; // // 메세지를 그리기 전에 Chat__lastLoadedUuid 변수를 갱신합니다. // Chat__lastLoadedId = messages[messages.length - 1].id; if (messages.length == 0) { // 메세지를 그리기 전에 Chat__lastLoadedUuid 변수를 갱신합니다. Chat__lastLoadedId = messages[messages.length - 1].id; } ``` # 18강 : SSE 클라이언트 작업 - [영상 - 24 12 31, p 13919, 18강, SSE 클라이언트 작업](https://youtu.be/nYBSAO_GpQ4) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/bafe952) - [Can I use EventSource](https://caniuse.com/?search=EventSource) - 폴링 이벤트 제거 후 EventSource 추가 ```js // SSE 연결 // SSE는 단방향 무전기 // 방향 : 서버 -> 클라이언트 const sse = new EventSource("/sse/connect"); // 서버로부터 "chat__messageAdded" 라는 명령이 내려오면 Chat__loadMore 함수를 실행 sse.addEventListener('chat__messageAdded', e => { Chat__loadMore(); }); ``` # 19강 : SSE 백엔드 작업 - [영상 - 24 12 31, p 13919, 19강, SSE 백엔드 작업](https://youtu.be/9b1zz73MvKg) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/64ee101) - SseController ```java 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 { // SSE 연결들을 관리하는 컴포넌트 private final SseEmitters sseEmitters; // 클라이언트의 SSE 연결 요청을 처리하는 엔드포인트 // /sse/connect로 GET 요청이 오면 SSE 스트림을 생성 @GetMapping(value = "/connect", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public ResponseEntity connect() { // 새로운 SSE 연결 생성 (기본 타임아웃 30초) SseEmitter emitter = new SseEmitter(); // 생성된 emitter를 컬렉션에 추가하여 관리 sseEmitters.add(emitter); try { // 연결된 클라이언트에게 초기 연결 성공 메시지 전송 emitter.send(SseEmitter.event() .name("connect") // 이벤트 이름을 "connect"로 지정 .data("connected!")); // 전송할 데이터 } catch (IOException e) { throw new RuntimeException(e); } return ResponseEntity.ok(emitter); } } ``` - SseEmitters ```java 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 { // Thread-safe한 List를 사용하여 다중 클라이언트의 SSE 연결들을 관리 private final List emitters = new CopyOnWriteArrayList<>(); // 새로운 SSE 연결을 추가하고 관련 콜백을 설정하는 메서드 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()); // 빈 Map으로 알림 전송 } // 모든 연결된 클라이언트들에게 이벤트를 전송하는 메서드 public void noti(String eventName, Map data) { // 모든 emitter에 대해 반복하며 이벤트 전송 emitters.forEach(emitter -> { try { emitter.send( SseEmitter.event() .name(eventName) // 이벤트 이름 설정 .data(data) // 전송할 데이터 설정 ); } catch (ClientAbortException e) { // 클라이언트가 연결을 강제로 종료한 경우 무시 } catch (IOException e) { throw new RuntimeException(e); } }); } } ``` - Ut ```java import java.util.LinkedHashMap; import java.util.Map; public class Ut { // 키-값 쌍을 가변 인자로 받아 Map을 생성하는 유틸리티 메서드 // 사용 예: mapOf("name", "홍길동", "age", 20) public static Map mapOf(Object... args) { Map map = new LinkedHashMap<>(); int size = args.length / 2; // 인자를 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; } } ``` # 20강 : JPA의 OSIV와 SSE는 궁합이 좋지 않습니다. - [영상 - 24 12 30, p 13919, 20강, JPA의 OSIV와 SSE는 궁합이 좋지 않습니다.](https://youtu.be/d4tSv9FTj7o) ## OSIV - 영속성 컨텍스트를 뷰 렌더링이 끝날 때까지 열어두는 기능 - 트랜잭션이 끝나도 세션을 유지하여 지연 로딩을 가능하게 함 ## SSE의 특징 - 서버와 클라이언트 간의 장기 연결 유지 - 연결이 계속 열려있는 상태로 유지됨 - 실시간으로 데이터를 클라이언트에게 푸시 ## 문제점 1. 리소스 낭비 - OSIV가 활성화된 상태에서 SSE 연결이 유지되면 데이터베이스 커넥션도 계속 유지됨 - 많은 클라이언트가 연결될 경우 데이터베이스 커넥션 풀이 빠르게 고갈될 수 있음 2. 성능 저하 - 불필요하게 데이터베이스 커넥션을 오래 점유 - 다른 요청들의 처리가 지연될 수 있음 ## OSIV 끄는 설정 적용 - src/main/resources/application.yml ```yml spring: jpa: open-in-view: false # OSIV 설정 끄기 ``` ## 특정 URL로 접속했을 때에만 OSIV 끄는 설정 적용 - src/main/resources/application.yml ```yml spring: jpa: open-in-view: exclude-patterns: /post/detail, /post/detail2 # OSIV 끄는 특정 URL 패턴 설정 ``` # 21강 - [영상 - 24 12 31, p 13919, 21강,SSE에서 웹소켓 방식 채팅 구현](https://youtu.be/hIW1ELEW0m0) - [GIT](https://github.com/sik2/chat_app_1st_2024_12/commit/f959236 ) ```gradle // 웹소켓, STOMP implementation 'org.springframework.boot:spring-boot-starter-websocket' ``` - src/main/java/com/ll/chat2412/chat/WebSocketConfig.java ```java import org.springframework.context.annotation.Configuration; import org.springframework.messaging.simp.config.MessageBrokerRegistry; import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker; import org.springframework.web.socket.config.annotation.StompEndpointRegistry; import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer; @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/ws").withSockJS(); } @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableSimpleBroker("/topic"); registry.setApplicationDestinationPrefixes("/app"); } } ```

스프링부트 - Polling, SSE 로 구현하는 채팅