When pressing the button which sends a POST request, the request is fired twice but only after the page is freshly reloaded. The code's function is when the button is pressed, it sends a POST request to the url which then adds 1 to the JSON data value.
This is the button code in script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<button id="button">Click Me</button>
</body>
<script>
$("#button").click(function () {
$.ajax({
type: "POST",
url: "/updating",
});
});
</script>
</html>
This is the nodejs/url code:
const express = require("express");
const app = express();
const path = require("path");
const fs = require("fs");
const PORT = 1000;
// Sets public as static dir
app.use("/", express.static(path.join(__dirname, "/public")));
const filepath = "public/data.json"
const rawdata = fs.readFileSync(filepath);
// Addin 1 to JSON value
app.post("/updating", (req, res) => {
var data = JSON.parse(rawdata);
data.data++;
var newdata = JSON.stringify({
data: data.data,
});
fs.writeFileSync(filepath, newdata);
});
app.listen(PORT, () =>
console.log(`Server started on port ${PORT}: http://localhost:${PORT}/`)
);
});
JSON file:
{"data":29}
EDIT: The problem is due to nodemon. This error only occurs when I'm running on dev dependency which only includes nodemon.
Related
I want to build an application with Node.js and Svelte, but when I try to import a component it wasn't load.
Server side code:
const app = require("express")();
const http = require("http").Server(app);
const port = process.env.PORT || 8080;
const io = require("socket.io")(http);
const fs = require('fs')
const express = require('express')
app.get('/', (req, res) => {
res.write(fs.readFileSync('./pages/homepage.svelte', 'utf-8'));
res.end();
});
io.sockets.on('connection', function (socket) {
console.log('Utente connesso!')
});
http.listen(port, function() {
console.log("Listening on *:" + port);
});
Homepage.svelte:
<script>
import Component from './components/Component.svelte'
</script>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SocialTree</title>
</head>
<body>
<Component />
</body>
</html>
Component.svelte code:
<div>
<h1>Test</h1>
</div>
Thanks in advice and sorry for bad english!
I have a node.js project where I need to pass data from js file to html file
js file code
const express = require('express');
const router = express.Router();
const path = require('path');
const db = require('Dal/ProductsDal');
const productsArray = db.showAll();
router.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/home.html') , {obj: productsArray })
})
module.exports = router;
html file code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Node.Js Concluding Exercise</title>
</head>
<body>
<h1>Welcome</h1>
<div>
products
</div>
</body>
</html>
How can I show the product array in html div?
You could read the html file from node with a file reader and look for the div tag and replace with the data.
example code below
const http = require('http');
const fs = require('fs');
http.createServer(function (req, res) {
fs.readFile('index.html', 'utf-8', function (err, data) {
res.writeHead(200, { 'Content-Type': 'text/html' });
const products = 'some data';
const result = data.toString('utf8').replace('<div>products</div>', products);
res.write(result);
res.end();
});
}).listen(3000);
Using template engines with Express
A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.
https://expressjs.com/en/guide/using-template-engines.html
I am new to using socket.io and I have tried to set up a basic functionality according to the docs and youtube tutorials. My program is supposed to console log "New socket connection" when I navigate to the index page. However, the event is not triggering. Am I missing something? Thanks!
My app.js file
const express = require("express");
const socket = require("socket.io");
const http = require("http");
const moment = require("moment");
const app = express();
const server = http.createServer(app);
const io = socket(server);
app.set("view engine", "ejs");
// Set static folder
app.use("/public", express.static("public"));
app.get('/', (req, res) => {
console.log("Reached index page")
res.render("index")
});
app.get('/room', (req, res) => {
console.log("Reach room page")
res.render("room")
});
// Run when a client connects
io.on("connection", (socket) => {
console.log("New socket connection")
});
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => console.log(`Server running. Navigate to localhost:${PORT}`));
My index.ejs file
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<link rel="icon" href="../public/">
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../public/index/css/index.css" />
</head>
<body>
click here
<script>
var socket = io(); // this line is supposed to be sufficient to trigger
// the socket connection
</script>
<script src="../routes/index.js"></script>
<script src="/socket.io/socket.io.js"></script>
</body>
</html>
The error resulted from my naming my variable 'socket' when importing the socket.io dependency. The socket param in the line 'io.on("connection", (socket)' is supposed to reference another socket variable not the one that I created. Common practice is to name the dependency variable 'socketio' instead of 'socket'
I'm sending the file to the backend (written in Express JS) using fetch API with FormData API. My application is working fine. But after clicking on the Send button, my page is getting refreshed, even though I have not used any HTML form element.
I deleted FormData inside of Send button event listener function callback, and page didn't refresh after that. I also deleted fetch api call but keeping the FormData, and then also page didn't refresh. But on using them together, page gets refreshed.
Front End Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Code Analyzer</title>
</head>
<body>
<h1>Insert the Code File here</h1>
<input type="file" name="myFile" />
<button class="btn">Send</button>
</body>
<script>
//Get the DOM elments
const btn = document.querySelector(".btn");
let input = document.querySelector('input[type="file"]');
let formData = new FormData();
btn.addEventListener("click", e => {
e.preventDefault();
formData.append("myFile", input.files[0]);
console.log(formData);
fetch("http://localhost:9000/analyze", {
method: "POST",
body: formData
})
.then(data => data.json())
.then(res => console.log(res))
.catch(err => console.log(err));
});
</script>
</html>
Back End Code:
//Importing Packages
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const multer = require("multer");
const app = express();
//Configuring Multer
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, "uploads");
},
filename: function(req, file, cb) {
cb(null, file.fieldname + "-" + Date.now());
}
});
const upload = multer({ storage: storage });
//Middlewares
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
//Routes
app.post("/analyze", upload.single("myFile"), (req, res) => {
console.log(req.file);
res.json({ Analyzed: "Yes" });
});
//Server Listening
app.listen(9000, () => {
console.log("Server started on 9000");
});
I had the same problem using create-react-app and I execute serve -s build after create a production repo, when I tried see the problem it's gone. I figure out that is in developer mode that it's happen.
I want to render some value of another website by fetching the HTML source data by REST request, console the value inside the span tag to my console log and render it to my HTML.
I can't managed to this by my current code, he receives the data before the DOM is ready and the specific san tag i need still not there.
My current code -
async function uiTagChecking() {
let url ='http://production.com:8000/loginPage#';
fetch(url)
.then(await sleep(6000))
.then(response => response.text())
.then(pageSource => console.log(pageSource));
}
The current source code I've fetched (this is before the DOM is ready and the needed span tag doesn't there yet)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>loading...</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="icon"
type="image/png"
href="images/favicon.png?v=9">
<!--<link href="assets/vendors/keylines/map/leaflet.css" rel="stylesheet">-->
<link href="XXXX" rel="stylesheet"></head>
<body>
<div id="app"></div>
<script src="assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="XXXX/index-c08574aac712ae81e016.js"></script></body>
</html>
The span tag i want to print and render -
<span class="version-for-qa">2.1.1</span>
But it appears only after the redirect is ended and the DOM is ready.
Technical info:
Node JS
JavaScript
HTML + CSS
My server file (express):
var express = require('express');
var cors = require('cors');
var app = express();
var path = require("path");
var fetch = require('fetch-cookie')(require('node-fetch'));
var btoa = require('btoa');
var http = require('http');
var fs = require('fs');
var corsOptionsDelegate = function (req, callback) {
var corsOptions;
if (whitelist.indexOf(req.header('Origin')) !== -1) {
corsOptions = { origin: true } // reflect (enable) the requested origin in the CORS response
}else{
corsOptions = { origin: false } // disable CORS for this request
}
callback(null, data , corsOptions) // callback expects two parameters: error and options
};
app.engine('.html', require('ejs').__express);
app.set('views', __dirname + '/view');
app.set('view engine', 'html');
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', function(req, res){
res.render('index');
res.render('logo');
res.writeHead(200, {'Content-Type': 'application/json'});
});
app.use(cors());
app.set(['$qProvider', function ($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
}]);
app.get('/products/:id', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
});
app.listen(8033, function () {
console.log('CORS-enabled web server listening on port 8033')
});