如何解决在 Node js 中使用 Socket IO 更新 pug 模板
在我使用 Node Js / Express 和 Pug.js 的其中一个项目中,我想使用 socket io 使所有内容、所有发布操作以及提供信息或更新。
我尝试使用 socket io,但我设法做的只是在 2 个实时用户之间从 js 生成 html 代码, 但我不知道如何直接在 api 路由/控制器中使用 io 套接字来直接调整 pug 模板和 angular 应用程序。 为了防止对我的应用造成任何损害,我构建了一个控制器和文本路由。
-
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;
-
查看/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
-
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 }); });
在烤箱中,我制作了脚本,通过该脚本从 pug 模板的公式中获取值并将其插入到数据库中。
-
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); } }
我希望当用户发布随机 UI 文本以立即适应时,我试图理解套接字文档,我应用了 youtube 上的一些示例,但我从 js 创建了元素,除非我刷新,否则我不适应 pug 模板。
在这个例子中可以使用socket io来适配pug模板和移动应用
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。