Use Socket IO In Node js to update pug template

Question

In one of the projects I use Node Js / Express with Pug.js,I want to use socket io to make everything live,all post actions and bring information or update.

I tried to use socket io but all I managed to do was generate html code from js between 2 live users, but i can't figure out how i can use io socket directly in api route / controllers to adapt pug template directly and angular app. To prevent any damage to my app I built a controller and text routes.

server.js

const app = require('./app');

//Port
const port = process.env.PORT || '7000';

const server = app.listen(port,()=>{
  console.log(`Server Is Running!!!!`);
});

app.js

 const express = require('express');
  .........
 //App Routes
 const viewRoutes = require('./routes/viewRoutes');
 const postRoutes = require('./routes/postRoutes');
//Api Routes
app.use('/api/v2/post',postRoutes);
app.use('/',viewRoutes);


module.exports = app;

controllers/postController.js

/*import mongoose schema*/ 
const Module = require('../module/testingModule');

//Testing Purpose
exports.createRandomText = catchAsync(async(req,res)=>{
 const test = await Module.create(req.body);
 console.log(req.body);

 res.status(200).json({
    status:'success',
    data:test
   })
});

routes/postRoutes.js

 const postController = require('../controllers/postController');

 //Testing Purpose
 router.route('/test-create').post(postController.createRandomText);

 module.exports = router;

view/testLive.pug

extends baseac 
block content
   if(user)
       include header_footer/header_app
       .container
           form.testingPurpopseForm
              .form-group
                 label(for="exampleInputRandomText") Random Text
                  input(type="text" class="form-control" id="exampleInputRandomText" aria-describedby="emailHelp" placeholder="Random Text")
             button(type="submit" class="btn btn-primary") Submit
        .container
           ul
              each ts in test.reverse()
                 li=ts.randomText

routes/viewsRoute.js

//TestingPurpose
 router.route('/test').get(authController.protect,viewsController.testLive);

 module.exports = router;

views/viewsController.js

//Testing Purpose
exports.testLive = catchAsync(async(req,res)=>{
     const getTextTest = await Module.find();
       res.status(200).render('./testLive',{
          test:getTextTest
       });
  });

In the oven I made the script by which I take the value from the formula from the pug template and I insert it in the database.

public/js/main.js

document.querySelector('.testingPurpopseForm').addEventListener('submit',(dataTest)=>{
        dataTest.preventDefault();

      const random = document.getElementById('exampleInputRandomText').value;


      createRandomText(random);
 });

public/js/testRandomCreate.js

 import "regenerator-runtime/runtime";
 import axios from 'axios';


 export const createRandomText  = async(dataRandom) =>{
     try{
         const rand = await axios({
            method:"POST",
            url:"/api/v2/post/test-create",
           data:{
               randomText:dataRandom
           }
     });
     }catch(err){
        showAlert('error','There was a problem creating yout post!!!');
        console.log(err);
     }    
 }

I want when the user posts a random UI text to adapt instantly, I tried to understand the socket documentation I applied some examples from youtube but I create the elements from js and I don't adapt pug template unless I give refresh.

It is possible to use socket io in this example to adapt pug template and also the mobile application

Use Socket IO In Node js to update pug template

0 Answers