[동물전쟁] Socket에 Token받아오기

 

Socket에 Token을 받아와서 nickname으로 대화하는 채팅서비스를 만들고자 한다.

 

 

font-server 흐름도, 전체적인 흐름

 

Auth/User Project

AuthService

login하면 Token 생성

package com.example.aniamlwaruser.service;

import ...

@Service
@RequiredArgsConstructor
public class AuthService {

    private final PasswordEncoder passwordEncoder;
    private final JwtService jwtService;
    private final UserRepository userRepository;
    @Transactional
    public void signUp(SignupRequest request) {
        User user = User.builder()
                .id(request.getId())
                .nickName(request.getNickName())
                .profileImage(request.getProfileImage())
                .password(passwordEncoder.encode(request.getPassword()))
                .species(request.getSpecies())
                .build();
        userRepository.save(user);
    }


    // 로그인시 액세스토큰과 리프레쉬토큰 생성
    public LoginResponse login(LoginRequest request) {
        Optional<User> optionalUser = userRepository.findByid(request.getId());
        User user = optionalUser.orElseThrow(
                () -> new UserNotFoundException("User not found"));

        if (!passwordEncoder.matches(request.getPassword(), user.getPassword())) {
            throw new InvalidPasswordException("Invalid password");
        }

        String accessToken = jwtService.makeAccessToken(user);
        String refreshTokenString = jwtService.makeRefreshToken(user);

        // 리프레시 토큰 저장
        RefreshToken refreshToken = new RefreshToken();
        refreshToken.setId((user.getId()));
        refreshToken.setToken(refreshTokenString);
        jwtService.saveRefreshToken(user, refreshTokenString);

        return new LoginResponse(accessToken, refreshTokenString);
    }

}

AuthController

package com.example.aniamlwaruser.controller;

import ...

@RequiredArgsConstructor
@RestController
@RequestMapping("/api/v1/auth")
public class AuthController {

    private final JwtService jwtService;
    private final AuthService authService;

    @PostMapping("/login")
    public LoginResponse login(@RequestBody LoginRequest loginRequest){
        return authService.login(loginRequest);
    }

    @PostMapping("/signup")
    public void signup(@RequestBody SignupRequest signupRequest){
        authService.signUp(signupRequest);
    }

    @GetMapping("/me")
    public TokenInfo me(@AuthenticationPrincipal TokenInfo tokenInfo){
        return tokenInfo;
    }

    @PostMapping("/newAccessToken")
    public ResponseEntity<?> newAccessToken(@RequestBody String refreshToken) {
        String newAccessToken = jwtService.generateNewAccessToken(refreshToken);
        return ResponseEntity.ok().body(newAccessToken);
    }
}

---

Chatting Project

app.js

function parseToken() {
    const url = 'http://localhost:8080/api/v1/user/me';
//    아직 로그인화면이 없기 때문에 Token을 직접 넣어줌..
    const token = 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJuaWNrTmFtZSI6Imdvb2Rib3kiLCJpZCI6Imp1bmtpIiwic3ViIjoianVua2kiLCJleHAiOjE2OTc3ODk1MzR9.xbClRoOdXXEeI8k2AfbpUE2jsaLX_zT6JUdJ1WD-e3k';

//	spring boot 프로젝트에 함께 화면을 만들어서 우선 npm(axios 사용X)을 설치하지 않고 추후
//	팀원과 화면 만들 때, 다시 axios로 만들 예정..
    fetch(url, {
        method: 'GET', // GET요청을 서버로 보냄..서버 UserController의 @GetMapping("me")로 가자..
        // 아래 사진에 있음
        headers: {
            'Authorization': token,
            'Content-Type': 'application/json',
        }
    })
    // 서버에서 받은 값을 .then으로 받아옴..
        .then(response => response.json())
        .then(data => {  // 'GET'에서 받은 값 넣기..data="콜백함수"라고도 부름..
            console.log('서버 응답:', data);
            id = data.id;
            nickName = data.nickName;
        })
        .catch(error => {
            console.error('에러 발생:', error);
        });
}

UserController

화면 @GetMapping("/me")에서 받았던 값을 서버로 받아옴..

package com.example.animalwarchatting.controller;

import com.example.animalwarchatting.config.JwtService;
import com.example.animalwarchatting.config.TokenInfo;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api/v1/user")
@RequiredArgsConstructor
public class UserController {
    private final JwtService jwtService;

    @GetMapping("/me")
    public TokenInfo me(@RequestHeader("Authorization") String accessToken) {
        return jwtService.parseAccessToken(accessToken.replace("Bearer ", ""));
    } // 여기서 parse한 값을 화면으로 보내준다..app.js의 .then 여기로 간다..
}

화면에서 받은 token을 parse하는 흐름(front-server 흐름)

 

 

🟢🟡🔴http와 socket의 연결방식의 차이

✔ HTTP (Hypertext Transfer Protocol)

HTTP는 클라이언트와 서버 간의 요청 및 응답 기반의 연결을 사용합니다. 클라이언트가 서버에 요청을 보내면 서버는 응답을 제공하고 연결을 끊는 형태로 동작합니다. 이는 요청/응답 모델을 따르며 상태를 유지하지 않습니다.

✔  소켓 (Socket)

소켓은 TCP/IP 프로토콜을 기반으로 동작하며, 클라이언트와 서버 간에 지속적인 연결을 설정하고 양방향 통신을 지원합니다. 소켓을 통해 언제든지 데이터를 전송하고 수신할 수 있으며 상태를 유지합니다.

 

http와 socket의 차이

 

 

 

개선사항

현재는 채팅화면을 확인하기 위해 테스트용 화면이다.

팀원들이 만든 로그인, 메인 페이지를 참고하여 화면을 다시 만들 예정이다.

 

 

 

Git 링크

https://github.com/AnimalWarProject/AnimalWar-chatting