Creating chat view with Combine and SwiftUI

Let’s build a conversation view which shows a list of messages and has input text field with send button. Sent and received messages are managed by Conversation object. Conversation object manages a Session object which is simulating networking stack. This kind of setup allows us to look into how to propagate received messages from Session object to Conversation and then to the list view. We’ll jump into using types Combine and SwiftUI provide therefore if you need more information, definitely watch WWDC videos about Combine and SwiftUI.

Data layer

In the UI we are going to show a list of messages, therefore let’s define a struct for a Message. We’ll make the Message to conform to protocol defined in SwiftUI – Identifiable. We can add conformance by adding id property with type UUID what provides us unique identifier whenever we create a message. Identification is used by SwiftUI to identify messages and finding changes in the messages list.

	struct Message: Identifiable {
	let id = UUID()
	let sender: String
	let text: String
	}

view raw .swift hosted with ❤ by GitHub

Session is owned by Conversation and simulates a networking stack dealing with sending and receiving messages. This like a place were we could use delegate pattern for forwarding received messages back to the Conversation. Instead of delegation pattern, we can use Combine’s PassthroughSubject. It enables us to publish new messages which we can then collect on the Conversation side. Great, but let’s see how to receive messages which are published by PassthroughSubject.

	struct Session {
	let messageFeed = PassthroughSubject<Message, Never>()
	func send(_ message: Message) {
	DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(100)) {
	self.messageFeed.send(message)
	self.simulateReceivingMessages()
	}
	}
	private func simulateReceivingMessages() {
	DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(200)) {
	let receivedMessage = Message(sender: "Person B", text: UUID().uuidString)
	self.messageFeed.send(receivedMessage)
	}
	}
	}

view raw .swift hosted with ❤ by GitHub

Conversation is responsible of receiving messages from the Session and keeping the current history: list of messages. For receiving messages published by Session, we can use a subscriber called sink, which just gives access to values flowing through the channel. Subscribers are added directly to publishers, then publisher sends a subscription object back to the subscriber what subscriber can use for communicating with publisher. Here, communicating means requesting values from publisher. To recap: Session owns PassthroughSubject what Conversation starts to listen by attaching subscriber to it.

Conversation conforms to SwiftUI’s ObservableObject. When marking properties with @Published property wrapper, changes in those properties trigger updates in SwiftUI.

	final class Conversation: ObservableObject {
	private let session = Session()
	private var messageSubscriber: AnyCancellable?
	init() {
	messageSubscriber = session.messageFeed.sink { [weak self] (receivedMessage) in
	self?.messages.append(receivedMessage)
	}
	}
	@Published private(set) var messages = [Message]()
	func send(_ message: Message) {
	session.send(message)
	}
	}

view raw .swift hosted with ❤ by GitHub

Creating simple list view

In SwiftUI, views are described by value types conforming to View protocol. Every view return their content in the body property. Our UI is simple enough and requires to add navigation view, list and then input view. List is the table view construct which creates new rows whenever it needs to. As we made Message to conform to Identifiable, then we can pass the messages directly to the List.

	struct ContentView: View {
	@ObjectBinding var conversation: Conversation
	var body: some View {
	NavigationView {
	VStack {
	List(self.conversation.messages) { message in
	Text(message.text)
	}
	InputView(conversation: self.conversation)
	}.navigationBarTitle(Text("Conversation"))
	}
	}
	}

view raw .swift hosted with ❤ by GitHub

Input view contains text field and button for sending the entered message. Input text is local state owned by the view itself. @State is a property wrapper and internally it creates a separate storage where the input text is stored and read during view updates.

	import Combine
	import SwiftUI
	struct InputView: View {
	let conversation: Conversation
	@State private var inputText = ""
	var body: some View {
	HStack {
	TextField("", text: $inputText)
	.padding(6)
	.background(Color.white)
	Button(action: sendMessage) {
	Text("Send")
	}
	}.padding(12).background(Color.init(white: 0.75))
	}
	private func sendMessage() {
	self.conversation.send(Message(sender: "PersonA", text: self.inputText))
	self.inputText = ""
	}
	}

view raw .swift hosted with ❤ by GitHub

Now we have a the whole picture put together. Conversation object manages messages and lets SwiftUI know when it changes by using @Published property wrapper. When property wrapper dispatches change to SwiftUI, it compares the changes in the view hierarchy and updates only what is needed.

Summary

We created a basic list view what displays messages in the conversation object. We used simple constructs for passing on the data down from the Session to the SwiftUI layer. The aim of the sample project was to try out some of the ways Combine and SwiftUI allow us to build views.

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.

Example

ConversationInSwiftUI (Xcode 11, Swift 5.1)

Resources

• Data Flow Through SwiftUI (WWDC’19)
• Introducing Combine (WWDC’19)
• Introducing SwiftUI: Building Your First App (WWDC’19)
• SwiftUI Essentials (WWDC’19)