-
Notifications
You must be signed in to change notification settings - Fork 3
Home
Welcome to the chat-react-semantic
wiki!
The integration of the AWS
backend with the ReactJS frontend with WebSockets forms a cohesive and efficient web application framework.
Project Version | Commit | Code Version | Commit |
---|---|---|---|
project v0.0 | Create Vite React project, add dependencies, layout and CSS | ||
create Vite React project | GitHub code v0.0.0 | a4ef7 | |
add layout and dependencies | GitHub code v0.0.1 | 8fc147 | |
add semantic css placeholder chat
|
GitHub code v0.0.2 | d389c3 | |
project v0.1 | Components and SocketProvider.js
|
||
ChatSandBox new domain and SocketProvider.js
|
GitHub code v0.1.0 | 3da95a | |
SocketProvider.js and tree component chat by component
|
GitHub code v0.1.1 | 20b2d7 | |
SocketProvider.js and implementation of fake-login with socket actions |
GitHub code v0.1.2 | 81be514 | |
SocketProvider.js and implementation of chatInfo with userId |
GitHub code v0.1.3 | 32ad18 | |
SocketProvider.js and implementation of coupled conversation with socket actions |
GitHub code v0.1.4 | b688b95 | |
SocketProvider.js and implementation of decoupled conversation & Semantic with socket actions |
GitHub code v0.1.5 | 29390c | |
project v0.2 | Fetch, display and select contacts & groups, chatMenu.jsx
|
||
Fetch logged in message & create user literal Object on ChatRoom.jsx
|
GitHub code v0.2.0 | 59ffd | |
Fetch & display chats on ChatMenu.jsx
|
GitHub code v0.2.1 | cb06c | |
Select chat from chats, selectChat & user on ContactsList.jsx
|
GitHub code v0.2.2 | dcaa8 | |
Set chat on sever AWS connections table activeConnectionsPool by login websocket |
GitHub code v0.2.3 | 82059 | |
Saving Conversation to Local Storage
|
GitHub code v0.2.4 | 6f71ae | |
project v0.3 | Create chat in ChatMenu.jsx & CreateChat.jsx
|
||
Create chat and add contact placeholders in ChatMenu.jsx
|
GitHub code v0.3.0 | 03523f | |
Create chat: <Form /> in CreateChat.jsx
|
GitHub code v0.3.1.1 | b243d0 | |
Create chat: <Form /> with CSS in CreateChat.jsx
|
GitHub code v0.3.1.2 | d7240 | |
Create chat <Form /> with CSS in CreateChat.jsx
|
GitHub code v0.3.1.3 | cd461d | |
Create chat: Avatar in CreateChat.jsx with S3 AWS (API Rest or SDK) |
GitHub code v0.3.2 | 6bc5f | |
Create chat: reducer CREATE_CHAT operation ChatMenu.jsx with send websocket |
GitHub code v0.3.3 | todo |
We are going to use this Lab#RE05-1 as a camp base from where develop new features:
- Lab reference: Lab#RE05-1
- Code AWS Server: Lambdas, DynamoDB, etc
- Lab deployed on Amplify AWS
- GitHub code React & SocketProvider
Before this new four features we should populate the DynamoDB with fake contacts and fake conversations.
First at all, clone:
git clone AlbertProfe/chat
Then, install all dependencies:
npm install
Note
This project is a React application created using Vite, with dependencies including:
- Websockets to connect with AWS Server
- Hooks:
useReducer
,useState
,useContext
- Semantic CSS
- Lab reference: Lab#RE05-1
AWS, Amazon Web Services, architecture as a server-side:
- Lambda
- DynamoDB
- API Gateway
- Amazon CloudWatch
- AWS Identity and Access Management
Note
WebSockets is a communication protocol that enables real-time, bidirectional communication between a client (usually a web browser) and a server. It provides a persistent connection that allows for efficient data exchange without the need for repeated HTTP requests.
WebSockets are particularly useful for applications that require instant updates, such as real-time chat applications, collaborative editing tools, and live data streaming.
In React, you can leverage the power of WebSockets by using libraries like Socket.IO or the native WebSocket API. These libraries enable you to establish a WebSocket connection, send and receive messages, and handle events for seamless real-time communication in your React applications.
Principles:
- No animation dependencies
- Simple declarative component APIs vs brittle HTML markup
- Complete keyboard support
- Complete SUI component definition support
- Completely documented
- Completely tested
- Accessible
npm i semantic-ui-react
React- AWS - WebSockets - Semantic