Getting Started

The SwiftUI SDK is built on top of the StreamChat framework, and it’s a SwiftUI alternative to the StreamChatUI SDK. It’s made entirely in SwiftUI, using declarative patterns that will be familiar to developers working with SwiftUI.

This section provides a high-level overview of the SwiftUI components library. It is a great starting point for discovering how to use Stream’s SwiftUI components in your app. For a complete step-by-step guide, check out iOS Chat tutorial.

Before starting this guide, make sure you have installed StreamChatSwiftUI as explained in the Installation section.

Setup

The SwiftUI SDK provides a context provider object that allows simple access to functionalities exposed by the SDK, such as branding, presentation logic, icons and the low-level ChatClient. The first step you would need to start using the SDK is to create the context provider object, called StreamChat.

let apiKeyString = "your_api_key_string"
let config = ChatClientConfig(apiKey: .init(apiKeyString))
let client = ChatClient(config: config)
let streamChat = StreamChat(chatClient: chatClient)

It would be best to do this setup when the app starts, for example, in the AppDelegate’s didFinishLaunchingWithOptions method. Also, be sure to keep a strong reference to the created StreamChat instance, for example, as a variable in the AppDelegate. This is the minimal setup that is required for the context provider object.

Connect User

The next step is to connect the ChatClient with a user. In order to connect, the chat client needs an authorization token.

In case the token does not expire, the connection step can look as follows:

// You can generate the token for this user from /chat/docs/ios-swift/token_generator/
// make sure to use the `leia_organa` as user id and the correct API Key Secret.
let nonExpiringToken: Token = "<# User Token Here #>"

// The user details.
let userInfo = UserInfo(
    id: "leia_organa",
    name: "Leia Organa",
    imageURL: URL(string: "https://cutt.ly/SmeFRfC")
)

// Connect the client with the static token
ChatClient.shared.connectUser(userInfo: userInfo, token: nonExpiringToken) { error in
 /* handle the connection error */
}

This example has the user and its token hard-coded. But the best practice is to fetch the user and generate a valid chat token on your backend infrastructure.

In case of a token with an expiration date, the chat client should be connected by giving the token provider that is invoked for initial connection and also to obtain the new token when the current token expires:

// The user details.
let userInfo = UserInfo(
    id: "leia_organa",
    name: "Leia Organa",
    imageURL: URL(string: "https://cutt.ly/SmeFRfC")
)

// Create a token provider that uses the backend to retrieve a new token.
let tokenProvider: TokenProvider = { completion in
   yourAuthService.fetchToken(for: userInfo.id, completion: completion)
}

// Connect the client with the token provider.
ChatClient.shared.connectUser(userInfo: userInfo, tokenProvider: tokenProvider) { error in
 /* handle the connection error */
}

Disconnect & Logout

Whenever your users leave the chat component, you should use disconnect to stop receiving chat updates and events while using other features of your app. You disconnect by calling:

chatClient.disconnect {
    // Dismiss the current screen or go to another screen.
    print("disconnect completed")
}

If your users logout from their account you should use logout instead of disconnect. Logout disconnects and deletes the offline state for the current user. You logout by calling:

chatClient.logout {
        // Dismiss the current screen or go to another screen
        print("logout completed")
    }

It’s important that you wait for the execution to complete before trying to login with a different user.

Create a Channel

Lets create your first channel so that we can later display it in the channel list view.

do {
    let channelId = ChannelId(type: .messaging, id: UUID().uuidString)
    let channelController = try ChatClient.shared.channelController(
        createChannelWithId: channelId,
        name: "My First Channel"
    )
    channelController.synchronize { error in
        if let error = error {
            print(error)
        }
    }
} catch {
    print("Channel creation failed because the current user is not connected")
}

The channel type is an enum that describes what the channel’s intention is.

Your ChannelId has to be a unique ID and you can set this to anything, in this example we’re using the UUID() provided by Apple. Finally, you can pass through the name of the channel which is a String and also some additional parameters if required.

After creating the channel it’s important you call synchronize() or get(watch: true), depending if you are using completion handler or async/await versions. Internally, this will fetch the local data first, then the remote data and it will keep it up-to-date by observing the web socket events.

Show the Channel List

Now that we have a channel, we can show it in the Channel List.

Here is an example of how to present the Channel List in SwiftUI:

struct ContentView: View {
    @Injected(\.chatClient) var chatClient

    var body: some View {
        ChatChannelListView(
            channelListController: channelListController
        )
    }

    private var channelListController: ChatChannelListController? {
        guard let currentUserId = chatClient.currentUserId else { return nil }
        let controller = chatClient.channelListController(
            query: .init(filter: .containMembers(userIds: [currentUserId]))
        )
        return controller
    }
}

The code snippet above will also create the ChatChannelListController with the specified query. The ChannelListQuery allows us to define the channels to fetch and their order. In this case, the query will load all the channels the user is a member of.

Read more about channel list query and low-level channel list controller here.

You can load test data for your application using the test data generator here.

Previous
Localization
Next
Theming
© Getstream.io, Inc. All Rights Reserved.