{"id":932,"date":"2014-12-02T07:57:35","date_gmt":"2014-12-02T07:57:35","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=932"},"modified":"2015-08-16T20:11:03","modified_gmt":"2015-08-16T20:11:03","slug":"nodejs-code-executes-differently-when-run-via-browser-and-when-run-via-curl-in-terminal","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/nodejs-code-executes-differently-when-run-via-browser-and-when-run-via-curl-in-terminal\/","title":{"rendered":"NodeJS code executes differently when run via browser and when run via curl in terminal"},"content":{"rendered":"

\"profile<\/a>
\nI’m a big fan of Stack Overflow<\/a> and I tend to contribute regularly (am currently in the top 0.X%<\/a>).\u00a0In this category (stackoverflow<\/a>)\u00a0of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here<\/a>.<\/p>\n

My quesiton<\/a> was:<\/p>\n

I have the following simple NodeJS code:<\/p>\n

var http = require(\"http\");\r\n\r\nhttp.createServer(function(request, response){\r\n    response.writeHead(200);\r\n    setTimeout(function(){\r\n        response.write(\"This printed 3 secs later, ait?\");\r\n        response.end();},3000);\r\n\r\n    response.write(\"This will be printed before.\\n\");}).listen(8080);<\/pre>\n
If I run the script with\u00a0node scriptname.js<\/code>\u00a0and then access it via curl in terminal like this:<\/p>\n
curl http:\/\/localhost:8080<\/pre>\n
I get an output as expected, first it prints\u00a0This will be printed before.<\/code>, then after 3 seconds it prints\u00a0This printed 3 secs later, ait?<\/code>.<\/p>\n
However, when I open\u00a0http:\/\/localhost:8080<\/code>\u00a0in my browser (newest versions of Chrome, Firefox) page loads for 3 seconds and it prints the text\u00a0This will be printed before. This printed 3 secs later, ait?<\/code>\u00a0all at once. Why does this happen and how could I make the same behavior in the browser?<\/p>\n
edit:<\/strong>\u00a0So, as Ken stated in his answer<\/p>\n
…this is simply due to the behavior of the browser rendering engine to render the contents. The rendering engine cashes the contents until response.end();<\/p><\/blockquote>\n
and advised to go and check out Socket.IO, I came up with this working example which uses\u00a0express<\/a>and\u00a0Socket.IO<\/a>:<\/p>\n
\/\/timeoutTest.js\r\nvar express = require('express'),\r\n    app = express(),\r\n    server = require('http').createServer(app),\r\n    io = require('socket.io').listen(server);\r\n\r\nserver.listen(8080);\r\n\r\napp.use(express.static(__dirname +'\/'));\r\n\r\napp.get('\/',function(req, res){\r\n   res.sendfile(__dirname +'\/timeoutTest.html');});\r\n\r\nio.sockets.on('connection',function(client){\r\n   client.emit('msg',\"This prints right now on connection.\");\r\n\r\n   setTimeout(function(){\r\n      client.emit('msg',\"This prints out after 3 secs.\");},3000);});<\/pre>\n
\/\/timeoutTest.html\r\n<!DOCTYPE html><html><head><script src=\"\/socket.io\/socket.io.js\"><\/script><script src=\"jquery.js\"><\/script><script>\r\n    $(document).ready(function(){var server = io.connect('http:\/\/localhost');\r\n        server.on('msg',function(data){\r\n            $('body').append(data +\"<br\/>\");});});<\/script><\/head><body><\/body><\/html><\/pre>\n
 <\/p>\n
The answer, by Ken OKABE<\/a>,\u00a0was:<\/p>\n
\n
I think this is simply due to the behavior of the browser rendering engine to render the contents.\u00a0The rendering engine cashes the contents until\u00a0response.end();<\/code>\u00a0arrives, then renders whole.<\/p>\n
Basically, HTML contents in the browser are never updated automatically by incremental\u00a0server push<\/code>such as\u00a0response.write<\/code>.\u00a0You must\u00a0pull<\/code>\u00a0data from the server to the browser client by Ajax and DHTML\/js technique.\u00a0curl in terminal is completely different story in terms of the mere output of the node server.<\/p>\n
If you seek more interactive behavior between\u00a0node<\/code>\u00a0server and browser client, if you want\u00a0server push<\/code>\u00a0feature,\u00a0websocket<\/code>\u00a0is the way to go, and also investigate\u00a0node stream<\/code>\u00a0stuff.\u00a0Socket.IO<\/code>\u00a0is famous, and for\u00a0node stream<\/code>\u00a0https:\/\/github.com\/substack\/stream-handbook<\/a>\u00a0should be interesting to you.<\/p>\n
I personally do this on my own project:\u00a0http:\/\/kenokabe.github.io\/MarkdownLive\/<\/a>.\u00a0I write stuff using Markdown and needed a streaming preview, so I created by myself. The preview screen is a Browser HTML page, and the HTML contents rendered and updated incrementally in streaming manner.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%).\u00a0In this category (stackoverflow)\u00a0of posts I will will be posting…<\/p>\n","protected":false},"author":1,"featured_media":609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-932","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stack-overflow"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=932"}],"version-history":[{"count":5,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/932\/revisions"}],"predecessor-version":[{"id":1698,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/932\/revisions\/1698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/609"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}