I need help in url mapping in express.js framework in nodejs.
router.get('/first/:second_param', function(res,req){
//processing second_param and rendering a template,
res.render('first.html');
});
router.get('/first/:second_param/get_items', function(res,req){
//again evaluating second_param and and responding accordingly
res.send(jsonData);
});
Is this kind of routing possible in Express 4.0?
first.html makes a ajax request at url './get_items'
Yes, it is possible to do it with Express 4.0.
Here is an example:
you need to install ejs and express: npm install ejs express
app.js file:
var express = require('express');
var app = express();
app.set('view engine', 'ejs');
app.get('/', function(req, res) {
res.redirect('/home/2');
});
app.get('/home/:itemId', function(req, res) {
var itemId = req.params.itemId;
console.log(itemId);
res.render('index');
});
app.get('/api/items/:itemId', function(req, res) {
var itemId = req.params.itemId;
console.log('item id: %s', itemId);
res.json([{name: 'item1'}]);
});
app.listen(8080, function() {
console.log('server up and running at 8080');
});
views/index.ejs file:
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Hello World!</h1>
<script>
function responseGET() {
if(this.readyState !== 4 || this.status !== 200) return;
alert(this.responseText);
}
function getItems(URL) {
var request = new XMLHttpRequest();
request.open('GET', URL, true);
request.onreadystatechange = responseGET.bind(request);
request.send(null);
}
function domReady() {
getItems('http://localhost:8080/api/items/1');
}
document.addEventListener('DOMContentLoaded', domReady);
</script>
</body>
</html>
Basically I am have a server which is serving an index.html when someone requests at /home/:itemId and also I am exposing another route for serving items /api/items/:itemId.
From the client side once the DOM is ready I am requesting to /api/items/:itemId some items which then are displayed in the index html.
Related
I'm learning Socket.io and practicing the demo tutorial with individual client side script file.
However, it didn't work as expected.
Here is my code.
client side HTML: index.html
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="./app.js"></script>
</body>
</html>
client side JS: app.js
import { io } from "socket.io-client";
var socket = io('http://localhost:3000');
var messages = document.getElementById('messages');
var form = document.getElementById('form');
var input = document.getElementById('input');
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
server side JS: index.js
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 3000;
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a new user join: ', socket.id);
socket.on('chat message', msg => {
io.emit('chat message', msg);
});
});
http.listen(port, () => {
console.log(`Socket.IO server running at http://localhost:${port}/`);
});
After node index to execute my server and open localhost:3000 on my browser, the console.log should tells 'a new user join: xxx', but it didn't.
Is there anything wrong with client side app.js?
I'm working on a project where I'm sending temperature data via Arduino to a Node server. Arduino sends data to the server through URL parameters:
http://localhost:3000/submit?temprature=25
I'm then fetching the posted data using the following Node server.js
var express = require('express');
url = require('url');
var app = express();
app.get('/submit', function(req, res){
var data = url.parse(req.url,true).query;
console.log(data);
});
app.listen(3000, function(){
console.log('listening on *:3000');
});
I'm able to show the required data with console.log(), but what I want is, as soon as Arduino sends the data through URL parameters, that data should automatically echo/print on the server: http://localhost:3000/index.html like in real time. How can I achieve this?
You can use socket.io to emit events every time the temperature is updated by your arduino device:
var http = require('http');
var url = require('url');
var express = require('express');
var app = express();
var server = http.createServer(app);
var io = require('socket.io').listen(server); //pass a http.Server instance
server.listen(3000);
app.get('/submit', function(req, res){
var data = url.parse(req.url,true).query;
io.emit('temperature', data);
res.send('Temperature Updated to: ' + data.temperature);
});
app.get('/index', function(req, res){
res.sendFile(__dirname + '/public/index.html');
});
Then on the client side, you can listen for events and update the information. This is public/index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Socket.IO Temperature Example</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
</head>
<body>
<h1 id="temperature"></h1>
<script>
var socket = io('http://localhost:3000');
socket.on('temperature', function (data) {
console.log(data);
$('h1#temperature').html(data.temperature);
});
</script>
</body>
</html>
I am newbie in node.js development and I have a particular problem. I want to create a one page web app with node.js which will the user will submit request data and then gets data back from imdb api and will show them on the same page. My code is the following
server.js
#!/usr/bin/env node
var express = require('express');
var app = express();
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
var fs = require('fs');
var inputFile = fs.readFileSync('index.html').toString();
console.log(inputFile);
app.get('/', function(request, response) {
response.send(inputFile);
});
var port = process.env.PORT || 8080;
app.listen(port, function() {
console.log("Listening on " + port);
})
app.post('/', function(req, res){
if (req.body.mysearch == ""){
var search = "heroes";
}else{
var search = req.body.mysearch;
}
console.log(search);
var http = require('http');
http.get("http://www.imdbapi.com/?t=" + search, function(res) {
console.log("Got response: " + res.statusCode);
var data = '';
res.on('data', function (chunk){
data += chunk;
})
res.on('end',function(){
// the whole of webpage data has been collected. parsing time!
var obj = JSON.parse(data);
console.log( obj.Title );
})
}).on('error', function(e) {
console.log("Got error: " + e.message);
})
});
index.html
<html>
<head>
<meta charset="utf-8">
<title>Title of the document</title>
</head>
<body>
<form id="myform" method="post" action="/"enctype="application/x-www-form-urlencoded">
<input type="text" id="search" name="mysearch">
<input type="submit" id="mysubmit" value="Search IMDB">
</form>
<div id="myTitle">
</div>
</body>
</html>
The code so far has successfully parsing the data from imdb and shows them on the console. The question is how I am going to print them on the web page (e.g on the div tag) without reload the page (ajax)
I had a similar question regarding re-rendering of div that got answered
how-to-re-render-html-div-in-node-js
Basically solution was to use client side frameworks like Angular.js to help in re-rendering via 2 way data binding.
I'm new to socket.io and i already have a problem, minor i think.
I have installed node.js properly and socket.io too with npm. Then just for testing i cut and paste a sample of code from socket.io and everything works well.
Now, i want to strcuture my code and folders and i have created a folder "client" to put a fresh new js file client.js with the client code from the example.
Here is my architecture
/client
client.js
index.html
server.js
client.js :
var socket = io.connect('http://localhost:80');
socket.on('news', function (data) {
alert('sqd');
console.log(data);
socket.emit('my other event', { my: 'data' });
});
server.js
var app = require('http').createServer(handler)
, io = require('socket.io').listen(app)
, fs = require('fs')
app.listen(80);
function handler (req, res) {
fs.readFile(__dirname + '/index.html', 'utf-8',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html ' + __dirname);
}
res.writeHead(200, {'Content-Type' : 'text/html'});
res.end(data);
});
}
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
index.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="/client/client.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
</body>
</html>
When i refresh my browser at localhost:80 i have a error on my client.js :
Uncaught SyntaxError: Unexpected token <
Resource interpreted as Script but transferred with MIME type text/html
It seems that there's a problem to interpret my js file as a js file. I've read some threads on the question but nothing works.
Can you help me please ?
Thanx :)
Ok i've found a solution... You have to specify the content type for each file request in a static webserver. May be it could help someone.
Here is the handler function :
function handler (req, res) {
var filePath = req.url;
if (filePath == '/') {
filePath = './client/index.html';
} else {
filePath = './client/lib' + req.url;
}
var extname = path.extname(filePath);
var contentType = 'text/html';
switch (extname) {
case '.js':
contentType = 'text/javascript';
break;
case '.css':
contentType = 'text/css';
break;
}
path.exists(filePath, function(exists) {
if (exists) {
fs.readFile(filePath, function(error, content) {
if (error) {
res.writeHead(500);
res.end();
}
else {
res.writeHead(200, { 'Content-Type': contentType });
res.end(content, 'utf-8');
}
});
}
else {
res.writeHead(404);
res.end();
}
});
}
Hope this can help someone.
I love to post a problem and respond by myself with no help. Somehow it meens that i'm desesperate too fast. And i love to tell my life in a post too :)
Ok i'm gonna eat something and drink more coffee !!!
Thank you so much! This solved my problem!! And I changed the switch to following code:
var extname = path.extname(filePath);
var contentTypesByExtention = {
'html': 'text/html',
'js': 'text/javascript',
'css': 'text/css'
};
var contentType = contentTypesByExtention[extname] || 'text/plain';
It may be easier to maintain :)
Only that solves:
function handler (request, response) {
var file = __dirname + (request.url == '/' ? '/index.html' : request.url);
fs.readFile(file, function(error, data) {
if (error) {
response.writeHead(500);
return response.end('Error loading index.html');
}
response.writeHead(200);
response.end(data, 'utf-8');
});
}
that's what i need! thank you!
and
we'll add one code line a top of
server.js
var app = require('http').createServer(handler)
, io = require('socket.io').listen(app)
, fs = require('fs')
**, path = require('path')**
You can use mime module as well:
var mime = require('mime')
, content_type = mime.lookup(filePath);
// handle the request here ...
response.setHeader('Content-Type', content_type);
response.writeHead(200);
response.end(data);
And you must made fs.readFile wrapped by a closure, otherwise some file (especially the last file) will be read more than once, and others will not be read at all. And the contentTypewill not be set as you wish. This is because of the callback strategy used by fs.readFile. The problem does not appear when the html file just load one external file, but as the external files(css, js, png) loaded more than one it will appear as i pointed out above. (I came upoon this by myself)
So your code should make a little change as follows:
;(function (filename, contentType) {
fs.readFile(filename, function(err, file) {
// do the left stuff here
});
}(filename, contentType));
i'm trying the this simple socket.io example and it works in Safari (send/receive from both sides). However, in the Chrome the client receives messages but the server won't receive messages sent by the client
index.html
<!doctype html>
<html>
<head>
<title>web sockets</title>
<meta charset="utf-8">
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost:8888');
socket.on('news', function (data) {
console.log(data);
writeMessage(data);
socket.emit('my other event', { my: 'data' });
});
function writeMessage(msg) {
var msgArea = document.getElementById("msgArea");
if (typeof msg == "object") {
msgArea.innerHTML = msg.hello;
}
else {
msgArea.innerHTML = msg;
}
}
</script>
</head>
<body>
<div id="msgArea">
</div>
</body>
</html>
server.js
var app = require('http').createServer(handler)
, io = require('/usr/local/lib/node_modules/socket.io').listen(app)
, fs = require('fs')
app.listen(8888);
function handler (req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
Am I missing something? Chrome is on v.19
You can use http://socket.io-test.com to see if the problem is with your browser/proxy or your code.