목록사이드 프로젝트/중고마켓 (5)
개발놀이터
잘 되다가 STOMP 프로토콜 통신이 안되는 이슈가 발생했습니다... 구글링도 하루종일 해보고 스택오버플로우에도 질문을 올려봤지만 해결하지 못했습니다. 그래도 영상으로 남겨놨으니 한번 구현해본것으로 만족하도록 하겠습니다. 언젠가 한번 소켓통신으로 채팅을 구현하는게 자그만 목표였는데 이뤄내서 만족스럽습니다. 사실 정말 아쉬운데... 구현해본것으로 마무리짓도록 하겠습니다. 다음 캡스톤은 정해놨습니다. 다음 캡스톤은 로그인 패턴 + 스프링 배치 공부로 개발자 커뮤니티 사이트를 하도록 하겠습니다.
실시간 알람은 원래 하려고 한게 아닌데 주변인들한테 지금 내가 채팅프로그램을 만들고있는데 실시간 알람이 있으면 좋겠냐 없으면 좋겠냐 물어봤을 때 전부 다 있어야 할거같다고 해서 만들었습니다. 처음에 계획은 axios를 이용해 /chat/get_room_id 라는 url로 접근해 현재 내가 갖고있는 채팅방의 roomId를 자바스크립트 배열에 저장하고 배열에 있는 값을 꺼내서 for문을 돌려 모두 subscribe 연결을 하려고 했습니다. 근데 자바스크립트의 비동기 문제 때문에 값을 저장하기 전에 subscribe로 연결되어버려서 자바스크립트 배열에 값이 텅텅 비어있는 상황이 연출되었습니다. 그래서 async await 를 이용해 순서를 바로잡는데에는 성공했지만... 웹 소켓 connect가 안되는 현상이 ..
메세지를 보내기 전에 jwt 인증토큰을 검증해서 검증된 사용자만 채팅을 칠 수 있게 만들었습니다. jwt 인증토큰을 만들고 검증하는 코드는 다 만들었는데 jwt 인증토큰을 헤더에 어떻게 담는지 몰라서 한참을 헤맸습니다. 헤더에서 jwt 인증토큰을 꺼내와야 한다는데 헤더에 어떻게 하는건지 원... 그래서 그냥 컨트롤러에서 response 객체를 받아와서 setHeader로 집어넣었습니다. (이렇게 하는거 맞나?) https://kukekyakya.tistory.com/12 스프링부트 웹소켓 stomp를 이용한 실시간 알림 구현 스프링부트, stomp를 이용해서 실시간 알림을 받을 수 있도록 해보겠습니다. 구현할 내용은 다음과 같습니다. 1. 사용자 1번이 접속해서 웹소켓이 열린다. 2. 사용자 2번이 ..
우선 가장 중요한 채팅 기능을 만들어봤습니다. 웹 소캣 중에서도 SocketJS와 STOMP 프로토콜을 이용해 만들었습니다. 코드는 구글에서 검색해서 복붙했지만 디비에 입력하기 위해서 코드를 많이 수정하긴 했습니다. 따라 만드시려면 SocketJS와 STOMP프로토콜의 대략적인 이해는 필요하다고 생각합니다.(완전히 다 이해하진 않더라도 어떻게 굴러가는지는 이해해야 한다는 소리입니다.) 그리고 중요했던게 채팅 치는 순간 나와 상대방을 구별하는 방법이 필요했습니다. 카톡만 하더라도 나는 노란색 상대방은 흰색 이렇게 정해져있기 때문에 그냥 일자로 쭉 뽑을게 아니었기 때문에 구별해야했습니다. 문제는 웹 소켓에 연결해서 하는 채팅은 자바스크립트로 구별이 가능했지만 이미 디비에 저장되어있는 채팅은 어떻게 구별할지 ..
교수님께서 1학기만 캡스톤디자인 하는 것 처럼 말씀하셔서 2학기는 없을 줄 알았는데 2학기도 있었네요... 좀 난감하긴 하지만 한번 해보겠습니다. 1. 왜 중고거래 사이트인지? 생각보다 아주 간단한 이유입니다. 바로 채팅 기능에 대해서 공부해보고 싶었기 때문이죠. 채팅 기능을 구현하려면 웹 소캣을 써야한다는 사실은 알고 있었습니다. 하지만, 웹 소캣을 한번도 안써봤고 한번쯤 써보고싶어서 선택했습니다. 또한, docker에 대해서도 공부해보고 싶어서 겸사겸사 선택했습니다.(docker와 중고거래 사이트를 선택한 이유는 전혀 관계없습니다.) 그럼 카톡은 왜 아니냐. 라고 하신다면 카톡처럼 채팅기능만 들어가있는 (물론 채팅말고도 엄청나게 많은걸 지원한다는걸 알고있습니다. 하지만, 주 기능이 채팅이라 저렇게 말..