sudheer121 / study-room

[Under maintenance] Connect and study together with friends over text and voice channels, over a click of a button. Web application for chat and audio streaming.

---

Study-Room

Chat, Talk, Study....

Study, collaborate, conference ... over click of a button.

---

A fully functional 🚀 web application where students create/join rooms and communicate using text and audio channels. No registration required . The application connects peers using WebSockets and WebRTC. Check it out here.

New Features

• Generate room ID and share with friends
• Directly connect to room with shared link, valid for 12 hours
• Better UI

Installation

Clone the repo

git clone https://github.com/Sudheer121/Study-Room.git 

Start client and server in different terminals

cd client 
npm i 
npm start

cd server 
cp .env.example .env
npm i 
npm start

You are good to go !!!! .

Note : The server uses a Twilio API (for TURN servers) for voice chat. Not required locally

---

Desktop and Mobile Views

The application is compatible with both desktop and mobile phones. 

Blog describing how the entire system works

• Checkout the blog.

Features

• Chat using text and voice channels
• Easy to use UI with everything on one screen
• Mobile Compatibility
• Connect with multiple people by choosing unique room ids

Technologies Used

• Server - Nodejs
• Client - Reactjs
• Chat - WebSockets
• Voice - WebRTC

The need of WebSockets and WebRTC ( short summary )

What's the best application level protocol for enabling a bidirectional communication channel(i.e both client and server can update each other at any time) ?. HTTP works fine when the client has to request data fewer times. HTTP opens up a connection and closes the connection as soon as it gets required response. In case of a chat application we continuously need to listen for data from server, one solution is keep requesting the server for data every few milliseconds, but its resource consuming for both the sides. The solution is WebSockets, it enables a full-duplex bidirectional communication, that is, the client is always ready to listen for data pushed by server. But WebSockets are still not peer to peer, in case of audio/video streaming between multiple peers, creating a direct peer to peer connection is a better option (because loads of data is being streamed), but this is also one of the most difficult things to do. WebRTC helps us create a direct peer to peer connetion. WebRTC is one of the most complex communication protocols because it tries all possible ways to create a peer - peer connection, if it still fails then the data is relayed via a TURN server.

---

Pull Request

Steps for pull request are a bit different than installation mentioned above.

Fork the repo

Clone the forked repo locally using git clone ==> git clone forked_repo_link.git

Checkout to a new branch, name it appropriately ==> git checkout -b new-feature-xyz

Make the changes and commit them

Push changes to the forked repo ==> git push origin

Start a pull request ==> After pushing, you will see a Compare and Pull Request button on forked repo

study-room's Issues

An extensive problem for my previous issue

I followed your procedure and the server folder(node index.js) works fine but when I do npm start in client folder I get this error

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"webpack-dev-server": "3.11.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack-dev-server was detected higher up in the tree:

C:\Users\Lenovo\node_modules\webpack-dev-server (version: 3.11.1)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack-dev-server" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
   This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if C:\Users\Lenovo\node_modules\webpack-dev-server is outside your project directory.
   For example, you might have accidentally installed something in your home folder.

7. Try running npm ls webpack-dev-server in your project folder.
   This will tell you which other package (apart from the expected react-scripts) installed webpack-dev-server.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code 1
npm ERR! path C:\Users\Lenovo\Desktop\Video\Study-Room-main\client
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c react-scripts start

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Lenovo\AppData\Local\npm-cache_logs\2021-03-06T07_52_04_228Z-debug.log

Thank you in advance and I had a doubt if I comment the twilio part of code the project should run without the twilio api's and sdk right

Feature: Listen button

For now all users that can join the audio stream are admins. I've extended userController by

    const role = users.length === 0 ? 'admin' : 'visitor'
    const user = {id,name,room,role};
...
    const role = usersInVoice.length === 0 ? 'admin' : 'visitor'
    const user = {id,name,room,role};

and replaced user:admin with user:user.role. In result, we have two roles of users.
Furthermore, visitors may get Listen button instead of admn's Join voice

Fails locally

http://localhost:3000/ -> Generate room
Unhandled Rejection (Error): Request failed with status code 404 on http://localhost:3000/undefined/generateRoomId

Add auto room ID generation feature

• Add a button on homepage that generates a new room ID.
• You may or may not communicate with the server for generating unique room ID. Tip => external APIs ?
• For pull request => fork and create a new branch named "room ID feature" and then make changes

Websocket error while running the app , also existing users don't load on page refresh

WebSocket connection to 'wss://localhost:5000/socket.io/?EIO=3&transport=websocket&sid=UxButrskHWm9Lp1aAAAA' failed: Invalid frame header.
Also users don't load on page refresh.
Please Help !!
I am learning Webrtc and you have implemented it successfully. Please Guide me. It would be my honour to learn webrtc from you.

Web Client always not working？

Hello to the author, why did I press the generation button on the page after launching the service and the client there was no response? I have tried to redeploy many times and still has no effect.

Not able to run locally

I am not able to run it locally after npm install and when I run npm start I get the error start npm ERR! missing script: start
I tried starting from the package.json but when I successfully started it and viewed it in localhost3000 I am getting such as 'react-scripts' is not recognized as an internal or external command, operable program or batch file and a suggestion yyou can also update readme.md so that it will be helpful to people
please help me thank you

Facing the same issue

I am facing the same issue. I have checked your website. I have tried the mentioned steps in readme. I have tried the server side part of your code, Still I'm facing the same isssue. Please can you help me debug it . When I try to run your repo locally users don't reload and I face an Invalid Frame Header issue as well. Have you made changes while hosting the server side of the code because that github repo I tried to run locally does't load users , but your website does them well. Please guide me