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

---

목차

 

 

 

WebSocket 을 써보자

 

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

 

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

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

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

 

 

 

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

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

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

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

 

 

WebSocket 웹 소켓 개념

 

---

 

 

 

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만 존재해야함)

 

 

yeye91

 

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

 

 

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