[Project] WebSocket 웹 소켓 구현 (실시간 위치 정보)

🔘 프로젝트

[Project] WebSocket 웹 소켓 구현 (실시간 위치 정보)

HYEJU01 2025. 2. 12. 02:43

WebSocket 을 써보자
build gradle 추가
config 설정 구현
Handler 핸들러 구현
클라이언트 연결

WebSocket 을 써보자

프로젝트에서 실시간 위치정보를 공유하는 기능을 개발하기로 했다.

✅ 웹소켓에 접속하면 접속한 유저 리스트를 가져온다.

✅ 사용자 위치가 변경될때마다 소켓으로 위치정보를 보내면, 다른 사용자에게는 해당 사용자의 위치정보를 볼 수 있다.

✅ 이때, 소켓으로 userId 를 보내면 자동으로 사용자 데이터를 불러오고 받아온 위치(위도,경도)도 함께 포함해서 다른 소켓 유저들에게 보낸다.

실시간 위치정보를 구현하기 위해서는 계속해서 위치데이터를 보내는 과정이 필요한데...

이걸 HTTP 로 구현 하기에는 매우 힘들다. HTTP 의 특징 때문인데, 단방향통신인 점 (요청을 해야만 응답을 보낼 수 있음)

요청을 할때마다 새롭게 연결해야하는 등 많은 단점이 있다. 양방향 통신을 구현하기 위해서 풀링이라는 개념이 나오긴 하는데 이건 주기적으로 서버에 요청을 보내는 방법으로 구현한다. 하지만 오버헤드가 너무 심하고, 실시간 성도 낮다.

그래서 우리는 WebSocket 을 쓴다. 웹소켓은 한번 연결하면 계속해서 연결이 유지되며, 양방향 통신(전이중 통신)이 가능하다. 또한 요청이 없더라도 서버에서 클라이언트로 응답을 보낼 수 있고 오버헤드도 적기 때문에 실시간이 필요한 시스템에서는 웹소켓을 쓰게된다 ! 😀

WebSocket 웹 소켓 개념

HTTP클라이언트가 요청(Request) → 서버가 응답(Response)응답 후 연결이 닫힘 (Stateless)새로운 요청마다 다시 연결 필요주로 단방향 통신 (클라이언트 → 서버)데이터를 헤더에 포함시켜서 전달함 폴

hyejux.tistory.com

build gradle 추가

config 설정 구현

웹소켓을 쓰기 위해서는 Config (웹 소켓 설정파일) 과 Handler(소켓 이벤트 처리) 파일을 만들어줘야한다.

config.java

웹 소켓 활성화, 엔드포인트 설정

WebSocketConfigurer 구현

@EnableWebSocket 웹 소켓 활성화 어노테이션

 package com.sanchat.api.config;
 
import lombok.RequiredArgsConstructor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
 
@Configuration // 스프링설정파일
@EnableWebSocket // 소켓 사용
@RequiredArgsConstructor
public class MapWebSocketConfig implements WebSocketConfigurer {
 
    private final MapWebSocketHandler mapWebSocketHandler;
 
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(mapWebSocketHandler, "/tracking") // 요청 허용 경로
                .setAllowedOrigins("*"); // 서버가 달라도 허용 Cors
    }
}

Handler 핸들러 구현

Handler.java

 package com.sanchat.api.config;
 
import ch.qos.logback.core.net.SyslogOutputStream;
import ch.qos.logback.core.net.server.Client;
import com.fasterxml.jackson.databind.util.JSONPObject;
import com.sanchat.api.dto.DogDTO;
import com.sanchat.api.dto.UserDTO;
import com.sanchat.api.dto.UserMDTO;
import com.sanchat.api.service.UserService;
import lombok.Builder;
import org.apache.catalina.User;
import org.apache.tomcat.util.json.JSONParser;
import org.json.JSONException;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.*;
import org.springframework.web.socket.handler.TextWebSocketHandler;
 
import java.io.IOException;
import java.util.*;
import java.util.concurrent.ConcurrentHashMap;
 
 
@Component // bean 으로 등록
public class MapWebSocketHandler extends TextWebSocketHandler {
 
    @Autowired
    UserService userService;
 
    /**
    * 사용자 정보를 저장하는 MAP (접속한 사용자 리스트)
    * userID , UserMDTO 저장
    */
    Map<String, UserMDTO> userList = new HashMap<>();
 
 
    /**
    * 현재 접속한 클라이언트 (WebSocket 세션) 목록 저장
    */
    private static final ConcurrentHashMap<String, WebSocketSession> CLIENTS =
                new ConcurrentHashMap<String, WebSocketSession>();
 
 
    /**
    * 클라이언트가 웹소켓 연결에 성공 시 호출
    */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        CLIENTS.put(session.getId(), session);
 
        // 현재 접속 중인 사용자 목록을 JSON으로 변환
        JSONObject response = new JSONObject();
        response.put("type", "USER_LIST"); // 메시지 타입을 USER_LIST로 설정
 
        List<JSONObject> userArray = new ArrayList<>();
 
        for (UserMDTO user : userList.values()) {
                System.out.println(user.getUserId() + session.getId());
                JSONObject userJson = new JSONObject();
                userJson.put("userId", user.getUserId());
                userJson.put("userName", user.getUserName());
                userJson.put("photo", user.getPhoto());
                userJson.put("userIntro", user.getUserIntro());
                userJson.put("latitude", user.getLatitude());
                userJson.put("longitude", user.getLongitude());
                userJson.put("dogList", user.getDogList());
                userArray.add(userJson);
        }
 
 
        response.put("users", userArray);
 
        // 새로 접속한 사용자에게 현재 접속 중인 사용자 목록 전송
        session.sendMessage(new TextMessage(response.toString()));
 
    }
 
    /**
     * 클라이언트가 메세지를 보낼 때 호출
     * (사용자 위치 저장, 다른 클라이언트에 메세지 전달)
     */
    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
 
 
        String id = session.getId();  //메시지를 보낸 웹소켓 세션 아이디
 
        // 받은 메시지를 JSON 형식으로 변환
        JSONObject jsonObject = new JSONObject(String.valueOf(message.getPayload()));
 
        // 필요한 정보 추출
        String userId = jsonObject.getString("userId");
        String latitude = jsonObject.getString("latitude");
        String longitude = jsonObject.getString("longitude");
        String type = jsonObject.getString("type"); // LOCATION, CLOSE , USER_LIST..
 
        UserDTO userDTO = userService.getUser(userId); // 사용자 정보 조회해오기
 
        // 사용자 위치 정보를 포함하는 UserDTO 객체 생성
        UserMDTO userMDTO = new UserMDTO();
        userMDTO.setUserId(userId);
        userMDTO.setPhoto(userDTO.getPhoto().getPhotoUrl());
        userMDTO.setUserName(userDTO.getUserName());
        userMDTO.setUserIntro(userDTO.getUserIntro());
 
        List<String> dogList = new ArrayList<>();
        for(DogDTO dDto : userDTO.getDogList()){
            dogList.add(dDto.getDogName());
        }
        userMDTO.setDogList(dogList);
 
        // 위도, 경도
        userMDTO.setLatitude(Double.parseDouble(latitude));
        userMDTO.setLongitude(Double.parseDouble(longitude));
 
        // 사용자 정보를 userList(Map) 에 저장
        userList.put(session.getId(), userMDTO);
 
        System.out.println(id +" :: " + userId + " 님의 위치 정보 | " +latitude + " | " +longitude + type );
 
 
        // 메세지 type = "CLOSE" 면 연결 종료, 세션 제거
        switch(type) {
            case "CLOSE" :
 
 
                CLIENTS.remove(session.getId());
                userList.remove(session.getId());
 
 
                break;
            default:
                break;
        }
 
 
        // 현제 접속 중인 모든 클라이언트에게 메시지 전달 (자신은 제외)
        CLIENTS.entrySet().forEach(arg -> {
            if(!arg.getKey().equals(id)) {  // 자신이 아니면 메시지를 전달합니다.
                try {
                    // 위치 정보도 포함하여 전달
                    JSONObject response = new JSONObject();
                    response.put("type", "LOCATION"); // 메시지 타입은 LOCATION
                    response.put("userId", userMDTO.getUserId());
                    response.put("userName", userMDTO.getUserName());
                    response.put("latitude", userMDTO.getLatitude());
                    response.put("longitude", userMDTO.getLongitude());
                    response.put("photo", userMDTO.getPhoto());
                    response.put("dogList", userMDTO.getDogList());
 
                    // 해당 클라이언트에게 메시지 전송
                    arg.getValue().sendMessage(new TextMessage(response.toString()));
 
                } catch (IOException | JSONException e) {
                    e.printStackTrace();
                }
            }
        });
    }
 
    /**
     * WebSocket 전송 중 에러 발생 시 호출됨
     */
    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
 
    }
 
    /**
     * 클라이언트와의 연결이 종료될 때 호출됨
     * - 해당 클라이언트를 CLIENTS 목록에서 제거
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
        CLIENTS.remove(session.getId());
        userList.remove(session.getId());
    }
 
    /**
     * 부분 메시지를 지원할지 여부를 반환 (현재는 false)
     */
    @Override
    public boolean supportsPartialMessages() {
        return false;
    }
 
 
}

TextWebSocketHandler : 텍스트 메시지를 처리하는 웹소켓 핸들러

afterConnectionEstablished() : 클라이언트가 웹소켓에 연결될 때 실행
handleTextMessage() : 클라이언트가 메시지를 보낼 때 실행
afterConnectionClosed() : 클라이언트가 연결을 종료할 때 실행

위 세개의 메소드가 주로 사용된다.

     /**
    * 사용자 정보를 저장하는 MAP (접속한 사용자 리스트)
    * userID , UserMDTO 저장
    */
    Map<String, UserMDTO> userList = new HashMap<>();

Map 을 이용해서 접속한 유저들의 최신 위치데이터를 관리한다. key 는 sesstionId

    /**
    * 클라이언트가 웹소켓 연결에 성공 시 호출
    */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        CLIENTS.put(session.getId(), session); // 클라이언트 세션을 저장
 
        // 현재 접속 중인 사용자 목록을 JSON으로 변환
        JSONObject response = new JSONObject();
        response.put("type", "USER_LIST"); // 메시지 타입을 USER_LIST로 설정
 
        List<JSONObject> userArray = new ArrayList<>();
 
        for (UserMDTO user : userList.values()) {
                System.out.println(user.getUserId() + session.getId());
                JSONObject userJson = new JSONObject();
                userJson.put("userId", user.getUserId());
                userJson.put("userName", user.getUserName());
                userJson.put("photo", user.getPhoto());
                userJson.put("userIntro", user.getUserIntro());
                userJson.put("latitude", user.getLatitude());
                userJson.put("longitude", user.getLongitude());
                userJson.put("dogList", user.getDogList());
                userArray.add(userJson);
        }
 
 
        response.put("users", userArray);
 
        // 새로 접속한 사용자에게 현재 접속 중인 사용자 목록 전송
        session.sendMessage(new TextMessage(response.toString()));
 
    }

클라이언트가 웹 소켓 연결에 성공하면, 소켓에 접속 해 있는 유저 리스트를 JSON 타입으로 변환해서 해당 클라이언트에게 전송한다.

         String id = session.getId();  //메시지를 보낸 웹소켓 세션 아이디
 
        // 받은 메시지를 JSON 형식으로 변환
        JSONObject jsonObject = new JSONObject(String.valueOf(message.getPayload()));
 
        // 필요한 정보 추출
        String userId = jsonObject.getString("userId");
        String latitude = jsonObject.getString("latitude");
        String longitude = jsonObject.getString("longitude");
        String type = jsonObject.getString("type"); // LOCATION, CLOSE , USER_LIST..
 
        UserDTO userDTO = userService.getUser(userId); // 사용자 정보 조회해오기
 
        // 사용자 위치 정보를 포함하는 UserDTO 객체 생성
        UserMDTO userMDTO = new UserMDTO();
        userMDTO.setUserId(userId);
        userMDTO.setPhoto(userDTO.getPhoto().getPhotoUrl());
        userMDTO.setUserName(userDTO.getUserName());
        userMDTO.setUserIntro(userDTO.getUserIntro());
 
        List<String> dogList = new ArrayList<>();
        for(DogDTO dDto : userDTO.getDogList()){
            dogList.add(dDto.getDogName());
        }
        userMDTO.setDogList(dogList);
 
        // 위도, 경도
        userMDTO.setLatitude(Double.parseDouble(latitude));
        userMDTO.setLongitude(Double.parseDouble(longitude));

클라이언트가 메세지를 보낼때마다 실행 코드이다.

데이터를 기반으로 (사용자정보+위치(위도,경도)) 데이터를 만든다.

 		// 사용자 정보를 userList(Map) 에 저장
        userList.put(session.getId(), userMDTO);
   
		// 현제 접속 중인 모든 클라이언트에게 메시지 전달 (자신은 제외)
        CLIENTS.entrySet().forEach(arg -> {
            if(!arg.getKey().equals(id)) {  // 자신이 아니면 메시지를 전달합니다.
                try {
                    // 위치 정보도 포함하여 전달
                    JSONObject response = new JSONObject();
                    response.put("type", "LOCATION"); // 메시지 타입은 LOCATION
                    response.put("userId", userMDTO.getUserId());
                    response.put("userName", userMDTO.getUserName());
                    response.put("latitude", userMDTO.getLatitude());
                    response.put("longitude", userMDTO.getLongitude());
                    response.put("photo", userMDTO.getPhoto());
                    response.put("dogList", userMDTO.getDogList());
 
                    // 해당 클라이언트에게 메시지 전송
                    arg.getValue().sendMessage(new TextMessage(response.toString()));
 
                } catch (IOException | JSONException e) {
                    e.printStackTrace();
                }
            }
        });

-> userList 에도 추가하고

-> JSON 타입으로 변환해서 나를 제외한 다른 클라이언트들에게 메세지를 보낸다.

      // 메세지 type = "CLOSE" 면 연결 종료, 세션 제거
        switch(type) {
            case "CLOSE" :
                CLIENTS.remove(session.getId());
                userList.remove(session.getId());
                break;
            default:
                break;
        }

  /**
     * 클라이언트와의 연결이 종료될 때 호출됨
     * - 해당 클라이언트를 CLIENTS 목록에서 제거
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
        CLIENTS.remove(session.getId());
        userList.remove(session.getId());
    }

- 메세지 타입이 CLOSE 일때에는 세션을 제거해서 연결을 종료시키고

- afterConnectionClosed 에도 세션 제거 코드를 작성해준다 => 연결이 종료된 후 호출됨

클라이언트 연결

테스트를 하기 위해서 크롬 확장프로그램인 Browser WebSocket Client 를 사용했다.

클라이언트에서는 설정해둔 endpoint 주소로 요청을 보내면 웹소켓에 연결된다

✅ 테스트 1) 소켓에 접속한 유저 정보 가져오기

1) arin84 가 접속하면 -> 현재 소켓에 있는 유저 리스트 (arin84 가 처음이므로 아무도 없음)

2) 이후 위치정보를 서버로 보낸다.

3) doyoon90 이 소켓에 접속하면 미리 접속해 있던 arin84의 정보가 뜬다.

4) 이후 위치정보를 서버로 보낸다.

✅ 테스트 2 ) 소켓에 접속한 사람에게 자신의 정보 전달 (메세지 전달)

5) arin84 는 doyoon90 이 접속해서 보낸 위치정보를 받게 된다.

✅ 테스트 3 ) 소켓 종료 테스트

6) doyoon90 이 접속을 종료하고 새로운 yeye91 이 접속해보자. (이런경우 리스트에는 arin84만 존재해야함)

7) arin84 만 소켓에 존재하게된다.

8) 즉 종료되어서 yeye91 이 보내는 데이터를 받을 수 없게 된다. arin84 만 계속해서 받음

저작자표시 비영리 변경금지

현재글[Project] WebSocket 웹 소켓 구현 (실시간 위치 정보)

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

개발일지📝