Socket.io not responding, Node.js - mysql

I'm moving my code to a server. This code works and renders database information perfectly on my own server I set up on localhost, however an error from index.html stating "io is not defined" displays when I run the code from my server. For whatever reason socket.io is not being recognized. Also, nothing is shown if I type in localhost:3000 in my browser. Any help would be greatly appreciated.
I have two files, server.js and index.html.
server.js:
var mysql = require('mysql')
var io = require('socket.io').listen(3000)
var db = mysql.createConnection({
host: '127.0.0.1', // Important to connect to localhost after connecting via ssh in screen
user: 'username',
password: '12345',
database: '12345',
port: 3306
})
// Log any errors connected to the db
db.connect(function(err){
if (err) console.log(err)
})
// Define/initialize our global vars
var notes = []
var isInitNotes = false
var socketCount = 0
//Socket.io code below
io.sockets.on('connection', function(socket){
// Socket has connected, increase socket count
socketCount++
// Let all sockets know how many are connected
io.sockets.emit('users connected', socketCount)
socket.on('disconnect', function() {
// Decrease the socket count on a disconnect, emit
socketCount--
io.sockets.emit('users connected', socketCount)
})
socket.on('new note', function(data){
// New note added, push to all sockets and insert into db
notes.push(data)
io.sockets.emit('new note', data)
// Use node's db injection format to filter incoming data
db.query('INSERT INTO notes (note) VALUES (?)', data.note)
})
console.log("10");
// Check to see if initial query/notes are set
if (! isInitNotes) {
// Initial app start, run db query
db.query('SELECT * FROM `Users`')
.on('result', function(data){
// Push results onto the notes array
//console.log(notes);
notes.push(data)
})
.on('end', function(){
// Only emit notes after query has been completed
socket.emit('initial notes', notes)
})
isInitNotes = true
} else {
// Initial notes already exist, send out
socket.emit('initial notes', notes)
}
})
index.html: (thinking the problem is in either the way I'm linking my socket.io.js file, or in the line of code where I declare the variable "socket")
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Script below works with my server I set up on local host
<script src="http://localhost:3000/socket.io/socket.io.js"></script>-->
<!-- script below properly links to the socket.io.js file in my directory, and throws no errors-->
<script type= "node_modules/socket.io/node_modules/socket.io-client/socket.io.js"></script>
<script>
$(document).ready(function(){
var socket = io.connect('http://localhost:3000'); //LINE OF CODE IN QUESTION
//Code below not really relevant to problem, but still part of my project.
socket.on('initial notes', function(data){
var html = ''
for (var i = 0; i < data.length; i++){
// We store html as a var then add to DOM after for efficiency
html += '<li>' + data[i].Name + '</li>'
}
$('#notes').html(html)
})
// New note emitted, add it to our list of current notes
socket.on('new note', function(data){
$('#notes').append('<li>' + data.Name + '</li>')
})
// New socket connected, display new count on page
socket.on('users connected', function(data){
$('#usersConnected').html('Users connected: ' + data)
})
// Add a new (random) note, emit to server to let others know
$('#newNote').click(function(){
var newNote = 'This is a random ' + (Math.floor(Math.random() * 100) + 1) + ' note'
socket.emit('new note', {note: newNote})
})
})
</script>
<ul id="notes"></ul>
<div id="usersConnected"></div>
<div id="newNote">Create a new note:</div
SOLVED!
Figured it out. I used "script src="my servers ip address:3000/socket.io/socket.io.js" and then change the variable socket to var socket = io.connect('Servers ip address:3000'); So the answer was to take out localhost all together.

I believe there could be a problem loading Socket.io from your server if it works locally (perhaps a permissions issue?), try loading it from Socket.io CDN to test.
<script src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>

Related

Node.js - can it be used for Desktop app development - MySQL, DataTable & File Open

Since last 3days, I am after this, not sure I understood its purpose properly - Node.js/Electron.
Few years back I had built a simple VB.net application - It connects to Mysql (contains a table of filename with path), shows the filenamesPath as rows in grid, upon double click, it opens the file.
Can I do such a thing in Node.js or Electron?.
1) I am able to make a js file with a button which can open a local file, in Node.js desktop app window (not browser). [https://www.codediesel.com/nodejs/how-to-open-various-desktop-applications-from-nodejs/ ].
2) Also I am able to view mySql table as html table in browser with localhost:port as well as the rows in console-log window [https://www.sitepoint.com/using-node-mysql-javascript-client/]
Is it possible to club both of these 2, Or Should I try something else. [As the rows are more than 100K, would need also Ajax]
EDITED:
test.html
<html>
<head>
<script>window.$ = window.jQuery = require('./js/jquery.js');</script>
<meta http-equiv="Content-Security-Policy" content="script-src 'unsafe-inline';">
</head>
<body>
<h1>Electron MySQL Example</h1>
<div id="resultDiv"></div>
<div>
<input type="button" id="action-btn" value="Retrieve 10 first rows in the database" />
<table id="table" border="1">
<tbody>
</tbody>
</table>
</div>
<script>
var mysql = require('mysql');
var connection = mysql.createConnection({
host : '10.251.198.2',
user : 'root',
password : '',
database : 'test'
});
connection.connect();
var sql = 'SELECT `id`,`name` FROM `employees`';
connection.query(sql, function (error, results, fields) {
if (error) console.log(error.code);
else {
console.log(results);
$('#resultDiv').text(results[0].name); //emp_name is column name in your database
}
});
connection.end();
</script>
<!---New --->
<script>
var mysql = require('mysql');
function el(selector) {
return document.getElementById(selector);
}
el('action-btn').addEventListener('click', function(){
// Get the mysql service
getFirstTenRows(function(rows){
var html = '';
rows.forEach(function(row){
html += '<tr>';
html += '<td>';
html += row.id;
html += '</td>';
html += '<td>';
html += row.name;
html += '</td>';
html += '</tr>';
console.log(row);
});
document.querySelector('#table > tbody').innerHTML = html;
});
},false);
function getFirstTenRows(callback){
var mysql = require('mysql');
// Add the credentials to access your database
var connection = mysql.createConnection({
host : '10.251.198.2',
user : 'root',
password : '',
database : 'test'
});
// connect to mysql
connection.connect(function(err) {
// in case of error
if(err){
console.log(err.code);
console.log(err.fatal);
}
});
// Perform a query
$query = 'SELECT `id`,`name` FROM `employees` LIMIT 10';
connection.query($query, function(err, rows, fields) {
if(err){
console.log("An error ocurred performing the query.");
console.log(err);
return;
}
callback(rows);
console.log("Query succesfully executed");
});
// Close the connection
connection.end(function(){
// The connection has been closed
});
}
</script>
</body>
</html>
Index.js
const electron = require('electron');
const app = electron.app;
const path = require('path');
const url = require('url');
const BrowserWindow = electron.BrowserWindow;
var mainWindow;
app.on('ready',function(){
mainWindow = new BrowserWindow({
width: 1024,
height: 768,
webPreferences: {
nodeIntegration: true
},
//backgroundColor: '#2e2c29'
});
//mainWindow.loadURL('https://github.com');
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'test.html'),
protocol: 'file:',
slashes: true
}));
});
You can use Electron to create Desktop app and connect to Mysql database. Here are couple of useful links.
https://ourcodeworld.com/articles/read/259/how-to-connect-to-a-mysql-database-in-electron-framework
https://github.com/techiediaries/electron-mysql-demo
Node JS is primarily used to create REST API, serve web pages from the server. You may create API in Node JS using Express/Restify which interacts with DB and the Electron app can consume this service. It depends on your requirement whether or not you want to have API layer.
Sure, you can build desktop Apps nowadays in Node, in fact there is multible options that you can choose from:
Electron
Meteor
NWJS
App JS
Proton Native
All of these frameworks/technology allow you to write you App in Javascript and run it on Desktop platforms.

When database is changed value is not updating in socket.io

I have write code of socket.io and nodejs to fetch value from database and send the value to the client without refresh with setInterval. It is working fine but I don't want to use setInterval function. Because sometimes my database change in hours, sometimes in minuts and sometimes in miliseconds. So I don't want to use setInterval function. I only want that when database value change it automatically update. thats it. I am kinda stuck in it.
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
var mysql = require('mysql');
users = [];
connections = [];
disconnection = [];
var connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'test'
});
connection.connect(function(error){
if(!!error) {
console.log('Error in connection');
} else {
console.log('Database Connected');
}
});
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: %s socket connected',
connections.length);
setInterval(function() {
connection.query('select value from piechart',
function(error, rows, fields) {
if(rows.length>0) {
io.sockets.emit('new message', {msg: rows});
//io.sockets.emit('new message', {msg:
'Change.'});
//console.log('Value is fetched from database');
//console.log(rows);
} else {
alert('what will happend');
}
//connection.release();
});
}, 3000);
});
You should take the interval out of the socket scope and make it global.
Then make an interval loop that fetches the value and emits it globally if the value changed from last time it was fetched, to all connected socket clients.
You state that you would like to avoid an interval, but at the end you are going to be needing one.
You can check out mysql-events
A Node JS NPM package that watches a MySQL database and runs callbacks
on matched events.
Another way around it, would be to find all the events that update the value and make them inform your NodeJS process.
But this might be hard if it has components that are out of your control (example : unable of adding code to other process that updates DB)

Real-time database view on HTML page with Socket.io

I have a raspberry Pi that is constantly pushing data to a MySQL database via PHP. I am trying to create a website where I can see the contents of this database realtime.
I've been following this tutorial : http://markshust.com/2013/11/07/creating-nodejs-server-client-socket-io-mysql which shows an example on using socket.io for this purpose. This is working fine from 2 clients, when I add a new note it updates on both browsers. The problem is when I manually add a record to the database from mysql CLI, it does not update. I'm guessing this is because there is no emit happening. How can I implement this?
Server.js:
var mysql = require('mysql')
// Let’s make node/socketio listen on port 3000
var io = require('socket.io').listen(3000)
// Define our db creds
var db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root',
database: 'node'
})
// Log any errors connected to the db
db.connect(function(err){
if (err) console.log(err)
})
// Define/initialize our global vars
var notes = []
var isInitNotes = false
var socketCount = 0
console.log("connected");
io.sockets.on('connection', function(socket){
// Socket has connected, increase socket count
socketCount++
// Let all sockets know how many are connected
io.sockets.emit('users connected', socketCount)
socket.on('disconnect', function() {
// Decrease the socket count on a disconnect, emit
socketCount--
io.sockets.emit('users connected', socketCount)
})
socket.on('new note', function(data){
// New note added, push to all sockets and insert into db
notes.push(data)
io.sockets.emit('new note', data)
// Use node's db injection format to filter incoming data
db.query('INSERT INTO notes (note) VALUES (?)', data.note)
})
// Check to see if initial query/notes are set
if (! isInitNotes) {
// Initial app start, run db query
db.query('SELECT * FROM notes')
.on('result', function(data){
// Push results onto the notes array
notes.push(data)
})
.on('end', function(){
// Only emit notes after query has been completed
socket.emit('initial notes', notes)
})
isInitNotes = true
} else {
// Initial notes already exist, send out
socket.emit('initial notes', notes)
}
})
Index.html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script>
$(document).ready(function(){
// Connect to our node/websockets server
var socket = io.connect('http://localhost:3000');
// Initial set of notes, loop through and add to list
socket.on('initial notes', function(data){
var html = ''
for (var i = 0; i < data.length; i++){
// We store html as a var then add to DOM after for efficiency
html += '<li>' + data[i].note + '</li>'
}
$('#notes').html(html)
})
// New note emitted, add it to our list of current notes
socket.on('new note', function(data){
$('#notes').append('<li>' + data.note + '</li>')
})
// New socket connected, display new count on page
socket.on('users connected', function(data){
$('#usersConnected').html('Users connected: ' + data)
})
// Add a new (random) note, emit to server to let others know
$('#newNote').click(function(){
var newNote = 'This is a random ' + (Math.floor(Math.random() * 100) + 1) + ' note'
socket.emit('new note', {note: newNote})
})
})
</script>
<ul id="notes"></ul>
<div id="usersConnected"></div>
<div id="newNote">Create a new note</div>
This is similar to a previous question, where it appears there was no simple way to do this with MySQL.
If you are in an early enough stage of development that you are not tied to MySQL, then I will point out that you can solve this problem with postgresql:
Be pushed to from PHP via PDO library (see docs).
Runs on the Raspberry Pi.
Can detect updates pushed from anywhere on the command-line via pg_notify on a trigger (see docs).
Updates can be subscribed to with NodeJS via the pg package.
On a technical level this will work, but databases in general are not efficient as messaging systems (watch out for the Database-as-IPC anti-pattern). The PHP client could also emit its own notification when things happen, via a message queue, UDP socket, or something else.

How to display connected clients using node.js and socket.oi.js on HTML

I am new with node.js and socket.io i was able to start a local server via node.js and get the numbers of client connected on port 3000 using console.log now my next step is displaying it on my HTML, i was reading about how to include socket.io.js on HTML and tried the on('connect') method but its returning a undefined error , Any advice would be great thanks in advance!
My 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('listening to port 3000, server is running..');
app.get('/', function (req,res){
res.sendFile(__dirname + '/index.html');
});
io.sockets.on('connection',function(socket){
connections.push(socket);
console.log('Connected: %s sockets connected', connections.length);
//Disconnect
socket.on('disconnect', function(data){
users.splice(users.indexOf(socket.username), 1);
updateUsernames();
connections.splice(connections.indexOf(socket), 1);
console.log('Disconnected: %s sockets connected', connections.length);
});
});
On my index.html
//This is located on my html head tag
<script src="http://localhost/socket.io/socket.io.js"></script>
<div class="col-lg-12">
<h1 id="users"></h1>
</div>
<script>
var socket = io.connect('http://localhost:3000');
socket.on('connect',function(){
$('#users').html = socket.users.length;
));
</script>
I manage to display the numbers of connected users on client side by emitting a event than client will receive and display it.
revised my server.js
io.sockets.on('connection',function(socket){
connections.push(socket);
console.log('Connected: %s sockets connected', connections.length);
//added this below
io.sockets.emit ('totalUsers', {count: connections.length});
//Disconnect
socket.on('disconnect', function(data){
users.splice(users.indexOf(socket.username), 1);
updateUsernames();
connections.splice(connections.indexOf(socket), 1);
console.log('Disconnected: %s sockets connected', connections.length);
//added this below
io.sockets.emit ('totalUsers', {count: connections.length});
});
Then on my index.html
socket.on('totalUsers', function(data){
console.log(data.count);
$users.html('Total connected users: '+data.count);
});
You must include or link your socket.io.js before the io.connect() on your html. like this
<script type="text/javascript" src="assets/nodejs/node_modules/socket.io-client/dist/socket.io.js"></script>
you can use this cdn
https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js
but it is better to use your socket.io.json your local folder it is in the node_modules/socket.io-client/dist/socket.io.js if you are using latest version of node.
Hope it will help.

Res.write is not working when continuously sending UDP packet

//Sending UDP message to TFTP server
//dgram modeule to create UDP socket
var express= require('express'), fs= require('fs'),path = require('path'),util = require('util'),dgram= require('dgram'),client= dgram.createSocket('udp4'),bodyParser = require('body-parser'),app = express(), ejs = require('ejs');
var plotly = require('plotly')("Patidar", "ku0sisuxfm")
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())
app.use(express.static('public'));
//Reading in the html file for input page
app.get('/', function(req, res){
var html = fs.readFileSync('index2.html');
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(html);
});
//reading in html file for output page
app.get('/output', function(req, res){
var html = fs.readFileSync('index4.html');
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(html);
});
//Recieving UDP message
app.post('/output', function(req, res){
var once= req.body.submit;
if (once == "Once") {
//Define the host and port values of UDP
var HOST= req.body.ip;
var PORT= req.body.port;
//Reading in the user's command, converting to hex
var message = new Buffer(req.body.number, 'hex');
//Sends packets to TFTP
client.send(message, 0, message.length, PORT, HOST, function (err, bytes) {
if (err) throw err;
});
//Recieving message back and printing it out to webpage
client.on('message', function (message) {
fs.readFile('index3.html', 'utf-8', function(err, content) {
if (err) {
res.end('error occurred');
return;
}
var temp = message.toString(); //here you assign temp variable with needed value
var renderedHtml = ejs.render(content, {temp:temp, host: HOST, port: PORT}); //get redered HTML code
res.end(renderedHtml);
//var data = [{x:[req.body.number], y:[temp], type: 'scatter'}];
//var layout = {fileopt : "overwrite", filename : "simple-node-example"};
//plotly.plot(data, layout, function (err, msg) {
//if (err) return console.log(err);
//console.log(msg);
//});
});
});
}
if (once == "continuous") {
var timesRun = 0;
var requestLoop = setInterval(function(){
timesRun += 1;
if(timesRun === 5){
clearInterval(requestLoop);
}
//Define the host and port values of UDP
var HOST= req.body.ip;
var PORT= req.body.port;
//Reading in the user's command, converting to hex
var message = new Buffer(req.body.number, 'hex');
//Sends packets to TFTP
client.send(message, 0, message.length, PORT, HOST, function (err, bytes) {
if (err) throw err;
});
//Recieving message back and printing it out to webpage
client.on('message', function (message) {
fs.readFile('index3.html', 'utf-8', function(err, content) {
if (err) {
res.end('error occurred');
return;
}
var temp = message.toString(); //here you assign temp variable with needed value
var renderedHtml = ejs.render(content, {temp:temp, host: HOST, port: PORT}); //get redered HTML code
res.write(renderedHtml);
//var data = [{x:[req.body.number], y:[temp], type: 'scatter'}];
//var layout = {fileopt : "overwrite", filename : "simple-node-example"};
//plotly.plot(data, layout, function (err, msg) {
//if (err) return console.log(err);
//console.log(msg);
//});
});
});
}, 10000);
}
});
//Setting up listening server
app.listen(3000, "192.168.0.136");
console.log('Listening at 192.168.0.136:3000');
I have two button, one button sends the UDP packet once, while a continuous button sends the same UDP packets every 10 seconds. However, when this button is pressed, res.write is repeating the entire output again. Look at the attached pic to see output[![enter image description here][1]][1]
After putting your code into an auto-code-formatter to make it readable, I can see that you are doing this:
client.on('message', function (message) { ...
inside of your app.post() handler. That means that every time your post handler is called, you add yet another client.on('message', ...) event handler. So, after it's called the 2nd time, you have two event handlers, after it's called the 3rd time, you have three and so on.
So, as soon as you have these duplicate, each will get called and you will get duplicate actions applied.
Your choices are to either:
Use .once() for the event handler so it is automatically removed after it fires.
Remove it manually after it fires or when you are done with it.
Add it once outside your app.post() handler so you never add duplicates.
Restructure the way your code works so it doesn't have this type of issue. For example, you have two different handlers for the same incoming message. This is a sign of very stateful code which is more complex to write properly. A better design that isn't stateful in that way would be simpler.