在 Node js 中使用 Socket IO 更新 pug 模板

编程问答 2022-05-28

问题描述

在我使用 Node Js / Express 和 Pug.js 的其中一个项目中，我想使用 socket io 使所有内容、所有发布操作以及提供信息或更新。

我尝试使用 socket io，但我设法做的只是在 2 个实时用户之间从 js 生成 html 代码， 但我不知道如何直接在 api 路由/控制器中使用 io 套接字来直接调整 pug 模板和 angular 应用程序。 为了防止对我的应用造成任何损害，我构建了一个控制器和文本路由。

  1. server.js

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

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

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

  2. 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;

  1. 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
   })
});

  2. routes/postRoutes.js

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

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

 module.exports = router;

  3. 查看/testLive.pug

    extends baseac 
block content
   if(user)
       include header_footer/header_app
       .container
           form.testingPurpopseForm
              .form-group
                 label(for="exampleInputRandomText") Random Text</label>
                  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

  4. routes/viewsRoute.js

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

 module.exports = router;

  5. views/viewsController.js

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

在烤箱中，我制作了脚本，通过该脚本从 pug 模板的公式中获取值并将其插入到数据库中。

  1. public/js/main.js

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

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


      createrandomText(random);
 });

  2. 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);
     }    
 }

enter image description here

我希望当用户发布随机 UI 文本以立即适应时，我试图理解套接字文档，我应用了 youtube 上的一些示例，但我从 js 创建了元素，除非我刷新，否则我不适应 pug 模板。

在这个例子中可以使用socket io来适配pug模板和移动应用

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

expressexpressexpressjavascriptpugsocket.io