When I load index.html on port 3000 and when I click on play button, all the messages are sent properly, but the ('#pause').click() is not being executed because the audio does not pause.
index.html code:
<html>
<head>
<script type="text/javascript" src="new.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<button type="button" id="play" name="play" value="play">PLAY</button>
<button onclick="pauseAd()" type="button" name="pause" value="pause">PAUSE</button>
</br>
<audio controls id="song">
<source src="Lyrics to Swallowed in the Sea - Coldplay.mp3" type="audio/mpeg">
</audio>
<div id="messages"></div>
<script>
var socket = io.connect("http://localhost:3000");
$(function() {
$('#play').bind('click', function() {
alert("User clicked on play");
playAd();
socket.emit('msg', {
sent: 1
});
return false;
});
});
socket.on('msg-received', function(data) {
if (data.value == 1) {
$('#pause').click();
$('#messages').append('<p>message received' + data.value + '</p>')
}
});
</script>
</body>
</html>
Server code:
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.use(express.static('./Public'));
app.set('views', __dirname + '/tpl');
app.set('view engine', "jade");
app.engine('jade', require('jade').__express);
app.get("/", function(req, res) {
res.render("new");
});
io.sockets.on('connection', function(socket) {
console.log("user connected");
socket.on('msg', function(data) {
console.log("message received", data);
socket.emit('msg-received', {
value: 1
});
});
});
http.listen(3000, function() {
console.log('listening on *:3000');
});
The $('#pause') is JQuery's selector for the element with the id attribute of pause. You currently don't have an element with the id attribute of pause, so $('#pause') currently returns nothing.
To fix your problem, all you need to do is add the attribute id='pause' to your pause button, which becomes:
<button id='pause' onclick="pauseAd()" type="button" name="pause" value="pause">PAUSE</button>
This will have JQuery select the button when you select the elements with the id of pause
Hope this helped and if you need further clarification let me know.
Related
I am currently trying to change the volume of my Raspberry Pi with two html buttons (volume up and volume down), using nodeJS. The volume change is done by calling a bash script when clicking on one of the html-buttons in index.html.
When I start node manually from terminal with
node server.js
everything works fine and I can increase and decrease the volume using the two buttons.
As soon as I put the node script to autostart, only the "volume up" button is working, while the volume down does not seem to be working.
Killing the autostarted node process and starting it manually, it works just fine again.
How can the outcome be this different, depending on how node is started here?
What is my error in this?
My node script looks like this:
var express = require('express');
var path = require('path');
var open = require('open');
var fs = require('fs');
const { exec } = require('child_process');
var bodyParser = require('body-parser');
var port = 3000;
var app = express();
app.get('/', function(req, res){
res.sendFile(path.join(__dirname, 'index.html'));
});
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/', function(request, respond) {
var inputValue = request.body.volume;
if (inputValue == "up") {
exec('sh volumeup.sh');
}
if(inputValue == "down") {
exec('sh volumedown.sh');
}
});
app.listen(port, function(err){
if(err){
console.log(err);
}else{
open('http://localhost:' + port);
}
});
with my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h2>Change Volume</h2>
<form action="" method="post">
<button name="volume" value="up">Volume Up</button>
<button name="volume" value="down">Volume Down</button>
</form>
</body>
</html>
To get the nodejs to run on autostart, I have set up a *.desktop-file:
[Desktop Entry]
Encoding=UTF-8
Type=Application
Name=<Node>
Comment=
Exec=/usr/bin/node /home/pi/Desktop/server.js
StartupNotify=false
Terminal=true
Hidden=false
Thank you very much in advance, I really appreciate your help!
Figured it out by myself.
In case anyone is facing a similar issue:
What helped me, was to put both shell file names into their absolute path:
´´´
app.post('/', function(request, respond) {
var inputValue = request.body.volume;
if (inputValue == "up") {
exec('sh /home/pi/server/volumeup.sh');
}
if(inputValue == "down") {
exec('sh /home/pi/server/volumedown.sh');
}
});
´´´
Bothered me for longer than I want to admit :-)
i am trying to get the socket id on the client side but for some reason it's not showing. Here is my code
client side
<html>
<head>
<meta charset="utf-8" />
<title>Ringneck</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io-stream/0.9.1/socket.io-stream.js"></script>
</head>
<body>
<div style="margin: 20px">
<h1 style="font-size: 18px;">Example 7: Media Translation Streaming</h1>
<div>
<button id="start-recording" disabled>Start Streaming</button>
<button id="stop-recording" disabled>Stop Streaming</button>
</div>
<h2 style="font-size: 16px; margin-bottom: 10px;">data.textTranslationResult.translation</h2>
<p>Record your voice in English, and see the German translation.</p>
<p>Keep recording for at least 4 seconds.</p>
<textarea id="results" style="width: 800px; height: 300px;"></textarea>
</div>
<script type="text/javascript">
const startRecording = document.getElementById('start-recording');
const stopRecording = document.getElementById('stop-recording');
let recordAudio;
const socketio = io();
console.log("JS file loaded"). // sanity check to make sure file is read
const socket = socketio.on('connect', function(msg) {
console.log("JS file loaded")
console.log("socket id: ",socket.id);
});
and my server side code
const express = require('express');
const cors = require('cors');
const path = require('path');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 3000;
app.use(cors());
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/public/index.html'));
});
function onConnection(socket){
console.log(`Client connected [id=${socket.id}]`);
var returndata = {
"test":"yes"
}
socket.emit('server_setup', `Server connected [id=${socket.id}]`);
}
io.on('connection', onConnection);
http.listen(port, () => console.log('listening on port ' + port));
my server console log is
Client is connected [id=_RMXhb8Vz9XgSqhGAAGa]
but I could not get any response on the client side. what am i missing and how can i fix this and get the socket id ?
When I run your code, I found that there was a client-side Javascript parsing error on this line:
console.log("JS file loaded").
because of the period. When I replace that period with a semi-colon like this:
console.log("JS file loaded");
I get this output on the server:
Client connected [id=eoxspnNtoTg-2Kj3AAAB]
and this output in the debug console of the browser:
JS file loaded
socket id: eoxspnNtoTg-2Kj3AAAB
If you're not already doing so, you should be looking in the browser console for errors.
I have been trying to get the value of my text input in a form with a POST request, but on the server side, the req.body is returning a [objecet][Object] request, when indeed I put in a value. Here's my code
const express = require('express');
const path = require('path');
let app = express();
const bodyParser = require('body-parser');
//Middleware for
app.use(bodyParser.urlencoded({extended: true}))
//using a middleware to map the /assets link in the url
app.use(express.static(path.join(__dirname, '/public')));
//Setting the view engine
app.set('view engine', 'ejs');
app.get('/', (req, res)=>{
res.sendFile(__dirname + '/index.html');
})
//Contact page
app.get('/contact', (req, res)=>{
res.sendFile(__dirname + '/contact.html');
// res.sendFile(__dirname + '/assets/appUI.js');
})
app.get('/contact-us', (req, res)=>{
res.sendFile(__dirname + '/contact.html');
})
//Handling POST request
app.post('/', (req, res )=>{
console.log('The task is '+ req.body)
})
app.listen(3000, ()=>{
console.log('The server is up and listening at port 3000!!!')
})
My index.html code is as below
<!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">
<link rel="stylesheet/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" type="image/x-icon">
<title>To do app</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</script>
</head>
<body onload ="appui()">
<p>CONTACT US</p>
<img src="todoImage.png" alt="" class="todoImage">
<div class="main-box">
<div class = "form-error animated shake" id = "error-message">
<p class = "form-error"><small>Please add a task</small></p>
</div>
<div class = "form-registered animated shake" id = "registered-message">
<p class = "form-registered"><small>Details added to register!</small></p>
</div>
<h1>Todo App </h1><br>
<form class="form" action="/" method="POST">
<input type="text" id="task" name = "task" value="Invents"><br>
<input type="submit" value="Add task" class="btn" name="addTask">
<input type="button" value="Clear All" class="btn clear-all" name="clearTask">
</form>
</div>
<ul class="task-list"></ul>
<script src= "appUI.js">
</script>
</body>
</html>
And my client side javascript code is as below
function appui(){
//Grabing input
const task = document.querySelector('#task');
const submit = document.querySelector('.btn');
const main = document.querySelector('.main-box');
const form = document.querySelector('.form');
const taskList = document.querySelector('.task-list');
const clearTask = document.querySelector('.clear-all')
const errorMessage = document.querySelector('#error-message');
const registeredMessage = document.querySelector('#registered-message');
//Load event listener
// loadEventlisntener()
console.log(main)
//adding submit event
submit.addEventListener('click', addTask);
//Funtion Error Display
function errorDisplay(){
errorMessage.style.setProperty('display', 'none');
}
//Funtion regsitered Display
function registeredDisplay(){
registeredMessage.style.setProperty('display', 'none');
}
//addtask
//Function addTask
function addTask(e){
if(task.value !== '') {
//create Element li
let list = document.createElement('li');
//Add a class name
list.className = 'task-value';
//create div
let div = document.createElement('div');
//Add a class name
div.className = 'main-box task animated heartBeat';
//task
let taskInput = document.createTextNode(`${task.value}`);
//append text node
div.appendChild(taskInput);
//Anchor tag
let anch = document.createElement('a');
//Add a class name
anch.className = 'deleteIcon';
//Delete mark 'X'
anch.innerHTML = `<b class="delete-icon">Delete</b>`
//Append Anchor tag to div
div.appendChild(anch);
// main.appendChild(div);
// form.parentNode.insertBefore(div, form.nextSibling);
console.log(div)
// Inserting Element after
// main.parentNode.insertBefore(div, main.nextSibling);
document.querySelector('.task-list').appendChild(div);
registeredMessage.style.setProperty('display', 'block');
setTimeout(registeredDisplay, 3000);
task.value ='';
} else{
errorMessage.style.setProperty('display', 'block');
setTimeout(errorDisplay, 3000);
}
// e.preventDefault();
}
//Deleting task
taskList.addEventListener('click', removeTask);
// Remove Task
function removeTask(e) {
if(e.target.parentElement.classList.contains('deleteIcon')) {
e.target.parentElement.parentElement.remove();
}
}
//Clear all tasks
clearTask.addEventListener('click', ()=>{
if(taskList.innerHTML === ''){
errorMessage.style.setProperty('display', 'block');
setTimeout(errorDisplay, 3000);
}else if(confirm('Are you sure ?')){
taskList.innerHTML = '';
task.value ='';
}
})
}
I'm already so frustrated, I hope you all can help out.
Thanks!
The automatic string conversion in Javascript for an object is just [Object][object] so when you do this:
console.log('The task is '+ req.body)
that's what is happening. req.body undergoes an automatic string conversion to [Object][object] and that's appended to your string.
To fix, change your code to this:
console.log('The task is ', req.body);
so that console.log() can output the whole req.body object.
I have the following express app which just renders the sample.ejs page. On that page when I press the button the attached script changes the div text to
"THIS IS FROM J QUERY. I want the same thing to happen but I want the data to be coming from a database. In my express app if I try to use res.render(); every time I click the button then it reloads the page which I don't want. So is there a way to achieve this without reloading page and only update part of page?
I have searched stack overflow and the web but can't get an appropriate answer or maybe I just am unable to understand. I know this is a very basic thing to ask.
APP.js
var express = require('express');
var app = express();
app.use(express.static('public'));
app.use(express.static('./src/views'));
app.set('views', './src/views');
app.set('view engine' , 'ejs');
app.listen(3000 , (err)=>{console.log('Listening')});
app.get('/' , function(req , res) {
res.render('sample' , {result_from_database: res.body} );
});
sample.ejs
<!doctype html>
<html lang="en">
<head>
<title>Sample HTML File</title>
</head>
<body>
<div id="holder">
WELCOME
</div>
<form>
<button type="button" id="HButton"> HELLO </button>
</form>
</body>
<script>
$(document).ready(function () {
var form = $("#holder");
$("#HButton").on("click", function () {
form.html("THIS IS FROM J QUERY");
});
});
</script>
<script src="/lib/jquery/dist/jquery.js"></script>
</html>
Now this is what I want to do
<!doctype html>
<html lang="en">
<head>
<title>Sample HTML File</title>
</head>
<body>
<div id="holder">
<%= result_from_database %>
</div>
<form>
<button type="button" id="HButton"> HELLO </button>
</form>
</body>
<script>
$(document).ready(function () {
var my_div = $("#holder");
$("#HButton").on("click", function () {
/* Tell app.js that I clicked a button and then app.js
query the database and using ejs or something else update the
my_div inner html with the database result without
reloading page */
});
});
</script>
<script src="/lib/jquery/dist/jquery.js"></script>
</html>
NOTE: I'm not asking how to query the database
-Thanks
You have to define and endpoint in your back end that return the information you want to display:
app.js
var express = require('express');
var app = express();
app.use(express.static('public'));
app.use(express.static('./src/views'));
app.set('views', './src/views');
app.set('view engine' , 'ejs');
app.listen(3000 , (err)=>{console.log('Listening')});
app.get('/' , function(req , res) {
res.render('sample' , {result_from_database: res.body} );
});
app.get('/api/books', function(req, res) {
res.json({
message: 'Your database information'
});
});
then on your front end you need to make a call to api endpoint like:
sample.ejs
<script>
$(document).ready(function () {
var my_div = $("#holder");
$("#HButton").on("click", function () {
$.ajax({
url: "/api/books"
})
.done(function( data ) {
console.log( "Sample of data:", data );
$('#holder').html(data.message);
});
});
});
</script>
You can find more information on ajax call with jquery here.
However i would suggest you to use any framework like angular or react to make it easier to render the data in your html, otherwise you will have to write a lot of code using jquery.
I have a problem with nodejs and socket.io
I tried in other discussions in order to understand how to solve my problem , but I did not succeed .
I'm going to create a board with score and I created a simple counter in javascript . I want to convey to all who open the ' localhost address : port with nodejs advances counter
this is what I have made so far
tabellone.js
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http)
app.use(express.static(__dirname + '/public'));
io.emit('some event', { for: 'everyone' });
io.on('connection',function(socket){
socket.on('contatore', function(){
socket.broadcast.emit('contatore', contatore);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
index.html
<html>
<head>
<title>tab</title>
</head>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<body>
<ul id="tab"></ul>
<form id="form">
<p id="contatore">0</p>
<button id="m" type="button"
onClick="javascript:contatore_su();"> + </button>
<button type="button"
onClick="javascript:contatore_giu();"> - </button>
</form>
<script>
var s=0;
function contatore_su() {
s=s+1;
document.getElementById('contatore').innerHTML = s;
}
function contatore_giu() {
s=s-1;
document.getElementById('contatore').innerHTML = s;
}
</script>
<script>
var socket=io();
$('form').click(function(){
socket.emit('conteggio', $('#m').val());
$('#m').val('');
return false;
});
socket.on('conteggio', function(msg){
$('#tab').append($('<li>').test(msg));
});
</script>
</body>
</html>
I have previously created a chat by following what is written on socket.io but I can not convey to all connected sockets the advancement counter , thanks for the help
ps. Sorry for my english :')
Which is the code to trasmit the element, in this case that is
contatore
I do not know what to put in the
io.on('connection',function(socket){ //here what? });
I do not know how the insert of the fuction works