Chapter 11. Advanced architectures: Chat client 1

 

In this chapter

  • Setting up a chat client that uses a WebSocket
  • Wrapping listeners as observables
  • Accumulating values from an observable
  • Managing the view model lifecycle

Chat client with WebSockets

You’ll use the example of an instant messaging chat client to explore common elements of applications that don’t fit stores or view models. The example spans two chapters, with the more complex parts in chapter 12.

While exploring this example, you’ll also learn about more advanced techniques of dealing with lifecycles and view bindings.

Chat client UI

You’re going to keep it nice and simple for now. You’ll show only a list of messages (including sent messages) and a text field accompanied by a Send button.

The chat room will also be anonymous to start with, though this could later be changed.

Because the UI is basic, you’ll start by tackling the part that seems the trickiest: sending and receiving messages over the internet.

First you’ll take a little detour to learn how to make the basic app in a nonreactive way. Then you’ll refactor it to incorporate new features.

How to transfer messages

The chat messages need to be transferred somehow. Assuming you have the server already, when you transfer data on the internet, you use HTTP.

Sending data with traditional HTTP

WebSockets

WebSockets as broadcasters

Connecting to the server

ChatMessage structure

Sending ChatMessages

Wrapping listeners into observables

Coffee break

Basic UI

Showing messages

The view model

Accumulating ChatMessages

Putting together message processing

Consuming values from the view model

View model lifecycle

Making the view model lifecycle

Summary