I have a nodejs app that acts as a remote control for Cmus music player. It uses a route for each function ie /play /next etc. This works fine, but with each button click I must call res.redirect("index.html") which obviously causes the page to reload. How can I perform this so that each button click is still able to send the command to the server but not reload the page?
server.js
var express = require('express');
var app = express();
var path = require('path');
var exec = require('child_process').exec;
var Commands = require('./commands.js');
var child;
app.use(express.static(__dirname + '/public'));
//Routes
app.get('/', function (req, res){
res.sendFile(path.join(__dirname + '/index.html'));
});
app.get('/play', function(req, res){
// console.log(req);
handleCommand(Commands.PAUSE);
res.redirect("index.html");
});
var server = app.listen(8080, function () {
console.log("Server online");
console.log(commands.NEXT);
});
function handleCommand(command) {
child = exec(command, function (error, stdout, stderr) {
// sys.print('Stdout ' + stdout);
// sys.print('Stderr ' + stderr);
if (error !== null) {
console.log('ERROR: ' + error);
}
})
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cmus Remote</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="client.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body id="body">
<form action="/play">
<input id="play" type="submit" value="⏯">
</form>
</table>
</body>
</html>
Instead of using a form to "submit" the button, you can attach event handlers to the button that will do a POST request without reloading the page. Then, you won't need to send any redirects at all. Since you have JQuery on the page, I'll give an example with JQuery.
Index.html
<button id="play">Play</button>
<!-- Other code -->
<!-- Script or external JS code -->
<script>
$('#play').click(function(){
$.post('/play');
});
</script>
Related
im trying to reference socket.io in my login.html but it gives following error:
GET https://localhost:3000/socket.io.js net::ERR_ABORTED 404 (Not Found)
i think its because this code line in my login.html :
<script src='/client-dist/socket.io.js'></script>
i was trying other reference the script in other ways, but those doesnt work. it worked when my server.js was a http connection, but now i need a https connection.
its also dont possible to reference oder javascript refrences.
login.html:
<!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>Login</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<section>
<h1>Login</h1>
<p>
username:<input id="username">
<br>
password:<input id="password">
<br>
</p>
<p>
<button onclick="window.location.href='/register'">Create Account</button>
</p>
<button id="submitButtonLogin" onclick="onClick()">submit</button>
</section>
<script src='/client-dist/socket.io.js'></script>
</body>
</html>
server.js:
const express= require('express')
const app= express();
//const path= require('path')
const https= require('https')
const io=require('socket.io')(https,{maxHttpsBufferSize:1e8})
const fs=require('fs')
const sslServer =https.createServer({
key: fs.readFileSync('cert/key.pem'),
cert: fs.readFileSync('cert/cert.pem')
},app)
const PORT=process.env.PORT || 3000
sslServer.listen(PORT, ()=>{
console.log(`listening to port ${PORT}`)
});sslServer.setTimeout(0)
app.get('/test', (req,res)=>{
res.sendStatus(200);
})
app.use(express.static(__dirname + '/public'))
app.use(require('./routes/posts'));
app.use(require('./routes/users'));
app.get('/',(req,res)=>{
res.sendFile(__dirname + '/login_register/login.html')
})
app.get('/register',(req,res)=>{
res.sendFile(__dirname + '/login_register/register.html')
})
app.get('/chatroom',(req,res)=>{
res.sendFile(__dirname + '/index.html')
})
my hierarchy:
chatapplication
-cert
cert.pem
csr.pem
key.pem
-login_register
login.html
register.html
-model
user.js
-node_modules
(included when setup)
-public
client.js
style.css
-routes
users.js
database.js
index.html
package-lock.json
package.json
secret.json
server.js
This question already has an answer here:
Link index.html client.js and server.js
(1 answer)
Closed 1 year ago.
When I run my HTML file on a local server written in node.js, the CSS file that I linked in my HMTL file does not work.
my javascript code
const http=require('http');
const fs=require('fs');
http.createServer(function(req,res){
fs.readFile("index.html",(error,data)=>{
res.writeHead(200,{'Content-Type':'text/html'});
res.write(data);
return res.end();
})
}).listen(8080);
my HTML file
<!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">
<link rel="stylesheet" type=text/css href="./css/desktop.css">
<title>CODESTER-TrackYourProgress</title>
</head>
<body>
...
</body>
</html>
my CSS file is in folder css, and name is called desktop.css.
Express module solved the problem
you can use
const express = require('express');
const app = express();
app.use(express.static('folder containing your static files'));
//statics files are css,photos etc
You could try something like this:
const http=require('http');
const fs=require('fs');
http.createServer(function(req,res){
const { method, url } = req;
const surl = new URL(url, 'url the server is running on');
if (method == 'GET' && surl.pathname == '/index.html') {
fs.readFile("index.html",(error,data)=>{
res.writeHead(200,{'Content-Type':'text/html'});
res.write(data);
return res.end();
})
}
if (method == 'GET' && surl.pathname == '/css/desktop.css') {
fs.readFile("/path/to/css/desktop.css",(error,data)=>{
res.writeHead(200,{'Content-Type':'text/css'});
res.write(data);
return res.end();
})
}
}).listen(8080);
Be sure to replace /path/to/css/desktop.css with your actual path to the file and 'url the server is running on' with a valid url that the server is running on eg. http://127.0.0.1/
I'm trying render the index file with Express Node.js successfully, but if I'm using namespaces with parameter, without parameter render twig file and included own scripts, if I use try with parameter, render ok bu problem with script files path so script files in head in html cannot including while path not correct
for example, without parameter, in html file style.css look like
<link rel="stylesheet" href="style.css"> path http://127.0.0.1:3000/style.css
with parameter, in html file style.css look like <link rel="stylesheet" href="style.css"> path http://127.0.0.1:3000/mynamespace/style.css <--- and this not found!
say browser path not found!
Server.js
const port = 3000;
const express = require('express');
const app = express();
const http = require('http');
const socketIO = require('socket.io');
const server = http.Server(app);
server.listen(this.port, () => {
console.log(`Server running on: http://127.0.0.1:${port}`);
});
const io = socketIO(server);
app.set('view engine', 'twig');
app.set('views', "views");
app.use(express.static('public'));
app.use(express.static('scripts'));
app.use(express.static("styles"));
/// Routing
/**
* This work fine
* Render client.twig
* Including Scripts in head
*/
app.get('/mynamespace', function (req, res, next) {
res.render("client");
});
/**
* This work with error
* Render client.twig
* don't Including Scripts in head
*
*/
app.get('/mynamespace/:id', function (req, res, next) {
res.render("client");
});
io.of("/mynamespace").on('connection',(socket)=>{
socket.on('online_users', (data) => {
console.log(`Online Users ${data}`);
});
});
client.js
let url = `http://127.0.0.1:3000/mynamespace`;
console.log("Url", url);
this.socket = io(url);
this.socket.on("connect", ()=>{
try{
this.socket.emit('welcome', {
message:"Welcome guest"
});
} catch (e) {
alert(e.message);
}
});
client.twig
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" const="text/html;charset=UTF-8"/>
<title>RestoCommend</title>
<script src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="style.css"
</head>
<body>
<h3>Client</h3>
<script src="helper.js"></script>
<script src="client.js"></script>
</body>
</html>
From your code it looks like the style.css file is in the same directory as client.twig which is the views directory. But you have told express that the static directories are public, scripts and styles. There is no instruction for express to know where to serve the css from. Try moving the style.css file into styles directory.
Good luck.
Sounds like you want to serve your static files under a relative path. Try the following:
app.use('/mynamespace', express.static('public'))
app.use('/mynamespace', express.static('scripts'))
app.use('/mynamespace', express.static('styles'))
And also
<link rel="stylesheet" href="mynamespace/style.css" />
My hierarchy of files
I Solved my problem, but not good idea
Server.js
app.get('/mynamespace1', function (req, res, next) {
app.use(express.static('public'));
app.use(express.static('scripts'));
app.use(express.static("styles"));
res.render("client1");
});
one parameter based namespace!
app.get('/mynamespace2/:clientId', function (req, res, next) {
app.use(express.static(path.join( __dirname + "/../", 'public')))
app.use(express.static(path.join( __dirname + "/../", 'scripts')))
app.use(express.static(path.join( __dirname + "/../", 'styles')))
res.render("client2");
});
more as one parameter based namespace!
app.get('/mynamespace3/:roomName/:clientId', function (req, res, next) {
app.use(express.static(path.join( __dirname + "/../", 'public')))
app.use(express.static(path.join( __dirname + "/../", 'scripts')))
app.use(express.static(path.join( __dirname + "/../", 'styles')))
res.render("client3");
});
client1.twig
<link rel="stylesheet" href="style.css">
<script src="helper.js"></script>
<script src="client.js"></script>
Everything normal
client2.twig
<script src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="../style.css">
<script src="../helper.js"></script>
<script src="../client.js"></script>
with one prameter, script paths defined to parent
client3.twig
<script src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="../../style.css">
<script src="../../helper.js"></script>
<script src="../../client.js"></script>
with more prameters, parent folder defined, until number of parameter
My Problem solved, but I don't like it so
i have created a server.js using node and hosted it at "http://localhost:3000".
when vistited "http://localhost:3000" it returns index.html.
in index.html i have attached a javasript file doggos.js(inside public folder) as script src tag, excutes a function onclick of a button in index.html.
when i clicked the button in index.html i can't see the function getting called.
server.js:
const express = require("express");
const path = require("path");
const app = express();
app.get("/", function(req, res) {
res.sendFile(path.join(__dirname, "index.html"));
});
app.listen(3000);
console.log("listening on http://localhost:3000");
index.html:
<!DOCTYPE html>
<html>
<head>
<title> hello world</title>
</head>
<body>
<h1>doggos</h1>
<button id="addNewDog" onclick="">add new dog</button>
<div id="dogs"></div>
<script src="./public/doggos.js"></script>
</body>
</html>
/public/doggos.js:
const DOG_URL = "https://dog.ceo/api/breeds/image/random";
const dogsElement = document.getElementById("dogs")
function addNewDog(){
console.log("fetch dog")
fetch(DOG_URL)
.then(
(response)=>response.json()
)
.then(
(processedResp)=>{
const img = document.createElement("img");
img.src = processedResp.message;
img.alt ="cute dog"
dogsElement.appendChild(img)
}
)
}
document.querySelector("#addNewDog").addEventListener("click", addNewDog)
may i know why the function is not getting called ?
I'm using EJS as Template engine. Everything looks like working fine, but I have these weak "Unresolved variable or type data" warnings in IntelliJ. How to get rid of these warnings? Is anything wrong with the code?
app.js:
var express = require('express');
var app = express();
var hostname = 'localhost';
var port = 3000;
app.set('view engine', 'ejs');
app.use('/static', express.static('static'));
app.get('/', (req, res) => {
res.sendFile(`${__dirname}/index.html`);
});
app.get('/profile/:id', (req, res) => {
var userData = {
id: req.params.id,
firstName: 'John',
lastName: 'Peterson',
age: 23,
active: true,
interests: ['Design', 'Web', 'Acting']
};
res.render('profile', { data: userData });
});
app.get('*', (req, res) => {
res.sendFile(`${__dirname}/404.html`);
});
app.listen(port);
console.log(`Server running at http://${hostname}:${port}`);
views/profile.ejs:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Profile</title>
<link rel="stylesheet" href="../static/style.css">
</head>
<body>
<h2>My Profile Template</h2>
<p>ID: <%=data.id%></p>
<p>Name: <%=data.firstName%> <%=data.lastName%></p>
<p>Age: <%=data.age%> years</p>
<p>Active: <%=data.active%></p>
</body>
</html>
I solved this problem, by adding spaces between %=%.
<p>Name: <%= data.firstName %> <%= data.lastName %></p>
It looks like you need to export the data object somewhere in your code.
Try to add module.exports = { data: {}; } to the end of your app.js file.
To make autocomplete work correctly, you should either export a real object (userData) instead of an empty one, or use TypeScript.