Results：

• Create user account and Login

  • Build email input
  • Create user by email on server
  • Login by email on server
  • Create / Login user on browser
  • Redirect to chat room UI

• Create chat room and show chat room list

  • Create Room DynamoDB and define schema
  • Create Connection DynamoDB and define schema for recording current connecting users
  • Create Room by AWS Lambda
  • Create Web socket API Gateway and connect with create-room Lambda
  • Build create room dropdown and button UI
  • Create User-Room DynamoDB and define schema for quickly get user's room list
  • Connect to Web socket Gateway and corresponding action to
  • Build chat room list UI
  • Test real time new room notification for notification

• Join chat room and send message

  • Create Message DynamoDB and define schema
  • Create Message by AWS Lambda
  • Create Web socket API action Gateway and connect with send-message Lambda
  • Build send message input chat message UI
  • Store new message to DynamoDB
  • Test new message is sent to the participant in the same room
  • Query message history from DynamoDB and show on message UI
  • Scroll to bottom when new message is sent for everyone

Results：

• Update creating a room by selecting single user to many users
• Update room list UI able to show multiple users
• Test multiple users can send message to others in real time

Problem：

• Unnecessary multiple connections builts due to multiple tabs opened by the same user

Result：

• Setup Shared worker for Web socket connection
• Test multiple tabs and windows can accept 'create_connection' action from Shared worker
• Test multiple tabs and windows can accept 'get_user_rooms' action from Shared worker
• Test multiple tabs and window can disconnect websocket when all tabs & windows are closed
• Test multiple tabs and windows can accept 'create_room' action from Shared worker
• Test multiple tabs and windows can accept 'create_message' action from Shared worker
• Test if multiple tabs & windows only share one connection
• Test if original version is required multiple tabs & windows connection

Problem：

• Unsent text and image message will disappear

Result：

• Be able to upload and preview uploaded image by antd
• Create chat room indexedDB database
• Create draftMessage objectStore(table) with keyPath: ${roomId} to save draft text and image messages
• Save text message when text input change
• Save image message when change
• Show draft message when open chat room
• Fix wrong draft message in chat room by upgrade indexedDB with draftMessage objectStore with keyPath: ${userId}_${roomId}

Problem:

• Slow message update until websocket send, client update first will be ideal
• No idea of failed message, and retry mechanism

Result:

• Update client messages data structure to map, to quickly get corresponding message by message_id
• Optimistic update by adding new message in client side, not wait until websocket server send
• Create outgoingMessage objectStore in indexedDB to store failed messsage
• Handle message when failed, store to indexedDB
• Add retry mechansim to resend message, and update the correct message in client messages state