최종프로젝트
WebSocket
우리는 배달 프로젝트를 하면서 사용자가 주문을 완료하면 사장님의 페이지에 실시간으로 토스트로 알람이 뜨도록 구현 하기로 하여서 웹소켓을 사용하게 되었다
아직 실제 화면에서 사용한 것은 아니다
지금 만들어둔 내용을 모든 화면에 적용하고 조금씩만 바꾸면 될거같다!
구현 방식
이걸 써놔야 겠어 내가 자료를 찾을 때 이게 달라서 찾기 힘들더라구
스프링부트
gradle
thymleaf
websocket
intelliJ
채팅방이 아니라 1:1 메세지 전송
1:1 전송방식이라 힘들었다 ㅠㅠ
또 적을게 있나
gradle
implementation 'org.springframework.boot:spring-boot-starter-websocket'나는 처음에 프로젝트를 만들 때 추가를 해뒀다
WebSocketConfig
-
@Configuration
- 어노테이션 or 빈 등록
-
@EnableWebSocket
- 웹소켓 활성화?
-
.addHandler()
- 웹 소켓 핸들러를 지정해주는 메서드
- 처음 자리에 만든 웹소켓 핸들러를 넣어준다.
- paths 부분에 웹소켓을 요청할 때 paths부분을 제일 마지막에 넣어서 만들면 된다
- 내 생각이지만 일치하게만 만들면 마음대로 바꿔도 될거같다
-
.setAllowedOrigins()
- 위 핸들러에 모든 주소를 허용한다(?) 라는 뜻으로 사용 된다
-
.addInterceptors()
- 이게 중요하다 웹소켓과 HttpSession을 같이 사용하게 해주는 메서드
- 이거 찾느라 엄청 힘들었다
- 이 메서드를 지정해 줘야 세션에 있는 값을 웹 소켓에서 사용이 가능하다
-
HttpSessionHandshakeInterceptor
- 이 클래스를 웹소켓 핸들러에 추가를 해줘야 웹소켓에서 HttpSession을 사용이 가능하다
WebsocketHandler
class
-
@Component
- 빈 등록...?
-
@Log4j2
- 사실 이거 사용법을 잘 모른다 따라 한거긴한데...
- 그냥 println을 사용한다..ㅎㅎ
-
TextWebSocketHandler를 extends(상속)해준다
연결하기
나는 사용자를 구별하기 위해서 맵을 사용해서 저장을 한다
getUserId메서드를 만들어서 WebSocketSession을 받는다
- .getAttributes()
- 메서드를 사용하면 웹소켓과 HttpSession을 섞어서 맵으로 저장을 해준다
- (String) httpSession.get("세션 저장 이름")
- 세션에 있는 이름을 가져온다
가져온 세션 아이디를 키값으로 사용해서 세션맵에 저장해서 나중에 사용한다
메세지 보내기
여기서 WebSession은 메세지를 보내는 사람의 Session이다
message를 가져와서 , 단위로 구분해서 사용하는 방법을 쓴다
제일 처음 타깃을 받아오고 두번째로 타입을 받아온다
일단 두가지 다 만들어 두긴했다 아직은 1번만 사용해봤다
WebSocketSession을 만들어서 타깃용 세션을 만들어서 타깃의 이메일을 입력해서 타깃의 세션을 가져온다
타입별로 타깃에게 메세지를 전송한다
아 2번타입 메세지에 userId가 아니라 target을 써야겠구낭
순서대로 설명을 하면
- 메세지를 보낸 유저를 가져온다
- 메세지를 , 단위로 분리해서 배열에 담는다
- 배열에 담은 메세지에서 타겟을 가져온다
- 배열에서 타입을 가져온다
- 가져온 타겟으로 타겟의 세션을 불러온다
- 현재 타겟이 접속 중이라면 메서드를 실행한다
- 메세지를 보내는 사람의 id를 가져와서 메세지를 입력한다
- 타겟에게 메세지를 보낸다
연결해제, 오류 출력
CloseStatus 클래스를 사용해서 사용자가 접속을 종료하면 사용자 맵에서 지운다
오류가 있으면 오류를 출력한다
javascript
인덱스에서 테스트용으로 만든 자바스크립트이다
이부분도 스프링과 스프링 부트가 달라서 좀 찾았다
socket을 전역변수로 지정해서 만들어준다
socket.onopen : 서버연결
socket.onmessage : 메세지를 받아주는 함수
socket.send : 메세지를 보내는 함수
우리는 메세지를 가져와서 토스트로 출력하는 방법을 사용한다
토스트 출력 화면
이거 하려고 자료만 2일을 찾았네 최고의 고비였다....
멋있네요 （￣︶￣）↗