displaying current number of unique users on website using nodejs - node.js

Question

I'm trying to display number of current users on a particular page on my website. I got to know about socket.io for doing this exact particular thing but every solution on the internet had a separate server.js file to make it work. My question is, how do I implement this using app.js which I have already configured for my website's use, listening on port 3000. Sorry if my question is a little naive but I've recently started web development and don't know exactly how to do this.
My app.js is as follows:
//jshint esversion:6
require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const ejs = require('ejs');
const _ = require('lodash');
const mongoose = require('mongoose');
const session = require('express-session');
const passport = require('passport');
const passportLocalMongoose = require('passport-local-mongoose');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const findOrCreate = require('mongoose-findorcreate');
const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
//Passport Sessions setup
app.use(session({
secret: "Our little secret.",
resave: false,
saveUninitialized: false
}));
app.use(passport.initialize());
app.use(passport.session());
// Users DB
let conn = mongoose.createConnection("mongodb+srv://#cluster0.wrvir.mongodb.net/userDB", {useNewUrlParser: true, useUnifiedTopology: true});
// conn.set("useCreateIndex", true);
const userSchema = new mongoose.Schema ({
username: String,
// password:String,
googleId: String
});
userSchema.plugin(passportLocalMongoose);
userSchema.plugin(findOrCreate);
const User = conn.model("User", userSchema);
passport.use(User.createStrategy());
passport.serializeUser(function(user, done){
done(null, user.id);
});
passport.deserializeUser(function(id, done){
User.findById(id, function(err, user){
done(err, user);
});
});
// Google Authentication Strategy
passport.use(new GoogleStrategy({
clientID: process.env.CLIENT_ID,
clientSecret: process.env.CLIENT_SECRET,
callbackURL: "http://localhost:3000/auth/google/timeline",
userProfileURL: "https://www.googleapis.com/oauth2/v3/userinfo"
},
function(accessToken, refreshToken, profile, cb) {
console.log(profile);
User.findOrCreate({ googleId: profile.id, username: profile.displayName }, function (err, user) {
return cb(err, user);
});
}
));
// Stories DB
let conn2 = mongoose.createConnection("mongodb+srv://#cluster0.wrvir.mongodb.net/storiesDB", {useNewUrlParser: true, useUnifiedTopology: true});
const postSchema = {
title: String,
content: String
};
const Post = conn2.model("Post", postSchema);
app.get("/", function(req, res){
res.render("home");
});
app.get("/auth/google",
passport.authenticate("google", { scope: ["profile"] })
);
app.get("/auth/google/timeline",
passport.authenticate("google", { failureRedirect: '/login' }),
function(req, res) {
// Successful authentication, redirect to timeline.
res.redirect('/timeline');
});
app.get("/posts/:postid", function(req, res){
const requestedPostId = req.params.postid;
Post.findOne({_id: requestedPostId}, function(err, post){
res.render("post", {
title: post.title,
content: post.content
});
});
});
app.get("/compose", function(req, res){
res.render("compose");
});
app.post("/compose", function(req, res){
const post = new Post({
title: req.body.postTitle,
content: req.body.postBody
});
post.save(function(err){
if (!err){
res.redirect("/timeline");
}
});
});
app.get("/timeline", function(req, res){
if(req.isAuthenticated()){
Post.find({},function(err, posts){
res.render("timeline", {
startingContent: homeStartingContent,
posts: posts
});
});
} else {
res.redirect("/login");
}
});
app.get("/logout", function(req, res){
req.logout();
res.redirect("/");
});
app.listen(process.env.PORT || 3000, function(){
console.log("Server started on port 3000...");
});

Answer 1

Server side
The `app.listen` function at the end of your code returns a `server` object, which can then be used to setup a socket like that:
const socketio = require('socket.io');
// ...
const PORT = process.env.PORT || 3000;
const server = app.listen(PORT, () => console.log(`Server started on port ${PORT}.`));
const io = socketio(server);
Then you could have the following logic to count your users and emit an event to every user, if the count changes:
let userCount = 0;
io.on('connection', socket => {
userCount++;
io.emit('user-count-change', userCount);
socket.on('disconnect', () => {
userCount--;
io.emit('user-count-change', userCount);
});
});
Optional
But since this code would constantly emit events to every user on every connection, the number of emits would grow exponentially. As a solution I'd fire events in an interval with a bit of delay in between:
const userCountUpdateDelay = 10000;
let userCount = 0;
io.on('connection', socket => {
userCount++;
socket.on('disconnect', () => { userCount--; });
socket.emit('user-count-change', userCount);
});
setInterval(() => {
io.emit('user-count-change', userCount);
}, userCountUpdateDelay);
Client side
Add this html somewhere to a your website:
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
socket.on('user-count-change', function (userCount) {
console.log(userCount);
// Display the user count...
});
</script>
Learn more
If you wanna learn more about socket.io, it has a great documentation, which you can find here