Flutter + AWS Realtime database (No Amplify): Part 3

AWS realtime using WebSocket and DynamoDB

• Flutter + AWS Realtime database (No Amplify): Part 1
• Flutter + AWS Realtime database (No Amplify): Part 2
• Flutter + AWS Realtime database (No Amplify): Part 3

We’ll finish up with UIs using Flutter Web.
Just to remind you, the Frontend tool can be anything that supports websocket. No need to be Flutter at all.

Here’s the plan.
Page 1: Simple text field that user can enter the id.
Page 2: Once the user enters the id, goes to this page, connects to the socket, and the page display all previous messages.

Please note: due to the time and complexity manner, I’m skipping some of the parts. I mean, you may notice a lot of possible improvements.
For example, I’ll call for all messages instead of only a few recent messages. This is a bad approach but the point of this guide is about the real-time database.

Page 1 and 2 are connected by routing. Very similar to part 1.
Let’s see how routing works.

// routes.dart
case AWSRealtimePageRoute:
  return _getPageRoute(AWSRealtimeSocketTutorialPage(), settings);

case AWSRealtimeChatPageRoute:
  String userName = routingData['userName'];
  return _getPageRoute(
    AWSRealtimeSocketTutorialChatPage(
      socketChannel: HtmlWebSocketChannel.connect(
        "wss://us2q8s4g99.execute-api.us-east-1.amazonaws.com/dev"),
        userName: userName,
      ),
  settings);

AWSRealtimeSocketTurorialPage is the page where the user enters the id.
AWSRealtimeSocketTutorialChatPage is the actual chat page.

Let’s see codes first.

Seems a lot but mostly they are just UI.

What happens is when a user sends a message, the new message is created by createMessageUser lambda function. Then DynamoDB Stream function gets all connected users and sends signs using the WebSocket. On the client-side, whenever it receives a message through the WebSocket, it updates messages.

Now let’s test this.
First, run this in google chrome.

flutter run -d chrome

Then the following is displayed:

a landing page with user input

Enter the id and enter the chat room. Then,

It’s a clean chat room. Nobody said anything yet.
Let’s say something.

Again, this app differentiates users by their IP addresses. We need to fake a user in order to make it look like a real chatting.
Let’s run the following code.

the serverless command to run the lambda function locally

Then you’ll receive this message anytime.

Let’s check the DynamoDB and see how the table looks like,

DynamoDB table for realtime chat

That’s it!
For improvements, it’s now your journey to take.
Thanks for reading and I’ll see you later!