Web Messages

• Milestone Messaging
• Presentation Messaging

---

Documentation on Web Messages.

Contents

1. Introduction

• Stacks and resources I am using here
• Brief description of what we are going to create
• Important things to know before starting to work on Web Chat

2. Code Preview

• GrahpQL schema
• Chat backend
• ChatMain
• JoinChat
• quoted out code beneath the chat
• future assignments

Introduction

Stacks and resources I am using here:

• React Ts
• AWS Amplify
• AppSync GraphQL API
• Amazon DynamoDB

Brief description of what we are going to create

We are building a web chat application using AWS Amplify and AWS AppSync GraphQL. The chat should be able to send messages to other users and provide a contact list of all your contacts within Mostpros. We achieve this by building an AppSync GraphQL API where the GraphQL schemas specify which information is stored and which are sent. We also create a button somewhere in Mostpros (probably in the job list contact button). This button connects to the person you want to chat with and creates a new channel (id).

Important things to know before starting to work on Web Chat

• You Know how to use React TS: https://www.typescriptlang.org/docs/handbook/react.html
• You Know how to use Amplify: https://docs.amplify.aws/
• You have read in (API) GraphQL and you know what it does: https://docs.amplify.aws/react/build-a-backend/graphqlapi/
• You have read in example chat docs (this the docs i have used to make the web chat): https://dev.to/codebeast/build-a-multi-user-chat-app-with-aws-amplify-3915

Code Preview

In here i am going to explain in detail what the functions and GraphQL functions do and how to make them.

GraphQL schema

GraphQl Schema is a important amplify tool that we are using to make a Api for the chat. So to create a GraphQL schema you have to go web/amplify/backend/api/schema.graphql, in there you find a model that defines the value's you gonna use to send data to the appsync/database and back into the chat. so what we have in our model is:

type Chat @model @auth(rules: [{allow: public}]) { id: ID! text: String! email: String! members: [String!]! sortKey: String! }

• Id. that is the custom generated id for the chat
• text. is the message in the chat
• email. is the user in chat
• members. are all the people registered in a channel
• sortKey. is the channel id that defines the unigue channel
• (ChannelId, this what makes and define the generated page id but this not stable yet)

if you want to add new rules or new additions in the chat, then you have to make new value's in the graphql. if you have added a new value into the graphql schema you have to push amplify and accept all the overwritings within the graphql for everything to update amplify push. If the folder graphql web/src/graphql isn't there, added or updated, you can fire this command amplify codegen (typescript) in the terminal to update/add graphql.

Within the graphql are some components that we are using to make/update/store chat messages. you can use these components by simply importing it into the file where the chat stands. little description what these componments do:

• mutations: creates a message with information provide by the chat docs: https://docs.amplify.aws/javascript/build-a-backend/graphqlapi/mutate-data/
• queries: Query reads and filters information (graphql schema) and filters them to send the data to the chat https://docs.amplify.aws/javascript/build-a-backend/graphqlapi/query-data/
• subscriptions: Subscriptions is a GraphQL feature that allows the server to send data to its clients when a specific event happens. For example, you can subscribe to an event when a new record is created, updated, or deleted through the API. You can enable real-time data integration in your app with a subscription. https://docs.amplify.aws/javascript/build-a-backend/graphqlapi/subscribe-data/

Well this is what we have in our Graphql schema. if need more information about this topic visit the amplify docs.

Chat backend

in this part i'll be discussing about the few important functions within my chat. Most of the functions are not hard to read if you have a good basic understandment of javascript or i do not know why you are here, anyway let's start.

Important to know: user.attributes.email is the person logged into the website and recipientEmail is the person that you have tagged in 'make new chat' button.

Handlers. In the code i have multiple handlers functions that do variations small things to the chat So in the code we have:

Booleans and data catchers. so at the start of chat backend we have all the booleans and set(value's) these value's will be used to send data around chat backend functions.

const [chats, setChats] = React.useState([]); const [recipientEmail, setRecipientEmail] = React.useState(""); const [recentMessageEmail, setRecentMessageEmail] = React.useState(""); const [showJoinButton, setShowJoinButton] = React.useState(false); const [showConfirmedConnection, setShowConfirmedConnection] = React.useState(false); const [showAlert, setShowAlert] = React.useState(false); const [notificationMessage, setNotificationMessage] = React.useState("");

Functions

• handleSendMessage, this is the main important handler that creates messages with createchat mutation
• handleReceivedMessage, gives the recipientEmail a join button.
• handleStartNewChat, opens a input where you can put the recipientEmail in
• handleAlertInputChange, catches the recipientEmail en sends it to setRecipientEmail that turns into recipientEmail
• handleAlertConfirm, confirms that you want to chat with the recipientEmail and gives the recipientEmail a joinbutton so he connects to you in members
• handleAlertCancel, cancels the handleStartNewChat and recipientEmail connection.
• handleJoinChat, is the joinbutton that the recipientEmail receives for connection to you.
• In the end of Chat backend we export all the functions, make sure that the import functions are the as export functions.
• this is the main important handler that fetches value's and id's out of GraphQL query and display them in the chat.

ChatMain

This is the file where the chat stands, so it have all the imported functions from chat backend and some little logic.

At the start of ChatMain we have a useEffect() that sends the messages from the database to the chatbox by using query to find it and subscribe to send it in realtime.

After the logic of useEffect() we have the frontend of the chat. In the frontend we call all the functions from chat backend up.

At the end of the ChatMain we have AWS withAuthenticator. with Authenticator is a function from aws that gives the chat an registration check or form. so if you haven't already logged in Mostpros you'll be unable to view the chat and been given a registration form to login and use the chat, this way nobody can get into the chat without registration. This function stands at the end of the code by the export (it's literally one word but a important function).

On the web of ChatMain you see a chat box with chat input and a signout with another make new chat button. Signout says it for him self, you can sign out for testing.

JoinChat

So JoinChat is a button where you can connect into the chat. if you confirm the connection you'll be send to the chat. In future plans the handleAlertInputChange should pickup the email of the specialist profile email as recipientEmail.

quoted out code beneath the chat.

so the this quoted out code is the code with the pagination with ChannelId that is not yet stable. so in this code has pagination that when you make a new chat with handleAlertConfirm it will make a new generated page id as channel and sends you to that page. so the pagination works but for some reason the chatbox does not wanna display him self in the channel, however the other stuff in the chat page works fine. This was my last project that sadly i couldn't finish because my internship time ended. so that's why this code is quoted out for future use.

future assignments.

So the chat is still unfinished with many things to do that i couldn't do yet. so here i have some assignments you can work on.

assignment 1: So for this first assignment i have perfect project for you to learn the chat. So we need in this chat a way to send picture's so that people can show stuff. 1 you need to make a new value on th GraphQL schema to save the picture on the database. 2 you need on the frontend a input or sorts to put the picture file in the chat, this i'll leave it to you. just search on google upload foto or picture on the web and display js 3 find out how to send a picture in the chatbox, the query needs to read it and send it 4 use the handleSendMessage as reference because it sends the text and you gotta figure out that he also can send png/jpg 5 you can use this guide to figure this out, just skim through the guide and use it's elements: https://aws.amazon.com/blogs/mobile/building-a-full-stack-chat-application-with-aws-and-nextjs/

assigment 2: So the channel/pagination still doesn't work, i think all the tools are already made but you have to debug why the chatbox won't show up.

assigment 3: So i have made a file called ChatContactList that isn't used yet but this is the place where you can find your contacts (just like whatsapp) so contactList needs to display all the channels that the person is connected to. So if he wants to change to a existed channel that he is connected he can switch like whatsapp contactlist. So make sure that when a channel is made it will add a link into the contactList.

Wiki made by Timo Schuurman