Chat UIKit SwiftUI v3
Chat UIKit SwiftUI
Chat UIKit
SwiftUI
Version 3

Chat in an open channel

Copy link

In an open channel, you can have a public chat using the OpenChannelView 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.

Sendbird Chat SwiftUI 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.


Features

Copy link

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

FeatureDescription

Send message

Allows users to send messages, images, videos, and files in the message input view.

Notify new messages

Displays a push notification when receiving a new message.

Show message send status

Displays the send status of a message as either successful, failed, or sending.

Copy message

Allows users to copy a text message.

Edit message

Allows users to edit their own messages.

Delete message

Allows users to delete their own messages.

Retry to send a message

Allows users to try to resend a failed message.

Channel settings menu

Navigates to the open channel settings view from the navigation bar.

Go back to previous view

Returns the user to the previous view from the navigation bar.

Show channel status banner

Displays the channel status in the top banner of the view. By default, the banner only shows the frozen state of the channel.


Initialize

Copy link

You can start building a channel-based chat service by calling the OpenChannelView class. It's also in charge of auto connecting to Sendbird server and internal functions to handle core features of SwiftUI such as pagination and real-time updates.

Note: You can initialize OpenChannelView by setting the OpenChannelViewProvider with the value of channelURL. If you've already created MessageListParams, we recommend you to set all of the objects together. Otherwise, the default values are used for this structure.

You can start building a chat in open channel view through the OpenChannelView structure. Use the init(provider:) initializer to create the instance and display the view.

OpenChannelViewProvider is a class that provides the necessary data for OpenChannelView to render the view. It has various data properties such as channelURL, startingPoint, and messageListParams. A OpenChannelViewProvider instance is required to initialize the OpenChannelView.

import SwiftUI
import SendbirdSwiftUI

struct ContentView: View {
    @ObservedObject var provider: OpenChannelViewProvider

    var body: some View {
        OpenChannelView(provider: provider)
    }
}

Init parameter

Copy link
ParameterTypeRequired

provider

OpenChannelViewProvider

o

View Provider Init parameter

Copy link
ParameterTypeRequired

channelURL

String

o

startingPoint

Int64

x

messageListParams

MessageListParams

x


Accessing data and methods

Copy link

OpenChannelViewProvider provides various data and methods related to the OpenChannelView that you can use to customize the view.

OpenChannelViewProvider provides various data and methods related to the OpenChannelView that you can use to customize the view. The below are @Published properties that you can access from the OpenChannelViewProvider.

ParameterTypeDescription

channels

[OpenChannel]

A list of open channels.

isLoading

Bool

Indicates whether the list is loading or not

MethodDescription

showCreateChannel()

presents CreateChannelView

showChannel(channelURL:messageListParams:)

presents an open channel view with the given channelURL

The below is an example of using OpenChannelViewProvider data and methods.

import SwiftUI
import SendbirdSwiftUI

struct ContentView: View {
    @ObservedObject var provider: OpenChannelViewProvider
    
    var body: some View {
        OpenChannelView(
            provider: provider,
            headerItem: {
                .init()
                .titleLabel { _ in
                    Text("\(provider.fullMessages.count) messages")
                        .padding()
                        .background(Color.blue)
                }
            }
        )
    }
}

Customization

Copy link

Sendbird Chat SwiftUI provides a View customization and DestinationViewBuilder.

  • View customization: Our SwiftUI SDK allows you to selectively customize view elements. To learn more about the customization and our SwiftUI is designed, see the customization guide.
  • DestinationViewBuilder: Use DestinationViewBuilder to customize the destination views that are navigatable from the group channel view.

You can use data and methods from the View Provider when customize the View.

Note : Visit our Github Sample to see the custom sample implementation for each item.

Partial customization

Copy link

You can easily customize a specific part of a View, which particularly comes in handy when changing only a certain area in the View. To do so, use the View Builders that Sendbird has predefined and its a ViewConfig. The ViewConfig contains the data needed to render the view and its parameters can be found in the table below.

Parameter

Copy link
ParameterTypeView builders

headerItem

() -> OpenChannelType.HeaderItem

leftView
rightView
titleView
- coverImage
- titleLabel
- subtitleLabel

listItem

() -> OpenChannelType.ListItem

rowView
senderProfileImage
userMessageView
fileMessageView
adminMessageView
scrollBottomView

inputItem

() -> OpenChannelType.InputItem

leftView
- addButton
rightView
- sendButton

The following code demonstrates how to replace the view items using headerItem. All other {Component}Items can be used in the same way.

Note : When you customize a parent view, customizations in the child views will not be applied. For example, if you customize the titleView in the headerItem, the customizations of the coverImage or titleLabel in the lower view items will not be applied.

OpenChannelView(
    provider: provider,
    headerItem: {
        .init()
        .leftView { viewConfig in
            Text("Custom Left")
        }
        .rightView { viewConfig in // chaining
            Text("Custom Right")
        }
    }
)

Full customization

Copy link

Please note that this screen does not support entire customization.

DestinationViewBuilder

Copy link

Sendbird Chat SwiftUI is designed to internally navigate from each view to its connected view. However, if you need to customize the destination view, you can do so by using the interface provided by the DestinationViewBuilder.

DestinationViewBuilder method

Copy link
MethodViewBuilder type

channelSettingsView

OpenChannelSettingsViewBuilder

userListView

OpenUserListViewBuilder

The following code demonstrates how to replace the channel settings view connected from the channel view.

OpenChannelView(provider: provider)
    .channelSettingsView { channelURL in
        OpenUserListView(provider: OpenChannelSettingsViewProvider(channelURL: channelURL))
    }

Note : If you've customized a child view of another view, you need to set the destination view for all the views from the top to the destination view.