2014-02-19 4 views
2

에 컬을 통해 실행할 때 다음과 같은 간단한 NodeJS 코드가 있습니다 :NodeJS 코드는 다르게 실행 터미널

var http = require("http"); 

http.createServer(function(request, response){ 
    response.writeHead(200); 
    setTimeout(function(){ 
     response.write("This printed 3 secs later, ait?"); 
     response.end(); 
    }, 3000); 

    response.write("This will be printed before.\n"); 
}).listen(8080); 

나는 node scriptname.js으로 스크립트를 실행 한 다음과 같이 터미널에 컬을 통해 액세스하는 경우 :

curl http://localhost:8080 

내가 먼저 그것이 This printed 3 secs later, ait? 인쇄 삼초 후 다음 This will be printed before.을 인쇄, 예상대로 출력을 얻을.

그러나 내 브라우저 (Chrome, Firefox의 최신 버전) 페이지에서 http://localhost:8080을 열면 3 초 동안로드되고 This will be printed before. This printed 3 secs later, ait? 텍스트가 한꺼번에 인쇄됩니다. 왜 이런 일이 일어나고 브라우저에서 어떻게 동일한 동작을 수행 할 수 있습니까?

편집 : 켄은 그의 대답

에 명시된 바와 같이 그래서 ...이 때문에 내용을 렌더링하는 렌더링 엔진을 브라우저의 동작을하는 것입니다. 렌더링 엔진은 response.end();

하고 가서 Socket.IO을 확인하는 것이 좋습니다, 나는 expressSocket.IO를 사용하여이 작업을 예를 내놓았다 :

//timeoutTest.js

var express = require('express'), 
    app = express(), 
    server = require('http').createServer(app), 
    io = require('socket.io').listen(server); 

server.listen(8080); 

app.use(express.static(__dirname + '/')); 

app.get('/', function (req, res) { 
    res.sendfile(__dirname + '/timeoutTest.html'); 
}); 

io.sockets.on('connection', function (client) { 
    client.emit('msg', "This prints right now on connection."); 

    setTimeout(function(){ 
     client.emit('msg', "This prints out after 3 secs.");  
    }, 3000); 
}); 

// timeoutTest. html

<!DOCTYPE html> 
<html> 
<head> 
    <script src="/socket.io/socket.io.js"></script> 
    <script src="jquery.js"></script> 
    <script> 
    $(document).ready(function(){ 
     var server = io.connect('http://localhost'); 
     server.on('msg', function(data){ 
      $('body').append(data + "<br/>"); 
     }); 
    }); 
    </script> 
</head> 
<body> 
</body> 
</html> 
+0

추 신. 서버 - 브라우저 상호 작용 문제의 초보자를 위해'Socket.IO'를 추천했습니다. 이 기술은 일반적으로'RPC (remote procedure cal)'라고합니다. 'Socket.IO'는 많은 사람들에게 친숙하며 웹에서 풍부한 자원을 찾을 수 있기 때문에 시작하는 것이 좋습니다. 나중에 참조 할 경우 노드와 브라우저간에 RPC를 수행하는 방대한 라이브러리이므로 개인적으로 더 이상 사용하지 않습니다. RPC를보다 간결하고 정교하게 (내가 생각하기에) "RPCify"와 함께 https://github.com/substack/dnode 또는 https://github.com/dominictarr/rpc-stream을 사용하면됩니다. –

+0

관련 질문에 대한 답변은 여기를 참조하십시오. http://stackoverflow.com/questions/12832402/is-socket-io-a-must-in-developing-client-apps-for-nodejs-servers –

+0

추가 의견을 보내 주셔서 감사합니다! – Nikola

답변

3

이것은 단순히 브라우저 렌더링 엔진의 동작으로 인한 것이라고 생각합니다. 내용을 렌더링합니다.

렌더링 엔진은 response.end();이 도착할 때까지 내용을 캐시 한 다음 전체를 렌더링합니다.

기본적으로 브라우저의 HTML 콘텐츠는 response.write과 같이 증분 server push에 의해 자동으로 업데이트되지 않습니다.

Ajax 및 DHTML/js 기술을 사용하여 서버에서 브라우저 클라이언트로 데이터를 pull 보내야합니다.

터미널의 컬은 노드 서버의 단순한 출력면에서 완전히 다른 이야기입니다. 당신이 node 서버와 브라우저 클라이언트 사이에 많은 상호 작용 행동을 추구하는 경우 server push 기능을 원하는 경우

websocket 가고, 또한 node stream 물건을 조사 할 수있는 방법입니다.

Socket.IO은 매우 유명하며, node stream https://github.com/substack/stream-handbook은 재미있을 것입니다.

나는 개인적으로 내 자신의 프로젝트에이 작업을 수행 :

http://kenokabe.github.io/MarkdownLive/

나는 물건 마크 다운을 사용하여 작성하고 스트리밍 미리보기를 필요한, 그래서 나는 나 자신에 의해 만들어진. 미리보기 화면은 브라우저 HTML 페이지이며 HTML 내용은 스트리밍 방식으로 점진적으로 렌더링되고 업데이트됩니다.

+0

감사합니다 켄, 당신의 대답은 나에게 가서 더 멀리 탐험했다. 내가 편집 한 내용을 확인할 수 있습니다. 고마워! – Nikola

+0

니콜라스는 기쁩니다. 내 작은 설명이 도움이된다는 소식을 듣고 기쁘다. –