Giter Club home page Giter Club logo

chattr's Introduction

ChattR

Experimental chat app powered by WebSockets & WebRTC

What is ChattR?

ChattR is a real-time text & video chat application based on modern web technologies. The app consists of a React based frontend and a Node.js REST API, that communicates with a MongoDB database.

The video & voice in calls in ChattR are handled by the open source OpenVidu video call application platform, which uses Kurento WebRTC media server under the hood. The real-time messaging is made possible with WebSockets using Socket.IO

Features

  • Sign in with Google account
  • Create public or private chat rooms
  • View and send text messages with optional attachments
  • Make voice and video calls with other room members
  • Record and download video conferencing sessions

Screenshots

Login screen Messages screen Call screen Create room

Deployment

How to deploy for development

ChattR is a Node.js application at it's core, and uses yarn for package management, so install those respectively.

The ChattR backend needs a MongoDB instance for data storage. Install MongoDB or set up a database in MongoDB Atlas.

If you want to be able to make video & voice calls using ChattR, you must deploy OpenVidu platform on premise, or to the cloud. The OpenVidu Call application is not needed, you can disable that.

When you have MongoDB and OpenVidu ready, you can start up the development environment following these steps:

  • Clone the ChattR repo
    • git clone https://github.com/nyakaspeter/ChattR.git
  • Install dependencies with yarn
    • yarn install
  • Set up the environmental variables for the server in a .env file inside the server directory, based on the .env.example file
  • Once the variables are set up properly, you can start up ChattR in development mode
    • yarn dev (from the repo root folder)
    • If you use VSCode you can also use one of the pre-defined tasks to start the client, the server or both

How to deploy for production as standalone application

You can deploy ChattR as a standalone application with docker-compose. If you want to be able to make video & voice calls using ChattR, you must first deploy OpenVidu platform on premise, or to the cloud. The OpenVidu Call application is not needed, you can disable that.

When you have OpenVidu ready, you can deploy ChattR following these steps:

  • Install docker & docker-compose if they are not already installed
  • Clone the ChattR repo
    • git clone https://github.com/nyakaspeter/ChattR.git
  • Set up the environmental variables by renaming the .env.example file to .env and setting the values. See the notes in the file for more information.
  • Once the variables are set up properly, you can spin up ChattR with docker-compose
    • docker-compose up (from the repo root folder)

How to deploy for production as OpenVidu based application

You can deploy ChattR alongside OpenVidu platform using the same port and SSL certificate. This way you don't have to configure the connection between the two applications and they share the same lifecycle.

More information about deploying OpenVidu and OpenVidu based applications can be found in the OpenVidu docs.

The steps of deployment are the following (you can issue these commands on basically any modern linux distribution):

  • Enter root shell, you'll need it
    • sudo su
  • Install docker
    • curl -fsSL https://get.docker.com | bash
  • Install docker-compose
    • curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
    • chmod +x /usr/local/bin/docker-compose
  • Deploy OpenVidu platform
    • cd /opt
    • curl https://s3-eu-west-1.amazonaws.com/aws.openvidu.io/install_openvidu_2.20.0.sh | bash
    • cd openvidu
  • Clone the ChattR repo
    • git clone https://github.com/nyakaspeter/ChattR.git
  • Override OpenVidu's default configuration files
    • mv ./ChattR/docker-compose.openvidu.yml docker-compose.override.yml
    • mv ./ChattR/call_layout custom-layout
    • cat ./ChattR/.env.openvidu.example >> .env
  • Set up the environmental variables by editing the .env file, see the notes in the file for more information
    • Make sure that SUPPORT_DEPRECATED_API is set to false and not commented out! Otherwise OpenVidu will override the paths for the ChattR backend.
    • If you want to use the call recording feature, set OPENVIDU_RECORDING to true.
  • Once the variables are set up properly, you can manage the lifecycle of ChattR along with the OpenVidu platform with the following commands
    • Start: ./openvidu start
    • Stop: ./openvidu stop
    • Restart: ./openvidu restart

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.