Server sending multiple responses after AJAX request - using Socket.IO and ExpressJS - node.js

I'm trying to build a real-time program where users can set a marker on a Google Map and others who are connected can get that same marker. Everything seems to work fine except that after a few minutes, the server side is submitting the data a second time.
To clarify: client sets a marker on the map, the marker is sent to the server, running Node JS with Express JS, in JSON format. The server returns the data to all connected clients. Minutes later, the server sends the same data it received once more, causing a "ERR_EMPTY_RESPONSE" client-side on the last line of example "Client code".
Client code:
var data = new Array();
data.push({lat: Gmap.markers[0].lat, lng: Gmap.markers[0].lng});
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "/marker", true);
xhttp.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
xhttp.send(JSON.stringify(data));
Server-side:
var app = express():
app.post('/marker', function(req,res){
io.emit('marker', req.body);
})
Anyone have any idea of whats going on?

You need to send a response to the http request. If you don't, the browser will time it out and may attempt to retry.
var app = express():
app.post('/marker', function(req,res){
io.emit('marker', req.body);
res.send("ok"); // <== Send a response to the http request here
})

Related

Why the request is being save in express?

I have a problem.
I am developing an API with Node and the express framework to send transactional email using Mandril.
I download the powerdrill library to call the Mandrill API.
Everything is working fine, the emails are being sent ok, except for the problem that the request in the post is saving.
For example, if I call the API once I will send one email, and if I send a second one I will send 2 emails (the first one that I sent and the new one), and if I call the API once again I will send 3 email (the first 2 and the new one).
As you can see I sent 1 email using the request welcome. In the second one I called other request called submittedApplication but when I call the API using POSTMAN 2 emails were sent 1.-the new one and 2.- the first one again.
Does anyone know why the request is saving?
var express = require('express'),
router = express.Router(),
config = require('config'),
Message = require('powerdrill').Message;
var message = new Message();
router.get('/',function(req,res){
res.send('test ok Mandrillllll');
})
router.post('/welcomeGorn',function(req,res){
console.log(req.body);
message.apiKey(config.mandrillKey)
.subject(req.body.subject)
.template(req.body.template)
.from(config.mandrilEmail)
.to(req.body.to)
.tag('complex')
.globalMergeVar('VERIFY_EMAIL',req.body.linkVefifyEmail)
.send(function(err, resp) {
//console.log(resp);
res.send(resp).end();
});
});
router.post('/submittedApplication',function(req,res){
console.log(req.body);
message.apiKey(config.mandrillKey)
.subject(req.body.subject)
.template(req.body.template)
.from(config.mandrilEmail)
.to(req.body.to)
.tag('complex')
.globalMergeVar('RECRUITER_NAME',req.body.recruiterName)
.globalMergeVar('RECRUITER_EXTENSION',req.body.recruiterExtension)
.globalMergeVar('RECRUITER_EMAIL',req.body.recruiterEmail)
.send(function(err, resp) {
//console.log(resp);
res.send(resp);
});
});
module.exports = router;
The console is showing me this warning:
Powerdrill: Attempting to add the same email twice. Using data from first instance
You can find this warning here
I think the problem is message variable is saving all information and sending all together every time. Try to initialize it at the beginning of every method:
router.post('/welcomeGorn',function(req,res){
var message = new Message();

How to send response using twice or more callback in one request

I'm using express and the request POST look like that
router.post('/', function(req, res, next){
var data = req.body;
getRandom(data, function(value){
res.json({value: value});
});
});
POST is sent through ajax and then update textarea with new data.
$.ajax({
type: "POST",
url: "/",
data: JSON.stringify(datareq),
dataType: 'json',
contentType: 'application/json',
success: function(x){
$.each(x, function(index, value) {
$('.textarea').append(value + '\n');
});
},
error: function(x) {
console.log(x + 'error');
}
});
How to send this using one POST and a few response. User received one data in textarea when cb finished and then another data and so one till the end.
<textarea>
data 1 - 1sec
data 2 - 2sec leater
data 3 - 3 second later
...
</textarea>
I add Time (1sec ...) only to show that callback has a lot to do to send another response.
Of course this not working because res.send() close connection and I received error
So how to achieve my idea, to sending simultaneously after post request. I want to give user data very fast, then another one when is ready not waiting for all and then send response.
You can't
Reason:
Http closes connection after sending response. You can not keep it open and sending multiple responses to the client. HTTP doesn't support it.
Solution 1:
Simply put a timer at client side and request periodically.
Solution 2 (Recommended):
Use socket, and pass data through it. socket.io is the socket library for nodejs applications. It is very easy to use. Set up a connection, keep sending data from server and receive it on client side.
Just to add on the answer. This answer explains why res.send closes the connection.

How to cancel previous ES request before making a new one

I am using NodeJS with https://www.npmjs.com/package/elasticsearch package
Use Case is like this: When a link is clicked on the page, I will make a request to NodeJS Server which will in turn use the ES node package to fetch the data from ES Server and sends the data back to the client.
The issue is, when two requests are made in quick session(two links clicked in a short span), the Response of first request and then the Response of second request is reaching the client. The UI depends on this response, and i would like to directly show only the second request's response.
So, the question is, Is there any way to cancel out the previous request made to ES Server before starting a new one ?
Code:
ES Client:
var elasticsearch = require('elasticsearch');
var client = new elasticsearch.Client({
host: 'HostName',
log: 'trace'
});
Route:
app.get('/data/:reportName', dataController.getReportData);
DataController:
function getReportData(req, res) {
query = getQueryForReport(report)
client.search(query)
.then(function(response) {
res.json(parseResponse(response)
})
}
So, the same API /data/reportName is called twice in succession with different reportNames. I would like to send only the second report Data back and cancel our the first request.
If you're only concerned about the UX, rather than stressing your ES, than aborting the ajax request is what you want.
Since you didn't post your client side code, I'll give you a generic example:
var xhr = $.ajax({
type: "GET",
url: "searching_route",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
//kill the request
xhr.abort()
Remember that aborting the request may not prevent the elasticsearch query from being processed, but will prevent the client from receiving the data.

Node.js - Stream Binary Data Straight from Request to Remote server

I've been trying to stream binary data (PDF, images, other resources) directly from a request to a remote server but have had no luck so far. To be clear, I don't want to write the document to any filesystem. The client (browser) will make a request to my node process which will subsequently make a GET request to a remote server and directly stream that data back to the client.
var request = require('request');
app.get('/message/:id', function(req, res) {
// db call for specific id, etc.
var options = {
url: 'https://example.com/document.pdf',
encoding: null
};
// First try - unsuccessful
request(options).pipe(res);
// Second try - unsuccessful
request(options, function (err, response, body) {
var binaryData = body.toString('binary');
res.header('content-type', 'application/pdf');
res.send(binaryData);
});
});
Putting both data and binaryData in a console.log show that the proper data is there but the subsequent PDF that is downloaded is corrupt. I can't figure out why.
Wow, never mind. Found out Postman (Chrome App) was hijacking the request and response somehow. The // First Try example in my code excerpt works properly in browser.

Node.js Express rendering multiple subsequent views

I want to do something like:
//client -> notifies server that client is connected.
//server -> begins fetching information from DB (series of both async and synchronous requests).
//as sets of data become available on server -> server pushes updates to client via res.render()
Basically I have a menu item on the client, and I want to update that menu as the data that the server fetches gets ready. is there any way to do this? I notice I can't do
res.render('something');
// again
res.render('somethingElse');
Because once render is called, then the response is sent, and render cannot be called again
"Error: Can't set headers after they are sent."
Any suggestions?
You might benefit from using WebSockets:
http://en.wikipedia.org/wiki/WebSocket
This post has a little bit of info:
Which websocket library to use with Node.js?
HTTP works via request/response. Typically once the response is sent, the connection is terminated.
To stream data from the server to client, you can use websockets. There is a very popular node.js module called socket.io, which simplifies using websockets.
Using socket.io, the client code would look like this:
var socket = io.connect('http://yourserver.com');
socket.on('data', function (data) {
updateMenu(data);
});
And the server code:
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.emit('data', data);
getMoreDataFromDb(function(data){
socket.emit('data', data);
});
// etc..
});
Alternatively, if you want a simpler solution, you can just make multiple small ajax requests to the server, until you get all your data:
(function getData(dataId){
$.ajax({
url:"yourserver.com/getdata",
data: dataId || {},
success:function(data){
updateMenu(data);
if(data) getData({ lastDataReceived: data.lastId }); // server is still returning data, request more
}
});
})();

Resources