In this video, I’ll demonstrate how to do streaming HTTP response body output in OpenResty.

1
2
3
cd ~/
mkdir stream-resp/
cd stream-resp/

We create the sub-directory structure as always.

1
mkdir logs conf html

We write the boilerplate configuration quickly.

1
vim conf/nginx.conf

And make the following edits in this file:

  1. We create an HTTP server listening on the 8080 port.
  2. Add a /test location.
  3. It is important to specify this application/octet-stream MIME type to make the Chrome web browser happy.
  4. Add some Lua code via the content_by_lua_block directive.
  5. We output one line of output every one second.
  6. We need to call the ngx.flush method explicitly to flush Nginx’s write buffers. This is a 100% nonblocking call.
  7. And we use ngx.sleep to sleep for one second in each loop iteration. This is nonblocking as well.
  8. Then we create a root location for the html directory.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
worker_processes 1;

events {
worker_connections 1024;
}

http {
server {
listen 8080 reuseport;

location = /test {
default_type application/octet-stream;

content_by_lua_block {
for i = 1, 4 do
ngx.say("hello ", i)
ngx.flush(true)
ngx.sleep(1) -- sec
end
}
}

location / {
default_type text/html;
root html;
}
}
}

Let’s check the whole directory tree right now.

1
tree .

screenshot 16

Looking good.

Now start this OpenResty application.

1
openresty -p $PWD/

screenshot 18

Time to query our HTTP location with curl.

1
curl 'http://127.0.0.1:8080/test'

screenshot 19

Cool, it is indeed generating one line of per second!

To verify if everything is indeed nonblocking, we can load this HTTP API with the weighttp utility. Note that it will take a while because we have intentionally slow responses here.

1
weighttp -c 500 -k -n 500 127.0.0.1:8080/test

screenshot 21

So with 500 concurrent requests, we can still achieve more than 120 requests per second! Note that each request takes 4 seconds to complete. And here we are using only a single worker process and a single operating system thread.

We can still increase the concurrency level a lot. But we will need to tweak the Nginx configuration accordingly.

1
vim conf/nginx.conf

Like tuning the worker connections to a larger value.

screenshot 24

Better performance can also be achieved by enabling the access log buffering. We can also reduce the request memory pool size.

Now let’s create an HTML page to test it out in a web browser.

1
vim html/a.html

We make the following edits in this file.

  1. Add a DIV tag to hold the output.
  2. Add some JavaScript to send an AJAX request to our previous HTTP location.
  3. We fetch out DIV element.
  4. Let’s add a JavaScript function to do streaming response receiving.
  5. Make sure there is new data.
  6. Append our new data to the DIV element. Here we are lazy. We do not bother escaping special HTML characters.
  7. And we check new incoming response data every second.
  8. Firefox supports a more clever way but we have to support Chrome as well.
  9. Finally, we handle the end of the response body stream.
  10. Check the response data for one last time.
  11. Remove our periodic timer.
  12. And append the final output to the web page.
  13. We omit error handling here for brevity.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html>
<body>
<div style="margin: 2em;" id="out"></div>

<script>
(function () {
let xhttp = new XMLHttpRequest();
xhttp.open("GET", "/test", true);
xhttp.send();

let div = document.getElementById("out")

let total_len = 0
let check_resp = function () {
let resp = xhttp.responseText
let len = resp.length

if (len > total_len) {
let new_data = resp.substring(total_len, len)
total_len = len;

div.innerHTML += new_data + "<br/>"
}
};

let timer = setInterval(check_resp, 1000);
check_resp();

xhttp.onreadystatechange = function () {
if (this.readyState == 4) {
check_resp();
clearInterval(timer);
div.innerHTML += "done<br/>";
}
};
})();
</script>
</body>
</html>

Let’s check the whole directory tree again.

1
tree .

screenshot 44

We don’t need to reload or restart the OpenResty server since it is just a static HTML page.

1
ps aux|grep nginx|grep -v /tmp/

screenshot 45

Time to point chrome to this HTML page.

screenshot 46

It works! This is all I want to cover today.

If you like this tutorial, please subscribe to this blog site and our YouTube channel. Thank you!

About This Article and Associated Video

This article and its associated video are both generated automatically from a simple screenplay file.

About The Author

Yichun Zhang is the creator of the OpenResty® open source project. He is also the founder and CEO of the OpenResty Inc. company. He contributed a dozen open source Nginx 3rd-party modules, quite some Nginx and LuaJIT core patches, and designed the OpenResty XRay platform.

Translations

We provide the Chinese translation for this article on blog.openresty.com.cn. We also welcome interested readers to contribute translations in other natural languages as long as the full article is translated without any omissions. We thank them in advance.

We are hiring

We always welcome talented and enthusiastic engineers to join our team at OpenResty Inc. to explore various open source software’s internals and build powerful analyzers and visualizers for real world applications built atop the open source software. If you are interested, please send your resume to talents@openresty.com . Thank you!