Code Monkey home page Code Monkey logo

shehabadel / multi-user-distributed-text-editor Goto Github PK

View Code? Open in Web Editor NEW
4.0 4.0 2.0 31.04 MB

The final project of Distributed Systems course (CSE354). A multi-user distributed text editor project which allows real-time collaboration between users on documents. It is more like a Google documents clone. Tech Stack: Node.js, React.js, Redis, Docker, Socket-IO, MongoDB ReplicaSets

HTML 13.29% CSS 7.03% JavaScript 79.68%
mongodb nodejs realtime redis socket-io

multi-user-distributed-text-editor's Introduction

Hey, it's Shehab ๐Ÿ‘‹๐Ÿค–

LinkedIn Hashnode Sound Cloud

Anurag's GitHub stats

Founder of Stack Info

I am a SWE @ Halan, previously @ Sakneen, previously @ Siemens DISW, and Founder @ Stack Info. I have massive passion for everything related to computers especially fullstack web development, problem-solving and open-source contribution. I strive to build softwares that will leave an impact in people's lives. I am also a hardcore fan of FC Bayern Munchen and Daft Punk ๐ŸŽท

Daft punk

const shehab = {
  programmingLanguages: ["Typescript","JavaScript", "Java", "Golang", "Python", "C++","SQL"],
  stack: {
    backend: ["Node.js","Express.js", "TypeGraphQL", "Apollo GraphQL"],
    frontend: ["React.js","Redux","HTML5","CSS3","Bootstrap","Tailwind","jQuery"],
    databases: ["MongoDB","Mongoose", "Prisma", "PostgreSQL"],
    services: ["Redis", "SocketIO", "REST APIs","GraphQL"],
    
  },
  currentlyLearning: ["Docker๐Ÿณ", "Kubernetes", "Nginx"]
};

Thanks for coming by!

multi-user-distributed-text-editor's People

Contributors

emankhaled1999 avatar farah2001 avatar shehabadel avatar yakan23 avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

multi-user-distributed-text-editor's Issues

Database Replication - MongoDB ReplicaSets

  1. Create mongos directory with folders db1, db2, and db3
  2. Run mongod --replSet Dist --dbpath mongos/db1 --port 27018
  3. Run mongod --replSet Dist --dbpath mongos/db2 --port 27019
  4. Run mongod --replSet Dist --dbpath mongos/db3 --port 27020
  5. In case replicaSet error or it is not initiliazed
  • Run mongosh --port 27018
  • Write
rsconfig={_id:"Dist",
members:[
{_id:0, host:"localhost:27018"},
{_id:1, host:"localhost:27019"},
{_id:2, host:"localhost:27020"}
]}
  • Run rs.initiate(rsconfig)
  • It must be working now!
  1. Run rs.status() to make sure it is working well.

Setting a name for each client

Each connection established by the client (frontend), we can generate a random name based on a list of names stored and a sequence of numbers. for example (BigGuy420). Then we set the name of the socket to be this randomly generated name.

client code

//During initilization
randomName = cookies.get() || randomlyGeneratedName()
socket.data.username= randomlyGeneratedName() //BigGuy420

server code

console.log(data.username) // 'BigGuy420'

Steps to follow

client code

  1. Check if there is a username exists for the current session
  2. If there is not, create a randomName using randomlyGeneratedName() function, and set the name for the current session
  3. Set the socket.data.username to be equal to randomName

server code

  1. Console.log the socket.data.username like logging the clients connected and disconnected.

Scaling

  • Installed HaProxy on virtual machine
  • Create configuration dist.cfg
frontend distFE
	bind *:80
	timeout client 1000s
	mode http
	use_backend distBE

backend distBE
	mode http
	timeout server 1000s
	timeout connect 1000s
	server ws1 https://dist-ws1.herokuapp.com/
	server ws2 https://dist-ws2.herokuapp.com/

  • Run in a terminal haproxy -f dist.cfg

To-Do

  • Client code
  • Server code
  • Load-balancer using NGINX or HAProxy
  • Database replication
Same ip, different port numbers
  • Publish/Subscriber Architecture using Redis or RabbitMQ
Or consider  pinging of clients to each other

Managing WebSockets Connections

Need to find a way to establish the WebSocket connection between the client and server using the reverse proxy or the load-balancer

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.