Open channel

This page explains the key functions of open channels in Sendbird UIKit for iOS, demonstrating how to create a channel, chat in a channel, configure the channel settings, and list channel participants.

Open channels are a public chat that allows a massive number of users to interact with one other in a more dynamic environment. Open channels can accommodate far more users compared to group channels and don’t require an invitation for the users to enter. To learn more about different behaviors of open channels and group channels , see Channel types on how open channels and group channels work.

Instead of creating an open channel directly in UIKit, use one of the following three methods to create a channel instance for UIKit.

• Sendbird Dashboard
• Sendbird Chat SDK for iOS
• Platform API

Sendbird Dashboard allows you to create an open channel in a most simple way.

1. Login to the dashboard and then find your Application.
2. Go to the Chat > Open channels, and click Create channel at the top-right corner.
3. In the dialog box that appears, specify the name, unique URL, cover image, and custom type of a new channel you are about to create.

To create an open channel through iOS Chat SDK, see Create a channel in the Chat SDK Docs for iOS.

To create an open channel through Chat Platform API, see Create a channel in the Platform API Docs.

An open channel allows dynamic interaction among a massive number of users and can be easily managed without the need for complex implementation. UIKit supports plain text messages, file messages, and media content such as photos and videos. All messages in open channels are cached using memory, and messages that failed to be sent are only kept within the active channel object.

All chat services built with Sendbird UIKit for iOS begin from the channel list. You can build a channel-based chat service using the SBUOpenChannelViewController class. The view controller uses the SBUOpenChannelAdminMessageCell, SBUOpenChannelUserMessageCell and SBUOpenChannelFileMessageCell classes to display information.

The SBUOpenChannelViewController class also is in charge of an auto connection to Sendbird server and internal functions to handle core features of UIKit such as pagination and real-time updates.

Note: You can initialize the SBUOpenChannelViewController by setting a ChannelUrl or SBDOpenChannel object. If you've already created a SBDMessageListParams object, set all of the objects together. Otherwise, the default values are used for these classes.

Use the following code to allow users to chat in a channel view.

// Case 1: Using channel url.
let channelVC = SBUOpenChannelViewController(channelUrl: {CHANNEL_URL})
let naviVC = UINavigationController(rootViewController: channelVC)
present(naviVC, animated: true)

// Case 2: Using channel object.
let channelVC = SBUOpenChannelViewController(channel: {CHANNEL})
let naviVC = UINavigationController(rootViewController: channelVC)
present(naviVC, animated: true)

// Case 3: Using messageListParams object as well.
let params = SBDMessageListParams()
params.includeMetaArray = true
params.includeReactions = true
let channelVC = SBUOpenChannelViewController(channel: {CHANNEL}, messageListParams: params)
let naviVC = UINavigationController(rootViewController: channelVC)
present(naviVC, animated: true)

The components of the SBUOpenChannelViewController class include Header, List, and messageInput. The List is an area where the UITableView displays a list of messages in the channel using the SBUOpenChannelUserMessageCell, SBUOpenChannelFileMessageCell, and SBUOpenChannelAdminMessageCell. The features of the SBUOpenChannelViewController class include:

To view the image in full screen, click on the

The following table lists a set of customizable properties of the SBUOpenChannelViewController class.

You can customize the messageInputView or newMessageInfoView by subclassing the SBUMessageInputView or SBUNewMessageInfo class, respectively. When the messageInputView indicates that the channel is frozen or the participant is muted in the channel, the channel state can be changed through the setFrozenModeState(_ isFrozen:) or setMutedModeState(_ isMuted:) method of the SBUMessageInputView.

Note: In the case where both Frozen and Muted states coexist in a channel, only the Frozen state will be displayed in the view.

The SBUStringSet is a set of strings used to compose the screen. You need to modify the stringSet values in advance if you want to make changes to the screen. The stringSet includes:

Note : A set of common strings is not included in the above list of properties. See the StringSet section in the Common resources page.

The SBUIConSet is a set of icons used to compose the screen. You need to modify the iconSet values in advance if you want to use different icons. The iconSet includes:

• iconCopy, iconEdit, iconInfo, iconNewMessage, iconAdd, iconSend, iconDelivered, iconErrorFilled, iconRead, iconSent, iconSpinnerSmall, iconFileAudio, iconFileDocument, iconGif, iconPlay

Note : A set of common icons is not included in the SBUIconSet listed above. See the IconSet section in the Common resources page.

You can subclass and customize the SBUOpenChannelViewController class to enhance the user experience of your app. The overridable methods include:

• viewLifeCycle, SBUMessageInputViewDelegate, SBUFileViewerDelegate, SBDConnectionDelegate, SBDChannelDelegate

If you wish to create and implement a custom message cell, you must inherit the SBUBaseMessageCell class. To register your custom message cell to be shown on the List component of the channel view, use the register(customMessageCell:nib:) function.

You can also change a cell's Identifier by overriding the generateCellIdentifier function. By default, the cell's Identifier takes on the name of the class.

Note : We recommend you should fully understand the usage of Sendbird Chat SDK for iOS when subclassing the class. Some actions may not work as expected depending on your customization.

To display messages, the SBUOpenChannelViewController uses two views and three themes. The two views include the SBUOpenChannelBaseMessageCell and the SBUMessageInputView, and the three themes are the SBUChannelTheme, SBUMessageCellTheme, and SBUMessageInputTheme in the SBUTheme.

The overall elements of the SBUOpenChannelViewController are managed through the SBUChannelTheme. Meanwhile, the SBUOpenChannelBaseMessageCell uses the SBUMessageCellTheme to show messages in the view and the SBUMessageInputView uses the SBUMessageInputThemefor the design of the message input box in the view.

All three themes mentioned above can be customized through the SBUTheme. And you should call the setupStyle() afterwards in order to apply any changes you made to the theme.

You can customize the channel theme through the SBUTheme.setChannel as follows.

Note : You should call the setupStyle() method afterwards in order to apply any changes you made to the theme.

let channelTheme = SBUChannelTheme(
    navigationBarTintColor: SBUColorSet.primary300
    ...

)

let messageCellTheme = SBUMessageCellTheme(
    backgroundColor: SBUColorSet.background100
    ...

)

let messageInputTheme = SBUMessageInputTheme(
    backgroundColor: SBUColorSet.background100
    ...

)

SBUTheme.setChannel(channelTheme: channelTheme,
        messageCellTheme: messageCellTheme,
        messageInputTheme: messageInputTheme)

Themes can be customized through the SBUTheme. It is recommended that you change the themes prior to viewController initialization. The following code shows how to customize the elements of the theme.

Note : You should call the setupStyle() method afterwards in order to apply any changes you made to the theme.

// Channel theme.
SBUTheme.channelTheme.backgroundColor = SBUColorSet.background100
...

// Message cell theme.
SBUTheme.messageCellTheme.backgroundColor = SBUColorSet.background100
...

// Message input theme.
SBUTheme.messageInputTheme.backgroundColor = SBUColorSet.background100
...

The SBUChannelTheme object has properties used in the SBUOpenChannelViewController.

The SBUMessageInputTheme object has properties used in the SBUOpenChannelViewController.

The SBUMessageCellTheme object has properties used in the SBUOpenChannelViewController.

Open channels support an overlayMode, which allows you to put a semi-transparent upper layer on the top of the channel background. The overlayMode can be useful for those who use the SBUOpenChannelViewController with a mediaView because the background can be shown through. The overlayMode is supported for all orientations of the screen.

The SBUOpenChannelViewController consists two views: the mediaView and the messageList view. The mediaView is an area your media or content should be drawn to, and the messageList view is where the message list is drawn. The SDK handles the drawing of the messageList, and you can decide whether to use the mediaView or not.

To view the image in full screen, click on the

let openChannelVC = SBUOpenChannelViewController(channel: openChannel, messageListParams: openChannelParams)

// You need to enable the media view first.
openChannelVC.enableMediaView()

// Set the mediaView to your custom view.
openChannelVC.mediaView = UIView()

// Set the ratio of message list view within the screen.
// The ratio can be 0 to 1, inclusive.
// * Portrait mode : the ratio indicates the height of the messageList, measured from the bottom of the screen.
// * Landscape mode : the ratio indicates the width of the messageList, measured from the right side of the screen.
openChannelVC.updateMessageListRatio(to: 0.7)

// You can set whether the mediaView should ignore the safe area or not.
// The default is true.
openChannelVC.mediaViewIgnoringSafeArea(false)

With the mediaView set, you can enable the overlayMode. In that case, the messageList UI adjust itself to the overlayMode and the mediaView will fill the whole screen in both portrait and landscape mode. You can customize the size of the message list view through the updateMessageListRatio(to ratio:) method.

class YourOpenChannelViewController: SBUOpenChannelViewController {

    func changeOverlayMode() {
        // Enable the overlay mode.
        // If true, the mediaView ratio will be 1, occupying the whole screen.
        // If false, the mediaView ratio will be 1 - messageListRatio.
        self.overlayMediaView(true/false, messageListRatio: 0.4)

        // Update the layout.
        self.updateAutolayout()
    }
}

You can change the styles of the overlayMode by setting your custom themes under SBUTheme.overlayTheme. The customizable themes for the overlay mode include SBUChannelTheme, SBUMessageInputTheme, SBUMessageCellTheme and SBUComponentTheme, and they're set to .overlay as a default.

class YourOpenChannelViewController: SBUOpenChannelViewController {

    func customizeOverlayTheme() {

        /**
        * 1. Change the theme property directly.
        */
        SBUTheme.overlayTheme.messageInputTheme.backgroundColor = UIColor.your_desired_color

        /**
        * 2. Change the ColorSet in the theme.
        */
        // Or change the ColorSet value for the MessageInputTheme.overlay.backgroundColor property.
        // Change the color of SBUColorSet.onlight02 as follows.
        SBUColorSet.onlight02 = UIColor.your_desired_color

        // Set the overlay theme again to apply any changes.
        SBUTheme.overlayTheme.messageInputTheme = .overlay

        // Update the UI.
        self.updateStyles()
    }
}

@interface YourOpenChannelViewController: SBUOpenChannelViewController
@end

@implementation
- (void)customizeOverlayTheme {
    /**
    * 1. Change the theme property directly.
    */
    SBUTheme.overlayTheme.messageInputTheme.backgroundColor = UIColor.{YOUR_DESIRED_COLOR};

    /**
    * 2. Change the ColorSet in the theme.
    */
    // Or change the ColorSet value for the MessageInputTheme.overlay.backgroundColor property.
    // Change the color of SBUColorSet.onlight02 as follows.
    SBUColorSet.onlight02 = UIColor.{YOUR_DESIRED_COLOR};

    // Set the overlay theme again to apply any changes.
    SBUTheme.overlayTheme.messageInputTheme = SBUMessageInputTheme.overlay;

    // Update the UI.
    [self updateStyles];
}
@end

In UIKit, you can retrieve the list of participants in a specific open channel through the SBUMemberListViewController class. This class displays a list of participants using the SBUUserCell class.

Note : Simply setting your chat service to be based on either the channel list, channels, or channel settings can seamlessly lead users to the Participants list view.

You can get the list of participants in a specific channel by simply calling the SBUMemberListViewController class.

Note : You can initialize the SBUMemberListViewController class by setting a ChannelUrl, SBDOpenChannel or ChannelMemberListType object.

Use the following code to get the list of participants in a channel.

// Case 1: Using channel url.
let memberListVC = SBUMemberListViewController(channelUrl: {CHANNEL_URL}, type: .participants)
let naviVC = UINavigationController(rootViewController: memberListVC)
present(naviVC, animated: true)

// Case 2: Using channel object.
let memberListVC = SBUMemberListViewController(channel: {CHANNEL}, type: .participants)
let naviVC = UINavigationController(rootViewController: memberListVC)
present(naviVC, animated: true)

Currently, the SBUMemberListViewController only supports a participants type for open channels.

To view the image in full screen, click on the

Note: When the ChannelMemberListType is .operators, the Add button is displayed on the top right corner of the view.

The following table lists the customizable properties and method of the SBUMemberListViewController class.

The SBUStringSet is a set of strings used to compose the screen. You need to modify the stringSet values in advance if you want to make changes to the screen. The stringSet includes:

Note : A set of common strings is not included in the above list of properties. See the StringSet section in the Common resources page.

The SBUIConSet is a set of icons used to compose the screen. You need to modify the iconSet values in advance if you want to use different icons.

Note : A set of common icons is not included in the list in the SBUIConSet. See the IconSet section in the Common resources page.

You can subclass and customize the SBUMemberListViewController to enhance the user experience of your app.

Note : We recommend that you fully understand the usage of Sendbird Chat SDK for iOS when subclassing the class. Some actions may not work as expected depending on your customization.

You can customize themes through the SBUTheme.setUserList as follows.

Note : You should call the setupStyle() method afterwards in order to apply any changes you made to the theme.

let userListTheme = SBUUserListTheme(
    navigationBarTintColor: SBUColorSet.background100
    ...

)

let userCellTheme = SBUUserCellTheme(
    backgroundColor: SBUColorSet.background100
    ...

)

SBUTheme.setUserList(userListTheme: userListTheme, userCellTheme: userCellTheme)

Themes can be customized through the SBUTheme. It is recommended to change the theme prior to the viewController initialization. The following code shows how to customize the elements of the theme.

Note : You should call the setupStyle() method afterwards in order to apply any changes you made to the theme.

// User list theme.
SBUTheme.userListTheme.navigationBarTintColor = SBUColorSet.background100

// User cell theme.
SBUTheme.userCellTheme.backgroundColor = SBUColorSet.background100

The SBUUserListTheme object has properties used in the following classes: SBUCreateChannelViewController, SBUInviteUserViewController and SBUMemberListViewController.

The SBUUserCellTheme object has properties used in the SBUUserCell.

In UIKit, you can display and configure channels through the SBUOpenChannelSettingsViewController class if you are an operator. In the class, you can edit the name and cover image of a channel, check the number of participants in the channel, and delete the specific channel.

Note : Simply setting your chat service to be based on either the channel list or channel can seamlessly lead users to the channel settings view.

Configure channel settings without complicated implementation through the SBUOpenChannelSettingsViewController class.

// Case 1: Using channel url.
let openChannelSettingsVC = SBUOpenChannelSettingsViewController(channelUrl: {CHANNEL_URL})
let naviVC = UINavigationController(rootViewController: openChannelSettingsVC)
present(naviVC, animated: true)

// Case 2: Using channel object.
let openChannelSettingsVC = SBUOpenChannelSettingsViewController(channel: {CHANNEL})
let naviVC = UINavigationController(rootViewController: openChannelSettingsVC)
present(naviVC, animated: true)

Note : You can initialize the SBUOpenChannelSettingsViewController class by setting the ChannelUrl or SBDOpenChannel object.

The SBUChannelSettingsViewController is composed of channel configurations and channel information. The components and features of the SBUChannelSettingsViewController class include:

To view the image in full screen, click on the

The following table lists a set of customizable properties and methods of the SBUOpenChannelSettingsViewController class.

The SBUStringSet is a set of strings used to compose the screen. You need to modify the stringSet values in advance if you want to make changes to the screen. The stringSet includes:

Note : A set of common icons is not included in the above list of properties. See the StringSet section in the Common resources page.

The SBUIConSet is a set of icons used to compose the screen. You need to modify the iconSet values in advance if you want to use different icons. The iconSet includes:

• iconMembers, iconDelete, iconShevronRight

Note : A set of common icons is not included in the SBUIconSet. See the IconSet section in the Common resources page.

You can subclass and customize the SBUOpenChannelSettingsViewController to enhance the user experience of your app.

Note : We recommend that you fully understand the usage of Sendbird Chat SDK for iOS when subclassing the class. Some actions may not work as expected depending on your customization.

You can customize the channelSettingsTheme through the SBUTheme.setChannelSetting(channelSettingsTheme:) method as follows.

Note : You should call the setupStyle() method afterwards in order to apply any changes you made to the theme.

let settingsTheme = SBUChannelSettingsTheme(
    navigationBarTintColor: SBUColorSet.background100
    ...

)

SBUTheme.setChannelSettings(channelSettingsTheme: settingsTheme)

Themes can be customized through the SBUTheme. It is recommended to change the themes prior to the viewController initialization. The following code shows how to customize the elements of the theme.

Note : You should call the setupStyle() method afterwards in order to apply any changes you made to the theme.

// Setting theme.
SBUTheme.channelSettingsTheme.navigationBarTintColor = SBUColorSet.background100

The SBUChannelSettingsTheme object has properties used in the SBUChannelSettingViewController.