I am facing an issue rendering the 'EJS' Express template while running the node.js server. I have provided the codes below. As you can see, I am implementing the http.createServer(function (req, res) to read and write messages to the client. But the template holding the HTML code doesn't get rendered. The main objective of the code is for the client to post a message 'Hello from Client' to the server and the server responding to the client with 'Hello from Server'.
app.js (Server Side)
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, request = require ('request')
, cheerio = require ('cheerio')
, $;
var app = express();
//console.log($('[class = "orange"]').attr('id'));
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', routes.index);
app.get('/users', user.list);
http.createServer(function (req, res) {
var body="";
console.log('Request received: ');
req.on('data', function (chunk) {
body +=chunk;
});
req.on('end', function(){
console.log("Body: "+body);
res.write('Hello from Server');
res.end();
});
}).listen(3000);
index.ejs (Client Side)
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<input type="button" id="stopButton" value="Button1"/>
<input type="button" id="stopButton2" value="Button2"/>
<p>Welcome to <%= title %></p>
<ul id="fruits">
<li id= "1" class="apple">Apple</li>
<li id = "2" class="orange">Orange</li>
<li id = "3" class="pear">Pear</li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
var formData = {data: "Hello from Client"};
$.ajax({
url: 'http://localhost:3000',
dataType: "json",
type: 'POST',
data: formData,
jsonpCallback: 'callback',
success: function (data, textStatus, jqXHR) {
var ret = jQuery.parseJSON(data);
console.log(ret.msg);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log("Error received");
}
});
});
</script>
</body>
</html>
package.JSON
{
"name": "NewProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.2.6",
"ejs": "*"
}
}
Earlier I had tried using app.get which had worked.
What is the primary difference between using app.get(), request() and http.createServer(). When should we use what?
It's not gonna work that way. Have a loo at the docs:
http://expressjs.com/starter/hello-world.html
For example:
var express = require('express');
var bodyParser = require('body-parser')
var app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())
app.post('/hello', function (req, res) {
res.send("Hello from server");
});
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
Also, please use a recent version of Express, yours is outdated.
Related
I have installed socket.io before on a Node project without the need of express templating framework.
Issue
if I add this line of code: http.listen(3001, function() { console.log('listening on port 3001'); }); then on visiting localhost:3000 I have my app in which sockets does not work and on localhost:3001 I have sockets working. How do I merge both of these?
Error
socket.io.js:2 GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=LpQ6zKP net::ERR_CONNECTION_REFUSED
I am trying to add socket.io in express framework like below:
app.js file
const express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var expressValidator = require('express-validator');
var cookieParser = require('cookie-parser');
var session = require('express-session');
var passport = require('passport');
var LocalStrategy = require('passport-local').Strategy;
var bodyParser = require('body-parser');
var flash = require('connect-flash');
var multer = require('multer');
var upload = multer({ dest: './uploads' });
var mongo = require('mongodb');
var mongoose = require('mongoose');
var db = mongoose.connection;
var index = require('./routes/index');
var app = express();
var http = require( "http" ).createServer( app );
var io = require( "socket.io" )( http );
http.listen(3000, "127.0.0.1");
var httpk = require('http');
var nsp = io.of('/channel1');
var connectCounter = 0;
var interval = undefined;
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect jQuery JS
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect Bootstrap CSS
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
//Handle express sessions
app.use(session({
secret:'secret',
saveUninitialized: true,
resave:true
}));
// Passport
app.use(passport.initialize());
app.use(passport.session());
// Validator
app.use(expressValidator({
errorFormatter: function(param, msg, value) {
var namespace = param.split('.')
, root = namespace.shift()
, formParam = root;
while(namespace.length) {
formParam += '[' + namespace.shift() + ']';
}
return {
param : formParam,
msg : msg,
value : value
};
}
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//For flash messages
app.use(flash());
app.use(function (req, res, next) {
res.locals.messages = require('express-messages')(req, res);
next();
});
app.get('*', function(req, res, next){
res.locals.user = req.user || null;
next();
});
app.use('/', index);
function test() {
httpk.get("api-url", function(res) {
var body = '';
res.on('data', function(data) {
body += data;
});
res.on('end', function() {
var parsed = JSON.parse(body);
//console.log(parsed.data.product1);
var dataArray = [];
dataArray.push((parseFloat(parsed.data.product1) + Math.random() * 0.1 + 0.01).toFixed(2));
dataArray.push((parseFloat(parsed.data.product2) + Math.random() * 0.1 + 0.01).toFixed(2));
console.log(dataArray);
nsp.emit('live-quote', dataArray);
});
});
}
nsp.on('connection', function(socket) {
socket.on('pass_data', function(my) {
console.log(my);
});
//Make a http call
connectCounter++;
if (interval === undefined) interval = setInterval(test, 1000);
nsp.emit('live-users', connectCounter);
console.log('1 user connected, Total Joined: ' + connectCounter);
socket.on('disconnect', function() {
connectCounter--;
if (connectCounter <= 0 && interval !== undefined) interval = clearInterval(interval);
nsp.emit('live-users', connectCounter);
console.log('1 user disconnected, Total Left: ' + connectCounter);
});
console.log("total clients: " + io.engine.clientsCount);
});
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
head.ejs
<title><%= title %></title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<link rel='stylesheet' href='/stylesheets/style.css' />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" >
jsdefaults.ejs
<script src="/javascripts/script.js" ></script>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function() {
var socket = io('/channel1');
var currentTime;
socket.on('live', function(msg) {
console.log("msg: "+msg);
});
socket.on('live-users', function(users) {
$('#total').text(users);
});
});
</script>
index.ejs
<!DOCTYPE html>
<html>
<head><% include partials/head.ejs %></head>
<body>
<% include partials/header.ejs %>
<div class="container" style="margin-top:20px;">
</div>
<% include partials/footer.ejs %>
<% include partials/jsdefaults.ejs %>
</body>
</html>
It looks like you used express-generator to set up your Express application, in which case the HTTP server will be set up in bin/www and that's where the socket.io server should be set up as well (since you want to share the HTTP server between Express and socket.io).
The default bin/www contains this:
/**
* Create HTTP server.
*/
var server = http.createServer(app);
That's where you add the socket.io server:
var server = http.createServer(app);
var io = require('socket.io')(server);
var nsp = io.of('/channel1');
nsp.on('connection', ...);
I am trying to run Cheerio on node.js with ejs as my template. Whenever I run the server, I get 'undefined' at the the 'console.log'. Given below is my code.
Server side
app.js
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, request = require ('request')
, cheerio = require ('cheerio');
var $ = cheerio.load('<ul id="fruits">...</ul>');
var app = express();
console.log($('[class = "orange"]').attr('id'));
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', routes.index);
app.get('/users', user.list);
var temp = $('[class="orange"]').attr('id');
app.get('/data', function(req, res){
console.log(temp);
res.send(temp); //replace with your data here
}).listen(3000);
index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<input type="button" id="stopButton" value="Stop Listening"/>
<p>Welcome to <%= title %></p>
<ul id="fruits">
<li id= "1" class="apple">Apple</li>
<li id = "2" class="orange">Orange</li>
<li id = "3" class="pear">Pear</li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$('#stopButton').click(function () {
$.get('http://localhost:3000/data', {}, function (data) {
$('[id="2"]').text(data);
});
});
});
</script>
</body>
</html>
In the end what I wish to do is to send a value 'temp' at the press of a button 'stopButton' to the HTML page.
If you want to render html output from cheerio, cheerio describe the following way.
var cheerio = require('cheerio'),
$ = cheerio.load('<h2 class="title">Hello world</h2>');
$('h2.title').text('Hello there!');
$('h2').addClass('welcome');
$.html(); // !!!You need this step!!!
Then on client side, use $('[id="2"]').html(data); instance of using $('[id="2"]').text(data);
I am trying to establish a communication between JQuery on the client side and node on the server side. I have used ajax with callback but the
'req.on('data', function (data) {'
doesn't seem to work.
Given below is the code:
Client side:
index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<input type="button" id="stopButton" value="Button1"/>
<input type="button" id="stopButton2" value="Button2"/>
<p>Welcome to <%= title %></p>
<ul id="fruits">
<li id= "1" class="apple">Apple</li>
<li id = "2" class="orange">Orange</li>
<li id = "3" class="pear">Pear</li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'http://localhost:3000',
dataType: "jsonp",
data: '{"data": "Hello from Client"}',
type: 'POST',
jsonpCallback: 'callback',
success: function (data) {
var ret = jQuery.parseJSON(data);
console.log(ret.msg);
$('[class="apple"]').html(ret.msg);
}
});
});
</script>
</body>
</html>
Server side:
node.js
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, request = require ('request')
, cheerio = require ('cheerio')
, $;
var app = express();
//console.log($('[class = "orange"]').attr('id'));
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', routes.index);
app.get('/users', user.list);
http.createServer(function (req, res) {
var body="";
console.log('Request received: ');
req.on('data', function (chunk) {
body +=chunk;
});
req.on('end', function(){
console.log("Body: "+body);
res.write('Hello from Server');
res.end();
});
}).listen(3000);
I do get the ''Request received: '' on the server side console log. Also, I am able to view the 'Hello from Server' on the HTML.
Any help would be appreciated.
It seems like you forgot to end your message: res.end();
res.writeHead(200, { 'Content-Type': 'text/plain' });
req.on('data', function (data) {
console.log(data);
res.write('Hello from Server');
res.end();
});
I'm using node version 0.10.3 and Express 3.1.1.
I'm trying to return a simple response, but I'm getting the following error:
http.js:692
throw new Error('Can\'t set headers after they are sent.');
^
Error: Can't set headers after they are sent.
at ServerResponse.OutgoingMessage.setHeader (http.js:692:11)
I've read a lot about it, and tried many solutions but I'm still getting that error.
I've used node-inspector and i'm getting the error after that line -
res.render('index', { title: 'Express' });
app.js:
/**
* Module dependencies.
*/
var express = require('express')
, http = require('http')
, path = require('path')
, socketio = require('socket.io');
var app = express()
, server = http.createServer(app)
, io = socketio.listen(server);
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'hjs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
server.listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
io.configure('production', function(){
io.enable('browser client etag');
io.set('log level', 1);
});
io.configure('development', function(){
io.set('log level', 1);
});
io.sockets.on('connection', function(socket) {
socket.on('event', function(event) {
socket.join(event);
});
});
require('./routes')(app, io);
routes/index.js:
var utils = require('../utils')
, config = require('../config')
, io;
module.exports = function(app, socketio) {
io = socketio;
app.get('/', index);
};
var index = function(req, res){
res.render('index', { title: 'Express' });
};
views/index.hjs:
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>{{ title }}</h1>
<p>Welcome to {{ title }}</p>
</body>
</html>
package.json:
{
"name": "blabla",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "app.js"
},
"dependencies": {
"express": "3.0.3",
"hjs": "0.0.4",
"cradle": "0.6.4",
"twiliosig": "0.0.1",
"socket.io": "0.9.11"
},
"subdomain": "blabla",
"engines": {
"node": "0.6.x"
}
}
Any Clue?
Seems to be an error with your version of socket.io.
Use this:
"dependencies": {
"express": "3.0.x",
"hjs": "0.0.4",
"cradle": "0.6.4",
"twiliosig": "0.0.1",
"socket.io": "0.9.x"
}
Tested with socket.io#0.9.16
I'm working with the new messages system in express 3 and figured this problem, when handling and validating forms. When submitting an invalid form, the submission fails, but there are no error messages displayed. When submitting it again, the error messages from the last request are shown. I tried using local sessions and Redis sessions, it's always the same. This is default express project:
app.js
var express = require('express')
, routes = require('./routes')
, http = require('http')
, path = require('path');
var app = express();
app.response.message = function(type, msg){
// reference `req.session` via the `this.req` reference
var sess = this.req.session;
// simply add the msg to an array for later
sess.messages = sess.messages || [];
sess.messages.push({type: type, msg: msg});
return this;
};
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('your secret here'));
app.use(express.session());
app.use(express.static(path.join(__dirname, 'public')));
app.use(function(req, res, next) {
console.log('req.session', req.session.messages);
var msgs = req.session.messages || [];
res.locals({
messages: msgs,
hasMessages: !! msgs.length
});
req.session.messages = [];
next();
});
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('*', function(req, res, next) {
res.message('hello', req.url);
next();
});
app.get('/', function(req, res) {
res.render('index', { title: 'Express' });
});
app.get('/hello', function(req, res) {
res.render('index', { title: 'Express' });
});
app.get('/world', function(req, res) {
res.render('index', { title: 'Express' });
});
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
index body addition:
<% if (hasMessages) { %>
<ul id="messages">
<% messages.forEach(function(msg){ %>
<li class="<%= msg.type %>"><%= msg.msg %></li>
<% }) %>
</ul>
<% } %>
/ there is no message
/hello shows '/'
/world shows '/hello'
reload shows '/world'
What's the problem here?
If you dont want to defer them you don't need to use sessions at all, that's the whole point in this case is to defer messages for the next render. By the time that middleware populates the "messages" and "hasMessages" it really doesn't have any unless the previous request populated them. This is typically used to defer msgs like "updated user successfully"