I am using code as follow
server.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
users = [];
connections = [];
server.listen(process.env.PORT || 3000);
console.log('Server Running...');
app.get('/',function (req, res)
{
res.sendFile(__dirname + '/index.html');
});
io.sockets.on('connection', function(socket){
connections.push(socket);
console.log('Connected to %s sockets connection', connections.length);
// Disconnect
socket.on('disconnect', function (data){
if(!socket.username) return;
users.splice(users.indexOf(socket.username), 1);
updateUsernames();
connections.splice(connections.indexOf(socket), 1);
console.log('Disconnected: %s socket connected', connections.length);
});
//Send Message
socket.on('send message', function(data){
console.log(data);
io.sockets.emit('new message', {msg: data});
});
// New user
socket.on('new user', function(data, callback){
callback(true);
socket.username = data;
console.log(socket.username);
users.push(socket.username);
updateUsernames();
});
function updateUsernames(){
io.sockets.emit('get users', users);
}
});
index.html -> Client
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://immodernafrican.move.pk:3000/socket.io/socket.io.js"></script>
<style type="text/css">
body{
margin-top: 30px;
}
#messageArea{
display: none;
}
</style>
</head>
<body>
<div class="container">
<div id="userFormArea" class="row">
<div class="col-md-12">
<form id="userForm">
<div class="form-group">
<label>Enter Username</label>
<input class="form-control" id="username"/>
<br/>
<input type="submit" class="btn btn-primary " value="Login">
</div>
</form>
</div>
</div>
<div class="row" id="messageArea">
<div class="col-md-4">
<div class="well">
<h3>Online Users</h3>
<ul class="list-group" id="users"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<textarea class="form-control" id="message"></textarea>
<br/>
<input type="submit" class="btn btn-primary " value="Submit">
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var socket = io.connect('http://immodernafrican.move.pk:3000');
var $messageForm = $('#messageForm');
var $message = $('#message');
var $chat = $('#chat');
var $messageArea = $('#messageArea');
var $userFormArea = $('#userFormArea');
var $userForm = $('#userForm');
var $users = $('#users');
var $username = $('#username');
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $message.val());
$message.val('');
});
socket.on('new message', function(data){
$chat.append('<div class="well">'+data.msg+'</div>')
});
$userForm.submit(function(e){
e.preventDefault();
socket.emit('new user', $username.val(), function(data){
if(data){
$userFormArea.hide();
$messageArea.show();
}
});
$username.val('');
});
socket.on('get users', function(data){
var html = '';
for(i=0; i<data.length; i++)
{
html += '<li class="list-group-item">'+data[i]+'</li>';
}
users.html(html);
});
});
</script>
</body>
</html>
This is running accurately on localhost but as soon as i upload it to online hosting it gives an error. These are the error i am getting i have seen in console
(index):7 GET http://immodernafrican.move.pk:3000/socket.io/socket.io.js net::ERR_CONNECTION_TIMED_OUT
(index):58 Uncaught ReferenceError: io is not defined
at HTMLDocument.<anonymous> (http://immodernafrican.move.pk/:58:17)
at n (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:14784)
at Object.fireWith (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:15553)
at Function.ready (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:9773)
at HTMLDocument.B (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:14348)
i have tried to change
var socket = io.connect('http://immodernafrican.move.pk:3000');
to
var socket = io.connect();
but invain can anyone please help me regarding this issue so my chatroom can work
Thanks
Related
I wrote an AJAX Javascript code for my ESP32 datalogger which worked so far using old versions of Chart.js. The website hosted by the ESP32 is not working anylonger if I use a more recent of Chart.js.
The error message I caught is:
Uncaught ReferenceError: Chart is not defined at datalogin.html
The line in the code involved is this one
const myChart = new Chart(ctx, config);
Something in the interpretation seems to occur at a very early stage. But I could not identify what. See code below.
I already tried different Chart.js repository in order to have it working. It had absolutly no influence. I actively looked using different browser regarding this specific problematic and I could not find any way of solving this problem.
Thanks a lot for your support
<!DOCTYPE html>
<html lang="en">
<head>
<title>EFM Meter loggin interface</title>
<link rel="icon" type="image/x-icon" href="lightning.ico">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="https://github.com/cdnjs/cdnjs/blob/master/ajax/libs/Chart.js/4.0.1/chart.js" ></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns#2.0.1/dist/chartjs-adapter-date-fns.bundle.js"></script>
<style>
.jumbotron {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Elektrofeldmeter Data Logging Page</h1>
</div>
<div class="container">
<div class="border border-2 m-2">
<div class="row">
<div class="col-sm-12 ">
<div class="container-sm">
<canvas id="myChart" style="" height="152"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="border border-2 m-2">
<div class="col-sm-12">
<h3> Parameters setup</h3>
</div>
</div>
<div class="border border-2 m-2">
<div class="row">
<div class="col-sm-12">
<label for="customRange1" class="form-label" id="labelPWM">PWM of motor: 190</label>
<input type="range" class="form-range" min="0" max="190" step="1" value="190" onchange="rangeValue(this)" id="customRange1">
</div>
<div class="col-sm-6">
<label for="customRange2" class="form-label" id="labelYmin">Y min: -5000</label>
<input type="range" class="form-range" min="-5000" max="5000" step="1" value="-5000" onchange="rangeY()" id="Ymin">
</div>
<div class="col-sm-6">
<label for="customRange2" class="form-label" id="labelYmax">Y max: +5000 0</label>
<input type="range" class="form-range" min="-5000" max="5000" step="1" value="5000" onchange="rangeY()" id="Ymax">
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="saveAs()">*.CSV</button>
</div>
</div>
</div>
</div>
</div>
<script>
function rangeValue(element) {
console.log(element.value);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/pwm?value="+element.value, true);
xhr.send();
document.getElementById("labelPWM").innerHTML = "PWM of motor: " + element.value;
};
function rangeY() {
myChart.options.scales.y.max = document.getElementById('Ymax').value;
myChart.options.scales.y.min = document.getElementById('Ymin').value;
myChart.update();
};
function clkOrientation(element) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/clk?value="+element.checked, true);
xhr.send();
}
const animation = { };
const config = {
type: 'line',
data: {
datasets: [{
borderColor: '#fc9905',
borderWidth: 2,
radius: 0,
data: 0
}
]
},
options: {
animation,
interaction: {
intersect: false
},
plugins: {
legend: false
},
scales: {
x: {
type: 'time',
title: {
display: true,
text: 'time',
color: '#000000',
font: {
size: 20
}
},
ticks :
{
color: '#000000',
font: {
size: 12
}
}
},
y: {
type: 'linear',
title: {
display: true,
text: 'Electrical field [V/m] # PWM=190',
color: '#000000',
font: {
size: 20
}
},
ticks :
{
color: '#000000',
font: {
size: 12
}
}
}
},
plugins: {
title: {
display: true,
text: 'Electrical field value [V/m]'
}
}
}
};
Chart.defaults.font.size = 20;
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, config);
function addData(chart, data) {
for (var i = 0 ; i < data.length; i++){
chart.data.datasets[0].data.push({"x":data[i].x,"y":(data[i].y-32.671)/0.48025});
};
chart.update();
};
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var txt = this.responseText;
var array = JSON.parse(txt); //Ref: https://www.w3schools.com/js/js_json_parse.asp
addData(myChart,array);
}
};
xhttp.open("GET", "readEFM", true); //Handle readADC server on ESP32
xhttp.send();
};
setInterval(function() {
getData();
}, 5000);
txt = '[{"x":1662921606250,"y":35.71},{"x":1662921606450,"y":35.61},{"x":1662921606650,"y":35.70},{"x":1662921606850,"y":35.74},{"x":1662921607050,"y":35.78},{"x":1662921607250,"y":35.45},{"x":1662921607450,"y":35.65},{"x":1662921607650,"y":35.66},{"x":1662921607850,"y":35.78},{"x":1662921608050,"y":35.76}]';
const myArr = JSON.parse(txt);
addData(myChart,myArr);
myChart.update();
function saveAs(){
let csvContent = "data:text/csv;charset=utf-8,";
for (var i = 0 ; i < myChart.data.datasets[0].data.length; i++){
csvContent+=myChart.data.datasets[0].data[i].x + "," + myChart.data.datasets[0].data[i].y + "\n";
}
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "EFM_log.csv");
document.body.appendChild(link);
link.click();
};
</script>
</body>
</html>
i am using google recaptcha v3 in my website ,
here is the code i have added in my html web page in the head:
<script src="https://www.google.com/recaptcha/api.js?render=my public key"></script>
<script>
grecaptcha.ready(function () {
grecaptcha.execute('my public key', { action: 'contact' }).then(function (token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
ecaptchaResponse.value = token;
});
});
</script>
and i added this in my form :
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
but when i submit the form and try to see the content of $_POST['recaptcha_response'] with var_dump()
it is just an empty string : string(0) ""
where is the mistake ?
thanks for answers !
i tried lots of changes but everytime i get " token = null " then i try this.. 100% working....
in Your Html
<html>
<head>
</head>
<body>
<form id="contact">
<div class="col-12">
<div class="form-group">
<input type="hidden" name="captcha_token" id="recaptchaResponse" data-sitekey="YOUR-SITE-KEY">
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-lg" id="submit-btn">
SUBMIT
</button>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=YOUR-SITE-KEY"></script>
</body>
</html>
after then add in your js file
$(document).ready(function(){
setInterval(function(){
ReCaptchaCallbackV3();
}, 90000);
$(document).on("submit",'#contact',function (e) {
var token = $('[name="g-recaptcha-response"]').val();
console.log(token);
});
});
var ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function () {
grecaptcha.execute('YOUR-SITE-KEY', { action: 'contact' }).then(function (token) {});
});
}
In your original script you have a typo:
var recaptchaResponse = document.getElementById('recaptchaResponse');
ecaptchaResponse.value = token;
Instead of recaptchaResponse, you wrote ecaptchaResponse
I'm trying to send a form content to current(or another) php file for processing, but I don't know how be sure that my codes works!
<a href="#" class="eb" date-uid="<?php echo $value[0]; ?>" data-toggle="modal" data-target=".bs-example-modal-lg">
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<H2>Edit contact</H2>
<form name="editform" method="post">
<input type="name" name="ename" placeholder="name" required /></br></br>
<input type="tel" name="etel" placeholder="phone number" required /></br></br>
<input type="text" name="edes" placeholder="description" required /></br></br>
<input type="submit" class="esub" name="esub" value="Save" />
</form>
<script>
$(document).ready(
function () {
$(".esub").click(
function () {
var uid = $(".eb").attr("data-id");
var ename = document.getElementByName("ename");
var etel = document.getElementByName("etel");
var edes = document.getElementByName("edes");
ajax({
url: 'uedit.php',
type: 'POST',
data: {
owner: uid,
name: ename,
tel: etel,
description: edes
},
success: function (result) {
return result;
}
});
}
);
}
);
</script>
So is my code right? How could I be sure that my codes run correctly?
remove this line from your jquery code
var uid=$(".eb").attr("data-id");
becouse there is no element having class="eb"
You have a couple errors in your code. Try this:
<script>
$( document ).ready(function() {
$(".esub").click(function(){
var uid=$(".eb").attr("data-id");
var ename=getElementByName("ename");
var etel=getElementByName("etel");
var edes=getElementByName("edes");
ajax({
url:'uedit.php',
type:'POST',
data:({
owner:uid,
name:ename,
tel:etel,
description:edes
}),
success:function(result){
return result;
}
});
});
});
</script>
I'm trying to use MEAN stack store and update a simple angular to do list, I've write a restful api for server.the post record function app.addTask = function(task) working fine if I remove $http.get from html, but once put it back, it stop record the new task.
Can't figure it out why, need your guys help.
Here is the server.js
var express = require('express'),
restful = require('node-restful'),
bodyParser = require('body-Parser'),
methodOverride = require('method-override'),
mongoose = restful.mongoose;
var app = express();
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
app.use(methodOverride());
mongoose.connect('mongodb://localhost/transTaskDB');
//create new collection
var TaskSchema = mongoose.Schema({
contents: String,
target: String,
color: String,
status: Boolean
});
var Tasks = restful.model('tasks', TaskSchema);
// Tasks.methods(['get', 'post', 'put', 'delete']);
// Tasks.register(app, '/api/tasks');
// ROUTES FOR OUR API
//===============================================
var router = express.Router(); //get an instance of express Router
// middleware to use for all requests
router.use(function(req, res, next) {
// do logging
console.log('Shown when each request made.');
next(); // make sure we go to the next routes and don't stop here
});
//custom filter find the last entry record
//record new task
router.route('/newtask')
.post(function(req, res){
//create a new instance of the task model
var task = new Tasks();
task.contents = req.body.taskContent;
task.target = req.body.taskUser;
task.color = req.body.taskColor;
// task.contents = "have a tea";
// task.target = "tony";
// task.color = "#e74c3c";
task.status = false; //** fasle means the task still open not done
//task.save();
//throw error exception in console
task.save(function(err, tasks) {
if (err)
res.send(err);
res.json(tasks);
});
})
.get(function(req, res){
Tasks.find(function(err, tasks) {
if (err)
res.send(err);
res.json(tasks);
});
});
//REGISTER OUT ROUTES --------
//all of our route will be prefixed with /api
app.use('/api/tasks', router);
app.listen(3000);
console.log('Server is running at port 3000');
html
<!doctype html>
<html lang='en' ng-app='TaskAPP'>
<head>
<meta charset='UTF-8'>
<title>Trans Task</title>
<link rel='stylesheet' href='bower_components/bootstrap-sass/dist/css/bootstrap.min.css' type='text/css'>
<link rel='stylesheet' href='bower_components/bootstrap-sass/dist/css/bootstrap-theme.min.css' type='text/css'>
<style>
body {
background-image: url('images/swirl_pattern.png');
background-repeat: repeat-y repeat-x;
}
.done {text-decoration: line-through; color: #ccc;}
.task-list {list-style: none;}
.published-list {
padding: 10px 40px;
}
.published-list >div {
padding: 20px;
border-radius: 10px;
font-size:20px;
color: white;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-tower"></span> Trans Task
</a>
</div>
</nav>
<div ng-controller='taskCtrl as app'>
<form role="form" name='frm2' ng-submit="app.addTask(app.task)">
<div class="form-group">
<label>Task Contains</label>
<input type='text' name='taskInput' class='form-control' ng-model="app.task.taskContent" placeholder="Enter task" required/>
</div>
<div class="form-group">
<!--need find a way to load the registed users from mongodb-->
<!--apply socket.io on each individual user to get realtime task update and update manager the roger response-->
<label>Target assign to</label>
<input type='text' name='taskInput' class='form-control' ng-model="app.task.taskUser" placeholder="Enter name" required/>
</div>
<div class="form-group">
<label>with color</label>
<select ng-model="app.task.taskColor">
<option ng-repeat="col in colors" value="{{col.color}}" >{{col.title}}</option>
</select>
</div>
<button class="btn btn-primary" ng-disabled='frm2.$invalid'>Publish</button>
</form>
<ul class='task-list'>
<li class="published-list" ng-repeat="tsk in app.task">
<div ng-style={'background-color':tsk.color}>
<input type='checkbox' ng-model='tsk.status'>
<span ng-class='{"done":tsk.status}'>{{tsk.contents}}</span>
</div>
</li>
</ul>
<!-- <button class="btn btn-danger" ng-click='clearCompleted()'>Clear Completed</button> -->
</div>
</div>
<script src='bower_components/jquery/dist/jquery.min.js'></script>
<script src='bower_components/angular/angular.min.js'></script>
<script src='bower_components/bootstrap-sass/dist/js/bootstrap.min.js'></script>
<script>
//angular parts
var app = angular.module('TaskAPP',[]);
//ajax sample
app.controller("taskCtrl", function($scope, $http) {
$scope.colors = [
{'title': 'red', 'color': '#e74c3c', 'status':true}, {'title': 'green', 'color': '#2ecc71', 'status':true}, {'title': 'amber', 'color': '#f39c12', 'status':true}
];
//you are the problem
var app = this;
$http.get("http://localhost:3000/api/tasks/newtask")
.success(function(data) {
//the return is the tasks json file
app.task = data;
})
app.addTask = function(task) {
$http.post("http://localhost:3000/api/tasks/newtask", task)
.success(function(data) {
//the return is the tasks json file
app.task = data;
})
}
})
</script>
</body>
</html>
I use RESTAdapter with Ember Data. How to make Ember controller handle server validation errors? I think this code should be in the line "console.log(todo.errors);" but I have no idea how to achieve rendaring needed template...
App.TodosRoute = App.AuthenticatedRoute.extend({
model: function () {
return App.Todo.find();
}
});
App.TodosController = Ember.ArrayController.extend({
createTodo: function(todo) {
var data = this.getProperties('title', 'priority', 'due_date');
var todo = App.Todo.createRecord(data);
var self = this;
todo.on('becameInvalid', function(todo) {
// show errors on the form. code goes here
console.log(todo.errors);
});
todo.on('didCreate', function() {
// render list. code goes here
self.set('title', '');
self.set('priority', '');
self.set('due_date', '');
});
todo.save();
}
});
<script type="text/x-handlebars" data-template-name='todo/_edit'>
{{input type='number' class="input" placeholder="Priority" value=priority}}
{{input class="input" placeholder="What needs to be done?" value=title}}
{{input type='date' class="input" placeholder="Due date" value=due_date}}
</script>
<script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp">
<header id="header">
{{partial 'todo/edit'}}
<button {{action "createTodo"}}>Save</button>
</header>
<section id="main">
<ul id="todo-list" class="sortable">
{{#each controller itemController='todo'}}
{{#unless isNew}}
<li {{bindAttr class="isEditing:editing"}} data-id="{{unbound id}}">
{{#if isEditing}}
{{partial 'todo/edit'}}
<button {{action "saveTodo"}} class="save-button">Save</button>
{{else}}
<label>{{priority}}</label>
<label>{{title}}</label>
<label>{{date due_date}}</label>
<button {{action "editTodo"}} class="edit-button">Edit</button>
<button {{action "removeTodo"}} class="destroy">Delete</button>
{{/if}}
</li>
{{/unless}}
{{/each}}
</ul>
</section>
</section>
</script>
Finally I got code like this:
App.TodosNewController = Ember.ObjectController.extend({
create: function() {
var data = this.getProperties('title', 'priority', 'due_date');
var todo = App.Todo.createRecord(data);
var self = this;
todo.on('becameInvalid', function(todo) {
self.set('model', todo);
});
todo.on('didCreate', function() {
self.set('priority', '');
self.set('title', '');
self.set('due_date', '');
self.transitionToRoute('todos');
});
todo.save();
}
});
Hope, it will help somebody