Building scalable SPAs using websockets, how complex is it? - node.js

I am beginner in web technologies. While studying about frontend frameworks, I came to know that we run separate application servers for frontend and backend server(API).
e.g. If I am using vue.js, I'll be running a vue server for frontend and I'll be running another MEAN stack API server separately. Now my application will need to show real-time updates, I'll have to use websocket connection between my browser and frontend server which further will need websocket/webhook connection with my backend server(API). Now I am already aware of the scalability and session management issues with websocket connection. In this scenario, how should I build my application for better scalability and with less complexity? Is it possible to create a monolithic application server for frontend and backend? Will that be a good choice?

Is it possible to create a monolithic application server for frontend and backend? Will that be a good choice?
That choice is fine; start simple and you can break into microservices in the future. Unless this is for a large production system!
If you use something like express you can serve the Vue.js files using express.static, API endpoints using express.Router() instances, and the ws or socket.io module attached to express instance for websockets.
Now my application will need to show real-time updates, I'll have to
use websocket connection between my browser and frontend server which
further will need websocket/webhook connection with my backend server
This isn't the case. You can have your frontend (the app running in a browser) connect directly to the backend via websocket if you wish, no need to proxy via a frontend server. For session management look into JWT tokens.

You can go for socket.io library in Nodejs. It's simple and easy to use, The scalability and session can be handled by introducing Redis,
check https://socket.io/docs/using-multiple-nodes/

Related

Advise:: Does Laravel open multiple db connections on each user session?

I am communicating with a client who needs an app and backend for their company, they are a small ISP and they need a backend to monitor user usage and also an app.
So the IT Spec document that was submitted by a third party suggests using NodeJS as backend since its a single thread framework, no multiple db connections , I am used to Laravel for backend dev as so far there hasn't been any issues.
So I wanted some advise if Laravel or Node will be a better solution for this.

Frontend Backend communication clarification

Pretty new to web development so apologies for the probably obvious question.
I see everywhere that the frontend makes requests to the backend and not the client directly.
But let's say I have a react app, that runs on the browser of course, and it makes Ajax calls to the backend, so it's basically the client makes the call and not the frontend server which serves the index.html and whatnot.
Does that mean, from a security perspective, that I should permit access to both frontend and backend servers from clients?
Much thanks!
usually, today FrontEnd(FE) , it is just Codes that runs in the client browser.
generally speaking, Modern Architecture is built from FronEnd (code that runs in Client Browser like React, angular, HTML, JS etc.) that communicates with a server (Node JS, PHP, etc.)
a few years back there where a FrontEnd Server that generates the Client-side for the users that cold FronendServer (that server had FE DB etc) and that server communicated with BE server that kept more sensitive data.

Loopback and Express wiring

I am planning to build a new application with express (for frontend) and loopback for managing all APIs, hosted on different servers.
How would you typically architect this, would the app (browser) directly make http requests to loopback for data, or would all requests go through expressjs and user never interacts with loopback?
If its the former, how do you do session management? If its latter, would you need to recreate all routes even in express?
Would appreciate some help.
Disclaimer: I am co-author and a core developer of LoopBack.
LoopBack is using Express under the hood. Every LoopBack application is an Express application too, therefore you can use any Express compatible middleware (like session management) and define Express-based routes in your LoopBack project.
It's entirely possible to write a LoopBack application that's serving both REST/JSON API and front-end files, we have users successfully running this setup in production.
As for session management, I don't know what exactly are you asking about. In general, you handle sessions in LoopBack the same way you handle them in Express.
You may find the following resources helpful:
Defining middleware
Use cookies securely

Node.js - How to share sessions between http server and net server?

I'm trying to make server that helps http clients and net clients to connect between them, but I'm not sure that whether some module such as redis can help the server to share sessions or make connections from http to net.
Because I wanna use cluster (because of load balancing) to optimize speed in multi-core processors, I think the sessions must be shared.
Here is the server what I make
Using Redis is a good approach to save and share session details when using clusters. Read more on this approach here Nodejs Clustering and expressjs sessions.
Another approach would be to use Express Session module if your web application is developed using ExpressJS. This link https://medium.com/#karaxuna/how-to-share-session-across-mutiple-nodejs-http-server-instances-7d466389d123#.wrg84qel6 provides on how to configure Express Session module.

Angular2 + Laravel with Real time & WebSockets

I built an app and i'm planning to make a real time battle with Angular 2 and laravel. For example, you hit the "attack" button, and your opponent see his life going down in real time.
My app built with:
frontend: Angular 2
Backend: PHP Laravel 5.2
Now I'm searching and learning for my real time battle component,
and I saw different guides and tutorials for it:
https://www.codetutorial.io/laravel-5-and-socket-io-tutorial/
http://4dev.tech/2016/02/creating-a-live-auction-app-with-angular-2-node-js-and-socket-io/
The first tutorial is about how to use Laravel 5 and socket io.
The second one is how to use Angular 2 with NODS JS and socket io.
When I say real time, I mean that both users see the same thing that is happening on the screen)
My Backend and Frontend are totally divided and I have no setup with NodeJS anywhere in my app.
Both users need to see actions happening during a battle in my app, and It need to go through my laravel API and shown via my Angular 2 battle component
My question is -
What's the best approach to real time app (seem websockets) using Angular2 and Laravel 5.2 to get the desired result of what I'm trying to achieve?
Laravel in this context is just templating and serving the client files, and acting as an interface inbetween the client and the socket.io server. It doesn't actually act as the socket.io server, and I don't believe it can.
So yes, you would still need something (node) to host the socket.io server to interact with the client, through PHP or otherwise. Personally, I'd skip Laravel/PHP altogether and just use node with koa/express/whatever to template your client (html/js/css/etc) files. Feels like an unnecessary abstraction to me.
The code below from socket.blade.php already has a connection to the actual socket.io server, so I don't see why the additional overhead of an HTTP POST through PHP/Laravel is a good idea. Security, perhaps, but you can handle that with the actual socket.io server as well.
var socket = io.connect('http://localhost:8890');
socket.on('message', function (data) {
$( "#messages" ).append( "<p>"+data+"</p>" );
});
For the real-time character of your use-case, websockets are definitely the way to go. The players that should get the updates should be in the same 'room', so you can broadcast changes more easily. For the other functionality you can either use websockets or regular API calls to your backend directly from your client-side app code with some kind of communication between your api and the socket server, e.g. through Redis.
TLDR:
All data through sockets, node server does api calls and broadcasts changes to active players
Use API from app directly, use pub/sub queue foo for communication between laravel and node to broadcast changes to active players
Option 1:
Angular frontend app
Set up websocket connection
Add triggers for game foo which will send data over the socket connection and is handled by your nodeserver
Only talks to sockets
Node server
Serves frontend app
Handles socket connections, divide players per game
Handles socket calls and calls laravel api to do mutations on your data
Process action and broadcast changes to players in game X
Laravel REST API
Auth x
Default CRUD foo
Option 2:
Angular frontend app
Talks to api directly
Uses sockets to listen for updates
Node server
Serves frontend app
Handle websocket data
Listen on queue for published data from API
Broadcast changes to players in game x over socket
Laravel REST API
Auth
Crud
Mutation x triggers publish in Redis or other queue, which the node server can/should listen on
I'm sure there are more ways you can set this up, you just have to decide where you want what. Maybe introducing Redis is something you do not want, in that case your node app will have more to do. If you do want to use something like Redis, you'll need to do API calls from either your frontend app or choose to do it through the node app anyway, combining the 2 options.
If you are planning to use websockets then there seems to be less use of laravel as only one socket is pretty capable of handling all the data that will be exchanged between the frontend and the backend, so if you don't mind changing your engine you can try Meteor, https://www.meteor.com/

Resources