如何告诉现代浏览器在到达时显示行

时间：2017-10-21 23:18:13

标签： google-chrome cgi nph

在网络浏览器和服务器的早期，可以创建将数据发送到浏览器的脚本，浏览器会在它到达时显示它。

例如，传统的NPH测试脚本：

/* Friends of Girl Develop It Columbus styles */

/*************************************************** newly added */
:root {                  /*                                      */
  --footer-height: 40px; /* value can be adjusted to your liking */
}                        /*                                      */
/*****************************************************************/

body {
  margin: 0;
  padding: 0;
}

header {
  background: black;
}

main {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  /************************************************* newly added */
  margin-bottom: calc(var(--footer-height) * 1); /*              */
  /*                                                             */
  /* you can increase the multiplier to create makeshift padding */
  /* or margin.                                                  */
  /*                                                             */
  /***************************************************************/
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

footer {
    /*********************************************** newly added */
    height: var(--footer-height); /*                             */
    /*************************************************************/
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    background: #000;
    padding: 10px 0;
    
opacity:0.5;
}

footer a {
    color: #fff;
    font-size: 1.2em;
}

回到旧的Netscape时代，浏览器会在两到两秒之间显示1,2,3,4,5。

在现代浏览器（例如Chrome）中，在脚本终止并且一次显示所有5行之前，您看不到任何内容。

我可以看到脚本按照预期<body> <header> <img src="images/gdic.jpeg" width="180" height="180" alt="GDIC" > </header> <main> <h1>Friends of Girl Develop It Columbus</h1> <!-- Copy the template below, paste it below the last person's entry, and add your information! <li class="friend"> <strong class="name">Replace this text with your name!</strong> is on <a class="github-repo" href="REPLACE_THIS_WITH_YOUR_GITHUB_PROFILE_URL">GitHub</a> </li> --> <h2>In no particular order!</h2> <ul class="friends"> <li class="friend"> <strong class="name">Caitlin</strong> is on <a class="github-repo" href="https://github.com/csteinert">GitHub</a> </li> <li class="friend"> <strong class="name">Parker</strong> is on <a class="github-repo" href="https://github.com/parkerdyer" title="Parker's GitHub">GitHub</a> </li> <li class="friend"> <strong class="name">Melissa</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">Anthony</strong> is on <a class="github-repo" href="https://github.com/gtkpr">GitHub</a> </li> <li class="friend"> <strong class="name">1</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">2</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">3</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">4</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">5</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">6</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">7</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">8</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">9</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">10</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">11</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">12</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">13</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">14</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">15</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">16</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">17</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">18</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">19</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">20</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">21</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">22</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">23</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">24</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">25</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">26</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">27</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">28</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">29</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">30</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">31</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">32</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">33</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">34</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">35</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">36</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">37</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">38</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">39</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">40</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">41</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">42</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">43</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">44</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">45</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">46</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">47</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">48</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">49</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> <li class="friend"> <strong class="name">50</strong> is on <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> </li> </ul> </main> <footer> <a href="https://github.com/csteinert/friends-of-gdic">View repository</a> </footer> </body> </html>运行到服务器并运行手动#!/usr/local/bin/perl $server_protocol = $ENV{'SERVER_PROTOCOL'}; $server_software = $ENV{'SERVER_SOFTWARE'}; $|=1; print "$server_protocol 200 OK", "\n"; print "Server: $server_software", "\n"; print "Content-type: text/plain", "\n\n"; print "OK, Here I go. I am going to count from 1 to 5 !", "\n"; for ($loop=1; $loop <= 5; $loop++) { print $loop, "\n"; sleep (2); } print "All Done!", "\n"; exit (0); 命令;输出每2秒接收一次。

无论如何告诉现代浏览器（可能是通过标题？）以旧方式行事并在线路到达时显示线路？

1 个答案:

答案 0 :(得分：0)

事实证明，chunked模式可以工作......但是在浏览器开始流式传输之前，你需要先发送一堆数据。

这描述了通过测试确定的预块数据：

Using "transfer-encoding: chunked", how much data must be sent before browsers start rendering it?

结果代码如下：

#!/usr/local/bin/perl

$server_protocol = $ENV{'SERVER_PROTOCOL'};
$server_software = $ENV{'SERVER_SOFTWARE'};

$|=1;

print "$server_protocol 200 OK", "\n";
print "Server: $server_software", "\n";
print "Transfer-Encoding: chunked", "\n";
print "Content-type: text/plain", "\n\n";

sub chunk {
    my ($chunk)=@_;
    printf("%x\n%s\n", length($chunk), $chunk);  
}

# Send 1K of spaces to convince browsers to display data as it comes
chunk(" " x 1024);

chunk("OK, Here I go. I am going to count from 1 to 5 !\r\n");

for ($loop=1; $loop <= 5; $loop++) {
    chunk($loop . "\r\n");
    sleep (2);
}

chunk("All Done!\r\n");

# We need this to tell the client chunking has ended
chunk("");

（感谢非SO用户帮我解决这个问题）

相关问题
最新问题