[FEAT/#95] 서버 방 생성 작업을 진행합니다.

[youn9k]

🤔 배경

4인 참가를 위해 방 생성/참가 기능을 구현해야 했습니다.

📃 작업 내역

• localVideoView 단일화
• 방 생성 기능 구현
• 방 참가 기능 50% 구현(서버로 요청 보내기만 구현됨)
• UIActivityViewController를 통한 딥링크 초대 기능 구현
• 게스트 입장 대기 화면(EnterLoadingViewController) 구현
• WebSocketClient Delegate Deprecated 및 Publisher 구현

✅ 리뷰 노트

🚀 localVideoView 단일화

기존에는 아래와 같이 ConnectionRepository에 있는 clients 배열에서 직접 localVideoView를 가져왔습니다.

public protocol ConnectionRepository {
    var clients: [ConnectionClient] { get }
}

하지만 이렇게 할 경우 각 ConnectionClient들이 localVideoView를 가지고 있어서 총 3개의 localVideoView가 생성됩니다.
그래서 localVideoView는 ConnectionRepository에서 하나만 관리할 수 있도록 리팩토링했습니다.
우선 ConnectionRepository는 아래와 같이 변경했습니다.

public protocol ConnectionRepository {
    var clients: [ConnectionClient] { get }
    var localVideoView: UIView { get }
    var capturedLocalVideo: UIImage? { get }
    ...
}

하나의 localVideoView를 가지고 UseCase에서 접근이 가능하도록 했습니다. 그리고 ConnectionClient가 기존에 하나씩 생성해서 가지고 있던 localVideoView를 ConnectionRepository에 있는 localVideoView를 전달해서 사용하는 방식으로 바꿨습니다. 아래와 같이 bindLocalVideo 메서드를 사용해 Repository에 있는 localVideoView를 전달해서 바인딩해줄 수 있습니다.

public protocol ConnectionClient {
    func bindLocalVideo(_ localVideoView: UIView)
}

🚀 방 생성 기능 구현

방 생성 기능은 아래와 같은 흐름으로 진행됩니다.

1. 호스트가 createRoom 명령을 서버로 보냄
2. 서버는 UUID를 이용해 roomID와 userID를 만들고 이를 토대로 방을 만들어 호스트를 방에 입장시킵니다.
3. 서버는 생성된 roomID와 userID를 데이터로 인코딩해서 호스트에게 다시 전달합니다.

Request의 형태는 다음과 같습니다. messageType으로 방을 생성할 것인지 이미 생성된 방에 들어갈 것인지 명령을 구분합니다. message에는 해당 명령에 필요한 데이터를 담습니다. 이렇게 담은 정보를 인코딩해서 서버로 보내줍니다.

struct RoomRequestDTO: WebSocketRequestable {
    var messageType: RoomMessageType
    var message: Data?
    
    init(messageType: RoomMessageType, message: Data? = nil) { }
    
    enum RoomMessageType: String, Encodable {
        case createRoom
        case joinRoom
    }
}

서버는 받은 정보를 디코딩하여 messageType을 분석하고 이에 해당하는 로직을 실행시킵니다. 그래서 createRoom의 명령이 들어오면 방을 생성하고 userID를 생성한 후 이를 구조체에 담아 인코딩하여 다시 호스트에게 전달합니다. 전달된 정보는 딥링크 URI 생성에 이용됩니다.

🚀 방 참가 기능 50% 구현(서버로 요청 보내기만 구현됨)

현재 방 참가 기능은 딥링크 URI로 받은 roomID 정보를 담아서 서버에 joinRoom의 messageType을 가진 명령을 전달하는 것 까지만 구현되어 있습니다.

public struct JoinRoomRequestMessage: Encodable {
    public let roomID: String
}

JoinRoomRequest의 메시지에는 위의 정보가 담겨서 서버로 전달됩니다. 이후 서버에서 이를 토대로 방에 입장할 수 있는 로직을 구현할 계획입니다.

🚀 UIActivityViewController를 통한 딥링크 초대 기능 구현

카톡으로 공유하면 아래와 같은 형태로 URI Scheme을 전달하고, 누르면 딥링크 방식을 통해 아래 게스트 입장 대기 화면으로 진입하게 됩니다.

🚀 게스트 입장 대기 화면(EnterLoadingViewController) 구현

텍스트 정렬 안맞는 문제는 가운데 정렬로 수정되었습니다 ! 스샷 귀차니즘 이슈로..

게스트 입장 대기 화면 ViewDidLoad 시점에 방 참가 요청을 보내게 됩니다.
그리고 방 참가 성공 여부에 따라 아래와 같이 분기 처리 됩니다.

• 방 참가 성공 시: 게스트 입장으로 WaitingRoomViewController로 진입
• 방 참가 실패 시: 호스트 입장으로 WaitingRoomViewController로 진입

🚀 WebSocketClient Delegate Deprecated 및 Publisher 구현

WebSocketClient는 이벤트를 전달하려면 Delegate를 사용해야 했습니다. 하지만 아래와 같이 여러 서비스들에서 하나의 WebSocketClient를 바라보게 되었고, Delegate 배열을 관리해야 했습니다. Delegate를 배열로 관리한다면 위임자(Delegate)라는 패턴의 의미와 맞지 않았고, Delegate의 순환 참조 위험성도 증가한다는 문제가 있었습니다.

그래서 아래와 같이 WebSocketClient 내에 Publisher들을 두어 필요한 이벤트들만 구독할 수 있도록 변경했습니다.

아직 모든 서비스들에서 WebSocketClientDelegate를 제거하지 못해 아래 코드와 같이 deprecated 시키고, 차차 걷어내려고 합니다.
그리고 클래스 내부에선 subject에 접근이 가능하고, 외부에는 publisher만 노출되도록 해 subject의 편리함은 가져가되 외부에서 send할 수 없는 단방향 구조를 만들었습니다.

public final class WebSocketClientImpl: NSObject, WebSocketClient {
    @available(*, deprecated, message: "Publisher로 교체될 예정입니다.")
    public var delegates: [WebSocketClientDelegate] = []

    private let _webSocketDidConnectPublisher = PassthroughSubject<Void, Never>()
    private let _webSocketDidDisconnectPublisher = PassthroughSubject<Void, Never>()
    private let _webSocketdidReceiveDataPublisher = PassthroughSubject<Data, Never>()

    public var webSocketDidConnectPublisher: AnyPublisher<Void, Never> {
        _webSocketDidConnectPublisher.eraseToAnyPublisher()
    }
    public var webSocketDidDisconnectPublisher: AnyPublisher<Void, Never> {
        _webSocketDidDisconnectPublisher.eraseToAnyPublisher()
    }
    public var webSocketdidReceiveDataPublisher: AnyPublisher<Data, Never> {
        _webSocketdidReceiveDataPublisher.eraseToAnyPublisher()
    }
}

🚀 테스트 방법

링크 버튼을 누르면 공유 시트가 올라오고, 딥링크 가능한 URI Scheme을 공유할 수 있습니다.
그리고 외부에서 해당 메시지를 누르면 게스트 모드로 앱에 진입합니다.
현재는 아래와 같이 서버 요청없이 3초 뒤에 WaitingRoom으로 이동되게 되어있습니다.

[hsw1920]

EditPhoto쪽에서는 이거 id랑 nickname만 받아서 Codable 채택하는 새로운 Entity로 관리할 수 있도록 해야할 것 같아요.

[0Hooni]

라이브 코드리뷰 완

[hsw1920]

고생하셨습니다. 코멘트 확인 부탁드려요오