Project/Chats (8) 썸네일형 리스트형 Chat Project (10) - STOMP Header, JWT Token 간단하게 구현하는 채팅은 이번이 마지막이 될 것 같습니다. 앞으로 더 고도화를 시킬 예정이 아니라면 포스팅이 없긴 하겠지만 새로 시작하는 프로젝트에서 WebSocket을 이용한 1:1, N:M 채팅 그리고 WebRTC를 이용한 음성 및 화상 구현 등을 진행 할 예정입니다. 고도화 된 내용을 보고 싶으시면 Nuwa Project에 업로드 되는 내용을 확인 해주시면 좋을 것 같습니다. STOMP Header에 JWT 토큰을 넣어야 되겠다고 생각이 들었습니다. JWT 토큰을 사용하는데 채팅방에 입장을 할 땐 API로 토큰 값을 확인합니다. 그런데 구독을 하거나 메세지를 보낼 때는 따로 토큰 값을 판별하지 않고 요청을 하도록 되어 있습니다. 여기서 토큰 값이 올바르게 갱신이 되지 않거나 만료가 된 상태로 채팅이.. Chats 프로젝트 (9) - STOMP, MongoDB 이번엔 STOMP를 활용해서 여러 개의 채팅방을 만들어서 관리를 해보도록 하겠습니다. STOMP STOMP (Simple Text Oriented Messaging Protocol)은 메세징 전송을 효율적으로 하기 위해 탄생한 프로토콜이고, 기본적으로 pub / sub 구조로 되어있어 메세지를 전송하고 메세지를 받아 처리하는 부분이 확실히 정해져 있기 때문에 개발자 입장에서 명확하게 인지하고 개발할 수 있는 이점이 있다. 한 줄로 정의하자면, STOMP 프로토콜은 WebSocket 위에서 동작하는 프로토콜로써 클라이언트와 서버가 전송할 메세지의 유형, 형식, 내용들을 정의하는 매커니즘이다. 또한 STOMP를 이용하면 메세지의 헤더에 값을 줄 수 있어 헤더 값을 기반으로 통신 시 인증 처리를 구현하는 것도.. Chats 프로젝트 (8) - WebSocket 웹소켓에 대해 구현을 해보려고 합니다. WebSocket 웹소켓을 사용해서 프로젝트를 진행하려고 합니다. 처음 사용을 해보고 주로 실시간을 위해 사용을 한다고 알고 있습니다. (채팅, 주식 등) 그래서 정리를 한번하고 구현에 들어가려고 합니다. H classruntime.tistory.com 스프링부트에서 웹소켓을 사용하기 위해서 Dependency를 추가합니다. build.gradle // WebSocket implementation 'org.springframework.boot:spring-boot-starter-websocket' 그리고 웹소켓 연결을 위한 config 파일을 생성을 합니다. WebSocketConfig.java @Configuration @EnableWebSocket public .. Chats 프로젝트 (7) - OAuth2.0, Login 로그인 화면을 메인화면으로 변경하고 로그인 버튼에 API 연동을 진행 해보겠습니다. 로그인 화면을 메인으로 진행하는건 index.html 파일을 해당 로그인에 사용하던 페이지로 변경하면 됩니다. login.js document.querySelector('.login-form').addEventListener('submit', function(event) { event.preventDefault(); // 폼의 기본 제출 동작 방지 const username = document.getElementById('username').value; const password = document.getElementById('password').value; const loginData = { email: username.. Chats 프로젝트 (6) - JWT, Login, Redis 저번엔 서비스까지 작성을 하고 컨트롤러를 작성하지 않았는데 이번엔 컨트롤러를 작성하고 테스트까지 진행해보려고 합니다. 이후에 AccessToken과 RefreshToken을 Redis에 저장하고 관리하는 부분에 대해서도 작성하려고 합니다. LoginController.java @Slf4j @RestController @RequiredArgsConstructor public class LoginController { private final LoginService loginService; private final CommonService commonService; @PostMapping("/login") @ResponseStatus(HttpStatus.CREATED) public ResponseEntity.. Chats 프로젝트 (5) - Spring Security, Login 회원 가입만 구현되서 로그인을 구현을 하던 도중 이제 곧 시작하는 프로젝트에서 채팅에 관련된 프로젝트를 진행한다고 얘기가 나왔습니다. 웹소켓을 사용하여 프로젝트를 진행을 해본 적이 없어서 급하게 노선을 변경하여 채팅을 할 수 있는 프로젝트를 구현하기로 했습니다. 일단 구현을 진행하기에 앞서 채팅에는 유저의 정보에 많은 값이 필요하지 않다고 생각하고 주소도 필요 없다고 생각이 듭니다. 그래서 ERD 를 먼저 변경을 해보도록 하겠습니다. 전화번호도 필요 없다고 생각하지만 기존에 회원 가입에서 구현을 해둔 부분이여서 그대로 냅두고 주소만 삭제를 해주겠습니다. 이런 상태로 일단 화면을 먼저 구성을 하고 회원가입 및 로그인까지 구현을 하게 하고 로그인을 구현을 해주도록 하겠습니다. Redis를 사용하여 토큰을 관.. Chats 프로젝트 (4) - Spring Security, Signup 이번엔 먼저 전화번호 길이 제한을 진행하고 회원 가입 버튼을 통해 회원 가입 API 연동을 진행하도록 하겠습니다. 전화번호 입력 필드를 다음과 같이 수정을 합니다. 그리고 filter.js를 추가해줍니다. filter.js document.getElementById('phone').addEventListener('input', function (e) { this.value = this.value.replace(/[^0-9]/g, ''); }); 이렇게 하면 필드에 숫자만 입력이 가능하도록 만들졌습니다. 그러면 이제 각 필드의 값을 받아 회원가입 버튼을 누르면 API를 불러오게 해보겠습니다. fetch를 사용하여 API 통신을 하도록 하겠습니다. signup.html 회원가입 중복 확인 중복 확인 대문자 .. Chats 프로젝트 (2) - Signup 이번에는 회원가입 페이지와 회원가입 API를 만들어보도록 하겠습니다. 먼저 회원가입 페이지를 만든 후 스프링 시큐리티와 로그 설정을 한 후에 API를 만들어보겠습니다. signup.html 회원가입 중복 확인 중복 확인 대문자 포함 숫자 포함 특수문자 포함 8~20자 이내 우편번호 찾기 회원가입 signupPage.css body { font-family: 'Arial', sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .signup-container { background: white; padding: .. 이전 1 다음
