How to use socket.io across diffrent routes in node.js - javascript

I have different routes in my node js application and i have to use socket.io in every route to make my node and react js application realtime. But, i have the below structure of my node js application.
router.js
const express = require('express');
const router = express.Router();
const worksheetController = require('../controllers/worksheet')
const attendenceController = require('../controllers/attendence')
router.route('/worksheets')
.get(
worksheetController.getWorksheet
)
.post(
worksheetController.validateWorksheet,
worksheetController.addWorksheet,
attendenceController.markAttendence
)
router.route('/attendances')
.get(
attendenceController.getAttendance
)
module.exports = router;
server.js
const express = require('express');
const router = require('./router');
const app = express();
app.use('/api', router);
app.listen('5000', () => {
console.log('Listening on port');
});
module.exports = app;
So, I want to know
1) Should i need to use http module to create a server, if i need to use socket.io.
2) How can i use socket.io for diffrent routes.
I found posts that match's to my question on stackoverflow, which is this, this and this. But i don't think, that works for me. So please help me.

You can use http module or other module in document of socket.io for to use socket.io
I don't sure your idea. But when you want implement socket.io. I think you should run another node app. (Meaning you have 2 nodejs app. 1 for node http normally and 1 for socket.io app). After you can use path option when init socket.io app https://socket.io/docs/server-api/#new-Server-httpServer-options. Because when you deploy to production. You should run your socket.io app with beside of proxy serve (ex: nginx). Socket.io basically support multi transport and protocol. So if use with http restful. How about config your connection mapping from nginx to socket.io app, how you setup error handler ?.
In your case:
+ Create new file socket.js:
// socket.js
var http = require('http')
var socket_io = require('socket.io')
function init_socket(app) {
const server = http.Server(app)
const io = socket_io(server, { path: 'your-path-want-for-socket-io' }) // default: /socket.io/
}
import {init_socket} from 'socket.js'
init_socket(app)

Related

stuck at building process while hosting on Vercel

I'm using node.js as a server-side to store the API respond, the app is working without any issue but recently I have been trying to host it on Vercel so I ran into many issue, the project get stuck at the building process...
the building output :
Building output
My server.js code :
// Setup empty JS object to act as endpoint for all routes
projectData = {};
// Require Express to run server and routes
const express = require('express');
// Start up an instance of app
const app = express();
/* Middleware*/
//Here we are configuring express to use body-parser as middle-ware.
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// Cors for cross origin allowance
const Cors = require('cors');
app.use(Cors());
// Initialize the main project folder
app.use(express.static('website'));
// Setup Server
const port = 8000;
const Server = app.listen(port , run);
function run() {
console.log(`hello there :D`);
console.log(`here is ${port} ready to go`);
}
//GET method
app.get('/all', function(req,res){
res.send(projectData)
console.log(projectData);
})
//POST method
app.post("/addUserComment", function(req,res){
projectData = {
temp : req.body.temp,
date : req.body.date,
feeling : req.body.feeling,
}
console.log(projectData);
res.send(projectData);
})
My working directory and build settings :
Working directory
Build settings
note: server.js is my server-side file, and my website folder includes my app.js file and my HTML, CSS files, also i did try to add Vercel.json file but i couldn't understand how to use it, so if you gonna add this file in your answer please explain how and why
I think you need to remove the build command, because it's now trying to run the server.js file instead of making a build.

How to pass id of object to another page?

I have full stack application which i deployed on netlify, my frontend structure (vanilaJS) is following:
client
-index.html
-training.html
-scripts
-style
My backend is in Express and successfuly deployed to Heroku. I have the following rutes:
const express = require('express')
const app = express()
const trainingRoute = require('./routes/training')
app.use('/training', trainingRoute)
In the index.html on frontend i have card:
<div class="trening-plan-container">
<div class="plan-btn">
<button>Pogledaj</button>
</div>
</div>
452153221489 is id of item in database. When i click on link, i get my url:
https://example.netlify.app/training/452153221489
and i get 404 status, not found.
How can i make request to my backend route /training/452153221489 which i have defined in
app.use('/training', trainingRoute) :
const express = require('express')
const router = express.Router()
const {
getTrainingPlan,
} = require('../controllers/trainingPlan')
router.route('/:id').get(getTrainingPlan)
module.exports = router
When i use fetch, everything works, because i specify full url
https://trening-bek.herokuapp.com/training/452153221489
After days of research i have found proxy might be the solution but it doesn't work.
I could use Pogledaj then retreive id and make fetch api call but I'm not sure that's the way it should be done.
Is it bad practice to seperate frontend and backend on two servers?

Why not using "require('express')()"

To create a simple Web server with NodeJS and Express, all the tutorials giving examples like this
const express = require('express');
const app = express();
app.listen(3000, () => console.log("Started"))
app.get('/', (req, res) =>{
res.send("Yaaa")
})
My question is, Why not write it like this?
const app = require('express')();
app.listen(3000, () => console.log("Started"))
app.get('/', (req, res) =>{
res.send("Yaaa")
})
The only difference is merging lines 1 and 2, as far as I'm not going to use/need the "express" constant anymore.
Is that wrong? And why?
As far as I know about express framework. Express exposes us to a lot of useful functions. If we don't require or import express in our application then, Our application will not be able to use those functions.
For example if you are creating some REST APIs then, We need our APIs to take form-data or raw as input. If we want to allow our application to take raw-json as input then, we need to add a middleware which consumes a built-in express function.
app.use(express.json())
If you want create an application that has a seperate folder for all the routes. Then, we use express.Routes() for that. That's how we create routes file in seperate routes folder:
import express from 'express';
import userController from 'path/to/user/controller';
const router = express.Router();
router.post('/follow/:userid/:following', helper.verifyToken, userController.follow);
router.get('/someRoute', userController.someAction);
export default router;
Similarly, If we want to serve some static HTML or some react-build. Then, we use express.static() inside app.use() middleware like this:
app.use(express.static('/path/to/static/folder'));
As long as you don't need access to the express module elsewhere in this file, then doing:
const app = require('express')();
is the best way.
But if we require to use to this express module again and again. Such as below
const app = require('express')();
const friendsRouter = require('express').Router();
Then it becomes a problem and you have require it again and again.
So to make our code less redundant, we use normal given approach. As in below code:
const express = require('express');
const app = express();
const friendRouter = express.Router();

What's the best way to access the express 'app' object from inside a separate route file?

In Express 4, by default, routes are loaded from a separate file:
app.use('/', routes);
Would load routes/index.js.
I have a third-party library that attaches to app itself. Is there a preferred way to access app from inside routes/index.js?
I've thought about dependency injection ie, routes/index.js does
module.exports = function(app){
(routes go here)
}
and then:
app.use('/', routes(app))
But I wonder if there's a better way. What's the best way to access the express 'app' object from inside a separate route file?
You can simply access app by req.app in your route handlers
I looked at a number of app generators and everyone does it differently.
Mostly though I've seen it work the opposite from what you are asking. The route modules do not get the app passed in, they just return themselves and are attached to the app.
I like to use the following pattern:
routers/hello.js:
var express = require('express');
var router = express.Router();
router.get('/hello', function (req, res) {
res.send('Hello, World!');
});
module.exports = router;
app.js:
var express = require('express');
var app = express();
app.use('/sample', require('./routers/hello'));
// other routers are attached
module.exports = app;
server.js:
var http = require('http');
var app = require('app');
var server = http.createServer(app);
server.listen(3000):
So the modules in routers/ return an Express Router object that are then attached to the app on their respective paths (routes).
This is inspired on the Express Application generator, but uses Routes instead of Routers. My advice, use the linked generator and start from there.

Node.js and dependecies management

Here is what i'm concerned about:
I'm writing a webapp in Node.js using express 4.
The question is for managing dependecies in all the code, but let me show you an example. I'm managing dependencies like this:
server.js:
var express = require('express');
var app = express();
app.use('/auth', require('./routes/auth'));
app.use('/profile', require('./routes/profile'));
routes/auth.js:
var express = require('express');
var router = express.Router();
// add routes to router
module.exports = router;
routes/profile.js:
var express = require('express');
var router = express.Router();
// add routes to router
module.exports = router;
How you can see, i'm importing express every time i need it in every module. I'm showing you the example with express, but i'm doing it with others modules.
Makes it better if i manage dependencies like this?
server.js:
var express = require('express');
var app = express();
app.use('/auth', require('./routes/auth')(express));
app.use('/profile', require('./routes/profile')(express));
routes/auth.js:
module.exports = function (express) {
router = express.Router();
// add routes to router
return router;
}
routes/profile.js:
module.exports = function (express) {
router = express.Router();
// add routes to router
return router;
}
I have to admit that my doubts are due to my lack of knowledge about Javascript and Node.js and my background with Python, where we do like the first form.
Any advice would be appreciated.
There is no real difference in performance, since Node.js' require caches every module on first call. However, the second approach has the benefits of explicit dependency injection, i.E. you could test every module in higher isolation by providing a mocked version of express. Plus you are ready for providing further dependencies like configuration or database objects.

Categories