Skip to main content

Messaging Interface

The example below is a simplified version of the final result of the tutorial - a messaging user interface. Sending and receiving messages is simulated with buttons. The ChatChannel class is used to simulate server-client communication. The source of the ChatChannel class is available in the first part of the tutorial.

Key Points​

  • The custom empty placeholder is used for the loading message.
  • The custom header is used to display a loading message when loading older messages.
  • Sending/receiving messages implements a scroll location so that the list can scroll to the bottom when a new message is sent or received.
  • Optimistic updates are used to display a message before it is delivered.

Live Example​

loading...