Context
I am working on a React webapp which has to do the following :
Users access to a webpage using one common URL (about 10 thousands users max)
There's a second URL for "admins".
Each admin can create a "room" and transmit the room ID to some users (max 40 user per room). The room will be open for 2h max.
Once users access the room, they can transmit infos by clicking on a button (like Task 1 done by clicking on a button next to Task 1)
I'm thinking also about adding a chat where users can chat with the admin of the room.
This webapp will be hosted on an Apache server which has already other apps in it.
Issue / Solutions ?
I'm trying to figure out which tools (database, websocket) I should use for this project and I would like some feedback considering the relevance of my initial plan (and suggestions for improvements).
Server : using node.js and the ws library (I'd like to avoid socket.io which seems a bit heavy) I can handle the communication between users and admin. From what I remember I will have to do some configuration on the Apache server for node.js to work.
Database : Unfortunately I can't use databases like Firebase and I was thinking about using a database which I'm already using on my server (MariaDB) to create a database for each room, storing which task was done by which user, and also the messages sent from a user to an admin. But I've seen a tutorial on how to make a Chat Application in React, which was using LocalStorage instead of a database.
Safety : I'd say that this kind of app can have serious safety issue, but have no idea if some tools can prevent the most common attacks...
Conclusion
So, all in all, I'm thinking about using ReactJS + node.js + ws library + LocalStorage instead of a DB, all of this on an Apache Server. Does it seems like a mildly convenient solution for this project.
I realize that my question is a bit far fetched, but I don't have the experience to know the tools for such a project.
Thanking you all in advance.
Related
I'm currently working on an analytics webapp with a react frontend and node (express) backend.
Describing the functionality in a nutshell:
A user will be able to login on the website, search for a YouTube username and then the YouTube API is called, the data will be stored in a mysql db via my express API and also the data will be used to calucalte some statistics which afterwards are displayed in a dashboard.
Now I was wondering if I should:
Call the YouTube API from the frontend, i.e. inside my react code, do the calculations display them and and then store it in the DB via my express API.
Or, from the react app call an endpoint in my express API that will then call the YouTube API, store the data in the DB and then pass on the data to my react app.
Are there any best practices or up-/downsides to either approach?
When answering questions like these, it's important to remember that the client-side is different for each and every user that visits your website, their internet speed, their GPU & CPU power, etc., but the server is most commonly held in a stable container and much more powerful than a client.
The proper way would be the following:
1. Obtain a search query from a client
Meaning you should get the user's search query from an input, or any other form of control (text area, checkbox, etc.), this way client is doing the least business logic, as it should. The client should always focus more on UI / UX rather than business logic.
2. Send query to the server
Let the server use the query you've just obtained from client, call the youtube api from the server (either explicitly using Axios, or find a node.js youtube library), and do all the necessary calculation on the backend
3. Send processed data to the client
Let client receive the data in the form which is ready for use (iterations, mappings, etc.) - again separating concerns, server - business logic, client - UI / UX
Now to be fair, the example you have will most commonly be done all on the client-side, since it is not as computationally heavy as other enterprise examples, but this is a good rule to follow for big projects, and no one would really complain if you did it this way, since it would be the proper way.
I am trying to build a react-native application and to do so, I am following this tutorial : https://www.youtube.com/playlist?list=PLB97yPrFwo5hMR8znwt0NqgmmqzoPemnT
My application is like a form. People must enter some data into some fields and they will be sent into a database. People can later see their form from the application. So it is like simple a CRUD todo list application.
However, I do not want to use on-demand cloud computing platforms (AWS, GCP, OVH, ...) to store my data. I have my own server at home (NUC Intel) and want to use it as the application's server (store the data in there).
On my server I want to have a mongodb database and make it available from any computers that request it with the correct credentials. I would add firewalls as well for security.
This way, the react native application will be able to access read and write from this database wherever they are in the world as long as they have internet available.
As my backend I will use nodejs and express.
As my front end React Native and Redux.
Any ideas or tutorials I could follow ? I have been looking a lot but all the tutorials end by storing their database in GCP or AWS ... So is it possible to access mongodb database from a different network? Or would MySQL be a better solution?
Have small app (My first Node js App), where I want add changing real-time content.
For example I have a common url which have list of content link, when user click on particular link it will open its correspondence link.
I have teacher and student role in the app so if teacher open the specific content(From the common url page) then it will automatically open that content for all student who have common url.
Please give me any Idea to implement this functionality and please tell me any plugin who have same functionality for real time content change.
One way, probably the easiest would be to use websockets, an easily manageable choice is socket.io npm package. What makes websockets different from http requests is the direction of the data flow. While http is pull based, meaning that a request has to be made to the server in order to get a response, websockets - once the connection is established - are or at least can be push based, meaning that the server could push out content without having to get a request from the client. In your situation, the teacher and the studens would all have an active websocket connection with the server. When the teacher clicked on a certain view, it would push the view’s data requirements to the students without any interaction from their side and the view would update on their screens according to the pushed data.
Look into how websockets work and try to experiment with a basic socket.io setup.
Is there a way to do the following in a SPA:
Add User
Update list of users, for all other logged in users, with the added user if they are in the User List Module of the application. Do this without a chron job constantly checking if there is a new user.
Almost like forcing a response without a Request. Is this a Unicorn?
I am trying to see if there is an efficient way of doing this.
Technologies are NodeJS, Express, and React on the client.
You could try setting up a websocket connection between your logged in users and your server. That way, you would be able to push a change (like a new user being added) to all your clients. However, all the clients would still need to be constantly online. Try looking into socket.io as a gentle introduction to websockets.
You could also try looking into WebRTC and other P2P web technologies, though I'm not sure if that would help you in any way.
I have a small Node.js HTTP server that does requests to a mongo database (with the mongoose module).
What I want to do is query the database, store it in a variable (array) and send it to the client.
Because ideally, when the user clicks on one of the buttons on the html page, the JavaScript will pick-up the event and change the appearance of the website by showing calculations based on data that is stored in the database.
The only way I could come with was just "transferring" the database content to the client browser but if anyone can come with another solution that would be fine too !
So basically my question is :
How can I pass a variable from the Node.js server to the client browser when serving a page ?
Thank you in advance !
If you will be doing more than a couple of these types of transfers, I recommend looking into Socket.IO.
It's a layer that provides quick and easy communication between Node.js servers and web front-ends, by abstracting web sockets when available, and falling back to other transports (such as JSON-P or Flash) when it's not available. Basically, you would call io.emit('something', {yourdata: here}), and it is easily received on the other end. All of the serialization is done for you.
http://socket.io/
Give their demo a shot to see how it works.