Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/arunishrajput/ar-chat-app

Real-time chat application using Node.js and Socket.IO with secure configuration.
https://github.com/arunishrajput/ar-chat-app

backend chat-application css frontend html java nodejs real-time-chat render socket-io vercel websocket

Last synced: 1 day ago
JSON representation

Real-time chat application using Node.js and Socket.IO with secure configuration.

Awesome Lists containing this project

README

        

# AR Chat App

AR Chat App is a real-time chat application that enables users to communicate through text messages. It leverages Socket.IO for real-time communication and is built with plain JavaScript on the client side.

## Features

- Real-time messaging using Socket.IO
- User identification with customizable usernames
- Timestamped messages for better context
- Audio alerts for different chat events
- Online users list
- "typing..." indicator

## Deployed Application

You can try out the AR Chat App without setting it up yourself! Access the live version at: [AR-Chat-App.vercel.app](https://ar-chat-app.vercel.app/)

(Frontend deployed on [Vercel](https://vercel.app/) and backend deployed on [Render](https://dashboard.render.com/))

## Prerequisites

- Node.js (version 14 or higher)
- A modern web browser
- An internet connection

## Installation

1. **Clone the repository:**

```bash
git clone https://github.com/arunishrajput/ar-chat-app.git
cd ar-chat-app
```

2. **Install dependencies:**

```bash
npm install
```

3. **Set up environment variables for `nodeServer`:**

Create a `.env` file in the `nodeServer` folder of your project and add the following line, replacing `PORT_No`, `CLIENT_1_URL` and/or `CLIENT_2_URL` with your port no and actual client URLs you want to allow:

```bash
PORT=PORT_No //example:8000
CLIENT_1_URL=CLIENT_1_URL
CLIENT_2_URL=CLIENT_2_URL
```

4. **Update the client-side code:**

> **Note:** To get your `SOCKET SERVER URL`, you have to do [5th Step (Run the Server)](https://github.com/arunishrajput/AR-Chat-App?tab=readme-ov-file#:~:text=Run%20the%20application%3A)

- **Update `client.js`:** In your client JavaScript file (`client.js`), modify the Socket.IO initialization URL with your actual SOCKET SERVER URL. Change the following line:
```bash
const socket = io("https://ar-chat-app-h1pj.onrender.com/"); // SOCKET SERVER URL
```
To
```bash
const socket = io("YOUR_SOCKET_SERVER_URL"); // SOCKET SERVER URL
```
Replace YOUR_SOCKET_SERVER_URL with your actual SOCKET SERVER URL.
- **Change the Socket.IO script source in `index.html`:** In your HTML file (`index.html`), update the Socket.IO script source to use the actual SOCKET SERVER URL. Change the following line:
```bash

```
To
```bash

```
Replace YOUR_SOCKET_SERVER_URL with your actual SOCKET SERVER URL.

5. **Run the application:**

Start the server and get your `SOCKET SERVER URL`:

```bash
node index.js
```

## Usage

1. Open the chat application in your browser.
2. Enter a username when prompted.
3. Start chatting with other users!

## Audio Notifications

The application includes audio notifications for different events:

- Join sound when a new user joins the chat
- Send sound when a message is sent
- Receive sound when a message is received
- Left sound when a user leaves the chat

## Contribution

- Feel free to fork this repository, create a feature branch, and submit a pull request. Contributions, issues, and feature requests are welcome!

## Acknowledgments

- [Socket.IO](https://socket.io/)
- [Node.js](https://nodejs.org/)