Chat in an open channel

In an open channel, you can have a public chat using the SBUOpenChannelViewController class with a massive number of users to interact with in a more dynamic environment. Open channels can accommodate up to 1,000 simultaneous users and don't require an invitation to enter.

To view the image in full screen, click on the

UIKit supports plain text messages, file messages, and media content such as photos and videos to be sent in open channels. Once delivered, those messages are grouped by time in minutes and date in the channel.

To learn more about the channels, see Channel types in Chat SDK.

Refer to the table below to see what features there are in SBUOpenChannelViewController.

You can start building a channel-based chat service by calling the SBUOpenChannelViewController class. It uses SBUOpenChannelAdminMessageCell, SBUOpenChannelUserMessageCell, and SBUOpenChannelFileMessageCell classes to display the messages in the channel. It's also in charge of auto connecting to Sendbird server and internal functions to handle core features of UIKit such as pagination and real-time updates.

Note: You can initialize SBUOpenChannelViewController by setting the value of ChannelURL or GroupChannel. If you've already created MessageListParams, we recommend you to set all of the objects together. Otherwise, the default values are used for these classes.

In open channels, the SBUOpenChannelViewController class provides a mediaComponent to display media content such as a live streaming view. You can use this component by calling the methods shown in the code below.

let channelVC = SBUOpenChannelViewController(
    channelURL: {CHANNEL_URL},
    messageListParams: messageListParams
)
channelVC.mediaComponent.mediaView = UIImageView()  // Set up the media content view.
channelVC.enableMediaView() // Enable `mediaComponent`.
channelVC.updateMessageListRatio(to: 0.7)   // Update the value of the relative ratio of the message list to the whole screen.
let navigationController = UINavigationController(rootViewController: channelVC)
present(navigationController, animated: true)

The following items are key elements of SBUOpenChannelViewController that are used to create a functional chat in open channel view.

In the SBUOpenChannelViewController class, SBUOpenChannelModule and its components are used to create and display the open channel view. The module is composed of three components: HeaderComponent,ListComponent, InputComponent and MediaComponent.

When the loadView() method of the view controller is called, the module components get added to the view in the setupView() method of the Sendbird UIKit's view life cycle. Then, the configure method of each module component is called to set the property values and display the view.

The HeaderComponent includes a channel title, an back button that takes the user to the previous view, and a button that takes the user to the channel settings view. Each property corresponds to the elements in the navigation bar of the view controller.

The following table shows the parameters of the configure method of the HeaderComponent.

Note: To learn more about the delegate and the properties of the HeaderComponent, go to the API reference page.

The ListComponent shows a list of all the messages in the open channel. The following table shows the parameters of the configure method of the ListComponent.

Note: To learn more about the delegate, data source, and the properties of the ListComponent, go to the API reference page.

The InputComponent shows the input field of a channel where users can type and send their messages. The following table shows the parameters of the configure method of the InputComponent.

Note: To learn more about the delegate, data source, and the properties of the InputComponent, go to the API reference page.

The MediaComponent only applies to open channels and allows you to display a more variety of media content such as a live streaming view. The following table shows the parameters of the configure method of the MediaComponent.

Note: To learn more about the delegate, data source, and the properties of the MediaComponent, go to the API reference page.

The SBUOpenChannelViewController class uses a view model that is a type of the SBUOpenChannelViewModel class. The view model is created in the initializer of the view controller through the createViewModel(channel:channelURL:messageListParams:startingPoint:showIndicator:) method. When the view model object is created, it retrieves message list data from Chat SDK to the view controller and updates the view through the baseChannelViewModel(_:didReceiveNewMessage:forChannel:) event.

Note: If the value of channel or channelURL is invalid, the view model cannot retrieve the message list.

The following table shows the parameters of the createViewModel method.

Note: To learn more about the methods and the event delegates of the view model, go to this API reference page.

The SBUBaseChannelViewController class provides properties and methods that are used in both group channels and open channels. To learn more about these properties, go to the API reference page.

You can customize the chat in open channel view by changing the view controller, module component, and the view model that correspond to this key function.

There are two ways to customize the view controller: change the default view controller value in the global SBUViewControllerSet class or set a single-use custom view controller in the key function.

The custom view controller in the code below is used in the following customization examples.

class CustomOpenChannelViewController: SBUOpenChannelViewController {
    // Implement custom code here.
}

1. Change the value of SBUViewControllerSet.OpenChannelViewController.

SBUViewControllerSet.OpenChannelViewController = CustomOpenChannelViewController.self

// The view controller will now use `CustomOpenChannelViewController` as the default value.

2. Use a one-time custom view controller in the chat in open channel view.

let channelVC = CustomOpenChannelViewController(channelURL: {CHANNEL_URL})
let navigationController = UINavigationController(rootViewController: channelVC)
present(navigationController, animated: true)

There are two ways to customize a module component: change the default component value in the global SBUModuleSet.OpenChannelModule class or set a single-use custom module component in the view controller. If there is no set custom value in the loadView() method of SBUOpenChannelViewController, the module components will use the default values.

The custom header component in the code below is used in the following customization examples.

class CustomHeader: SBUOpenChannelModule.Header {
    // Implement custom code here.
}

1. Change the value of SBUModuleSet.OpenChannelModule.HeaderComponent.

SBUModuleSet.OpenChannelModule.HeaderComponent = CustomHeader.self

let channelVC = SBUViewControllerSet.OpenChannelViewController(channelURL: {CHANNEL_URL})

// The `headerComponent` in `SBUOpenChannelViewController` will now use `customHeader` as the default value.

2. Change the module component in SBUOpenChannelViewController.

let channelVC = SBUViewControllerSet.OpenChannelViewController(channelURL: {CHANNEL_URL})
channelVC.headerComponent = CustomHeader()

Note: To learn more about the methods of SBUOpenChannelModule, go to the API reference page.

To customize the MediaComponent, you need to update the layout depending on the screen orientation through the setupLayouts() and updateLayouts() methods. Using properties like mediaViewIgnoringSafeArea(_:) and overlayMediaView(_:messageListRatio:), you can customize the media view before updating the layout.

override func updateLayouts() {
    // Update the screen ratio and customize some properties of `mediaComponent`.
    let isLandscape = self.currentOrientation.isLandscape
    self.mediaViewIgnoringSafeArea(isLandscape)
    self.overlayMediaView(
        isLandscape,
        messageListRatio: isLandscape ? 0.4 : 0.7
    )

    // Update layouts with the changed ratio.
    super.updateLayouts()

    // Update additional layouts here.
}

In order to use a customized view model or customize the existing view model's event delegate, you must override the view controller.

1. Use a customized view model.

class CustomChannelViewController: SBUOpenChannelViewController {
    override func createViewModel(
        channel: BaseChannel? = nil,
        channelURL: String? = nil,
        messageListParams: MessageListParams? = nil,
        startingPoint: Int64? = nil,
        showIndicator: Bool = true
    ) {
        // Set `viewModel` to the `CustomViewModel` object.
        self.viewModel = CustomViewModel()

        // Implement your code here.
    }
}

2. Customize the view model's event delegate.

extension CustomChannelViewController: SBUOpenChannelViewModelDelegate {
    override func baseChannelViewModel(
        _ viewModel: SBUBaseChannelViewModel,
        didChangeChannel channel: BaseChannel?,
        withContext context: MessageContext
    ) {
        // Implement your code here.
}