This is a chat application built using React Native, integrated with a custom API and WebSocket for real-time messaging. The app allows users to set their username, create or join a chat room, and communicate with others in real time.
Set Username Screen: Allows the user to set their username. Rooms List Screen: Displays a list of available chat rooms. Create Room Screen: Allows users to create a new chat room. Chat Screen: Once a room is selected or created, users can see the last 10 messages and send new ones. Messages are updated in real-time using WebSocket.
Node.js (>= 14.0.0) React Native (>= 0.65.0) npm or yarn package manager
- Clone the repository Clone this repository to your local machine using git:
git clone https://github.com/Adbhutashra/chatapp.git
- Install dependencies Navigate to the project directory and install the dependencies:
cd chatapp npm install
yarn install 3. Run the app To run the app, use the following command to start the Expo development server:
npm start
yarn start This will open the Expo developer tools in your browser. You can scan the QR code with the Expo Go app (available on both Android and iOS) or use an Android/iOS simulator to view the app.
- WebSocket Setup Ensure that the WebSocket URL provided in the app (ws://chat-api-k4vi.onrender.com) is correct. If you're using a different WebSocket server, replace the WebSocket URL in the code to point to the correct server.
Functionality of the App
- Set Username Screen When the app first loads, the user will be prompted to set their username. This username will be used for identification in the chat rooms.
The user enters a username and presses the "Set Username" button. A unique user ID is generated upon signup via the API. 2. Rooms List Screen Once the username is set, users are shown a list of available chat rooms.
Users can either: Join an existing room by selecting one from the list. Create a new room by clicking the "Create Room" button. 3. Create Room Screen If the user chooses to create a room:
A unique room ID is generated. The user is automatically taken to the Chat Screen for the newly created room. 4. Chat Screen After a room is selected or created, users are taken to the Chat Screen where:
The last 10 messages are loaded from the server. Users can send new messages via WebSocket, and they will be displayed in real-time for all users in the room. A Snackbar message appears when a user joins or leaves the room.
-
Real-time Messaging Messages are sent via WebSocket and displayed immediately to all users in the room. A unique message ID is generated for each new message. The WebSocket ensures that the user sees all messages instantly, with no need to refresh the screen.
-
Join/Leave Room Notification When a user joins or leaves a room, an event is broadcasted to all connected clients. The app will show a notification in the form of a Snackbar with the message has joined/left the room.