이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.
Docs Overview/
Live/
iOS/
기본 기능/
앵커 연결/

앵커 연결

Component Introduction

The Co-Host function is a real-time interactive communication method, specially tailored for anchors. It allows anchors from different rooms to achieve real-time interaction and communication during the live broadcast. The connection function of TUILiveKit can support up to 9 people in a single room to connect at the same time, providing powerful technical support for anchor interaction, knowledge sharing, cultural exchange, e-commerce training and other scenarios. It not only provides anchors with a variety of interactive methods, but also brings a richer and deeper viewing experience to the audience, thereby creating more surprises and value for both parties and making live broadcasts more attractive.
two-way connection
multi-way connection







Instructions for Use

Co-Host a Live

Click Co-Host Button
Select Host for Co-Host
Co-Host successful
Disconnect













Invited to Co-Host

Receives the invitation
Accepts the invitation







Custom Functionality

Replace Recommendation List Source

The recommended list data source in TUILiveKit by default uses getRecommendedList to retrieve the live stream list. If you need to use a custom recommended list, you can refer to the example code below to replace the corresponding recommended list data.
Swift
    // File Path：iOS/TUILiveKit/Source/Service/ConnectionService.swift
    
    func getRecommendedList(cursor: String, count: Int = 20) -> AnyPublisher<(String, [TUILiveInfo]), InternalError> {
        return Future<(String,[TUILiveInfo]), InternalError> { [weak self] promise in
            guard let self = self else { return }
            guard let listManager = roomEngine.getExtension(extensionType: .liveListManager) as? TUILiveListManager else {
                promise(.failure(InternalError(error:TUIError.failed, message: String.localized("live.error.failed"))))
                return
            }
            listManager.fetchLiveList(cursor: cursor, count: count) { responseCursor, responseLiveList in
                let liveList = responseLiveList.filter { info in
                    return LiveIdentityGenerator.shared.getIDType(info.roomInfo.roomId) == .live
                }
                promise(.success((responseCursor, liveList)))
            } onError: { error, message in
                promise(.failure(InternalError(error: error, message: message)))
            }
        }.eraseToAnyPublisher()
    }

Custom Co-Host Panel UI

If you need to customize the Co-Host panel UI, recommendation list UI, or connected list UI, please refer to the following paths for changes.
// File Path：iOS/TUILiveKit/Source/View/LiveRoom/View/Anchor/LivingView/Connection

├── ConnectionManagerPanel.swift // Co-host panel view
├── ConnectionUserCell.swift     // Recommendation list and connection list reuse Cell view style
└── ConnectionUserTableHeaderView.swift // Co-host panel header view style

Custom Video View UI

If you need to customize the Co-Host video view UI, please refer to the following paths for changes.
Swift
// File Path：iOS/TUILiveKit/Source/View/LiveRoom/View/Common/Video/Component/RenderView.swift

class RenderView: UIView {
    ...
    func constructViewHierarchy() {
        // View hierarchy construction
    }

    func activateConstraints() {
        //View layout
    }

}

Key Code

Co-Host

The TUILiveKit anchor connection function is mainly implemented based on ConnectionService. You can get the connection management class through store.serviceCenter.connectionService, and then call the connection-related APIs. Taking the co-host between anchors A and B as an example, the specific interaction sequence can be found in the figure below.




Anchor A initiates a co-host

Anchor A initiates a co-host by calling requestConnection and passing in the room id of anchor B to be connected in the parameter roomIdList.
Swift
    // File Path：iOS/TUILiveKit/Source/Service/ConnectionService.swift 
    
    func requestConnection(roomIdList:[String], extensionInfo: String) -> AnyPublisher<[String:TUIConnectionCode], InternalError>  {
        return Future<[String:TUIConnectionCode], InternalError>  {[weak self] promise in
            guard let self = self else { return }
            connectionManager.requestConnection(roomIdList: roomIdList, timeout: 10, extensionInfo: extensionInfo) { result in
                var connectionResult:[String:TUIConnectionCode] = [:]
                result.forEach { (key: String, value: NSNumber) in
                    connectionResult[key] = TUIConnectionCode(rawValue: value.intValue) ?? .unknown
                }
                promise(.success(connectionResult))
            } onError: { err, message in
                let error = InternalError(error: err, message: message)
                promise(.failure(error))
            }
        }.eraseToAnyPublisher()
    }
Anchor A can receive the request approval callback through onConnectionRequestAccept.

Anchor B receives a co-host request

Anchor B receives the connection request callback through onConnectionRequestReceived.
Swift
    // File Path：iOS/TUILiveKit/Source/Service/EngineServiceCenter.swift
    
    func onConnectionRequestReceived(inviter: TUIConnectionUser, inviteeList: [TUIConnectionUser], extensionInfo: String) {
        guard let store = self.store else { return }
        store.dispatch(action: ConnectionActions.onConnectionRequestReceived(payload: (inviter, inviteeList, extensionInfo)))
    }
Anchor B accepts the connection request by calling accept .
Swift
    // File Path：iOS/TUILiveKit/Source/Service/ConnectionService.swift 
    
    func accept(roomId:String) -> AnyPublisher<Void, InternalError>{
        return Future<Void, InternalError>  {[weak self] promise in
            guard let self = self else { return }
            connectionManager.acceptConnection(roomId) {
                promise(.success(()))
            } onError: { err, message in
                let error = InternalError(error: err, message: message)
                promise(.failure(error))
            }
        }.eraseToAnyPublisher()
    }
Streamers A, B, and the audience in the room receive the onConnectionUserListChanged callback and are notified of changes to the co-host list.
Swift
    // File Path：iOS/TUILiveKit/Source/Service/EngineServiceCenter.swift
    
    func onConnectionUserListChanged(connectedList: [TUIConnectionUser], joinedList: [TUIConnectionUser], leavedList: [TUIConnectionUser]) {
        guard let store = self.store else { return }
        store.dispatch(action: ConnectionActions.onConnectionUserListChanged(payload: connectedList))
    }

Disconnects

Take the example of host B disconnects, the interaction sequence can be referred to in the figure below.



Anchor B calls disconnect to exit the co-host.
Swift
    // File Path：iOS/TUILiveKit/Source/Service/ConnectionService.swift 
    
    func disconnect() -> AnyPublisher<Void, InternalError>{
        return Future<Void, InternalError>  {[weak self] promise in
            guard let self = self else { return }
            connectionManager.disconnect {
                promise(.success(()))
            } onError: { err, message in
                let error = InternalError(error: err, message: message)
                promise(.failure(error))
            }
        }.eraseToAnyPublisher()
    }
Streamers A, B, and the audience in the room receive the onConnectionUserListChanged callback and are notified of changes to the co-host list.
Swift
     // File Path：iOS/TUILiveKit/Source/Service/EngineServiceCenter.swift
     
    func onConnectionUserListChanged(connectedList: [TUIConnectionUser], joinedList: [TUIConnectionUser], leavedList: [TUIConnectionUser]) {
        guard let store = self.store else { return }
        store.dispatch(action: ConnectionActions.onConnectionUserListChanged(payload: connectedList))
    }
Note:
ConnectionService is implemented based on TUILiveConnectionManager. If you need to extend the connection function, please refer to the document: TUILiveConnectionManager.