GithubHelp home page GithubHelp logo

vijethph / socketchat Goto Github PK

View Code? Open in Web Editor NEW
1.0 3.0 0.0 3.35 MB

A Web Chat Application based on Express and SocketIO Frameworks.

Home Page: https://socketchat-app.onrender.com

License: GNU General Public License v3.0

HTML 39.64% JavaScript 17.58% CSS 12.35% Dockerfile 4.94% TypeScript 25.48%
socket-io html-css expressjs ioredis nodejs redis typescript

socketchat's Introduction

SocketIO Chat

Socket Chat

Status GitHub issues GitHub forks GitHub stars GitHub Pull Requests GitHub license Docker Builds Deploy to Render Made with TypeScript


A SocketIO based online chat application which can be deployed and run via Docker and Localtunnel
Made with TypeScript, ExpressJS, ioredis and Bootstrap

๐Ÿ“‹ Table of Contents

๐Ÿ“ธ Screenshots

Login Page New User Entry Chat Screen
Login Page New User Entry Chat Screen
Login Page Notification to existing users on new user join Chat Screen in a room
Sending Location Location Details
Sending Location Location Details
Location Details sent as a modal link Location Map displayed in a modal

โ„น๏ธ About

This is a chat application that can be used to connect online with friends by hosting one server at any particular point. It uses Express and SocketIO frameworks to establish and maintain the connection, and Redis to broadcast events to a subset of clients (users in a room).

Users can pick a room and join the chat and send messages which can be read by others. They can also send their location co-ordinates to others, which is displayed in a map under a modal.

โš™๏ธ Getting Started

Follow these instructions in order to get a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on as a live server.

๐Ÿ’พ Prerequisites

node.js>=16 and npm>=7 are required.

After installing, check their versions using these commands

node -v
npm -v

๐Ÿ’ป Installing

Clone this project and open this project in terminal.

Install Dependencies.

npm install

Pull Redis image from DockerHub and run it in background.

docker pull redis:6.2
docker run --name redis-cache -p 6379:6379 -d redis:6.2

Create a .env file in the project folder and add the following entry:

REDIS_URL="redis://localhost:6379"

Finally, run the project using following command and check the output at http://localhost:3000 in your browser.

npm start

The following output will be shown in the terminal after running above command.

listening on PORT:3000

Another way to install this app is to use Docker Compose. Run this command to start the app:

docker-compose up

This will run the app at http://localhost:3000, which can be seen in your browser.

๐ŸŒ Usage

This application can be used by others if it is deployed using the steps in deployment. For usage by a single user, the above installation steps are sufficient.

๐Ÿš€ Deployment

After starting the server, open another terminal, connect to the internet and type the following

npm install -g localtunnel
lt --port 3000

Now the project is deployed. It will show an output giving a website address like this:

deployed at [email protected]

Ask your friends to open up the specified url and start chatting.

โ›๏ธ Built Using

โœ๏ธ Authors

๐ŸŽ‰ Acknowledgements

  • Thanks to CPMA Session conducted by ATS Learning Solutions
  • Inspiration: Project Ideas for Javascript
  • References: All Youtube Channels for using SocketIO.
  • Brad Traversy

socketchat's People

Contributors

vijethph avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.