{"id":1859,"date":"2017-06-02T00:00:00","date_gmt":"2017-06-01T22:00:00","guid":{"rendered":"https:\/\/wwwneu.strehle.de\/tim\/weblog\/archives\/2017\/06\/02\/1619-2\/"},"modified":"2025-07-31T21:50:48","modified_gmt":"2025-07-31T19:50:48","slug":"1619-2","status":"publish","type":"post","link":"https:\/\/www.strehle.de\/tim\/weblog\/archives\/2017\/06\/02\/1619-2\/","title":{"rendered":"Streaming an Ajax response with Vue.js and Server-sent events (SSE)"},"content":{"rendered":"\n

The problem: We want to display a large number of search results<\/strong> (from our DAM system) on a Web page. Gathering the results on the server and transferring them to the browser takes a while. To improve the user experience and show the first results as soon as possible, we want to \u201cstream\u201d the results<\/strong>. Each item needs to be rendered as soon as the browser receives it. A simple Ajax call waits until the server has returned everything, so we\u2019ll have to do something a little more advanced.<\/p>\n\n\n\n

The solution outlined here combines two technologies I currently enjoy experimenting with: the Vue.js JavaScript framework<\/a> (a competitor of React and Angular<\/a>) and Server-sent events (SSE)<\/a>, a lightweight, W3C-standardized alternative to WebSockets<\/a>.<\/p>\n\n\n\n

In our old UI, we used Oboe.js<\/a> for streaming, but I like the new approach much better because it requires little code, thanks to the magic of Vue.js<\/strong> and EventSource<\/a> (the Web browser\u2019s built-in SSE support, not available in IE and Microsoft Edge) \u2013 and because it\u2019s very lightweight<\/strong>, requiring nothing but a simple script include (no npm, no build toolchain).<\/p>\n\n\n\n

The end result looks like this, you can try it live here<\/a>:<\/p>\n\n\n\n

<\/figure>\n\n\n\n

Let\u2019s see how this works:<\/p>\n\n\n\n

Server-sent events use a simple text protocol<\/strong>. Here\u2019s what my server sends; pretty self-explanatory (note the text\/event-stream<\/code> content type):<\/p>\n\n\n\n

$ curl -v http:\/\/example.com\/stream.php\n> GET \/stream.php HTTP\/1.1\n> \n< HTTP\/1.1 200 OK\n< Content-Type: text\/event-stream; charset=UTF-8\n< \nevent:header\ndata:{\"total_items\":20,\"msg\":\"Hello from server\"}\n\nevent:item\ndata:{\"cnt\":1,\"text\":\"[1] Hello from server\"}\n\nevent:item\ndata:{\"cnt\":2,\"text\":\"[2] Hello from server\"}\n\n[\u2026]\n\nevent:item\ndata:{\"cnt\":20,\"text\":\"[20] Hello from server\"}\n\nevent:close\ndata:[]\n\n<\/code><\/pre>\n\n\n\n
This format is transparently handled by the EventSource<\/code> object. We just need it to feed data into a Vue.js model. Vue.js updates the HTML<\/strong> automatically when the model changes. (Check out the Vue.js documentation<\/a>.)<\/p>\n\n\n\n
It\u2019s important to know that EventSource<\/code> is designed for permanent connections so it keeps requesting the same URL in an endless loop when the server closes the connection. The evtSource.close()<\/code> call prevents that, stopping after the server has signalled that all results have been delivered.<\/p>\n\n\n\n
It\u2019s all in a single HTML file, stream.html<\/code>:<\/p>\n\n\n\n
<html>\n  <head>\n    <meta charset=\"UTF-8\"\/>\n  <\/head>\n  <body>\n    <!-- This div is rendered by Vue.js: -->\n    <div id=\"app\">\n      <form v-on:submit.prevent=\"run\">\n        <input v-model=\"msg\" type=\"text\" placeholder=\"Enter message\"\/>\n        <button v-on:click=\"run\" type=\"button\">{{ buttonLabel }}<\/button>\n      <\/form>\n      <p>{{ items.length }} of {{ total_items }} times \u201c{{ actual_msg }}\u201d:<\/p>\n      <ul>\n        <my-item v-for=\"item in items\" :key=\"item.cnt\" v-bind:item=\"item\">\n        <\/my-item>\n      <\/ul>\n    <\/div>\n    <!-- Include Vue.js: -->\n    <script src=\"https:\/\/unpkg.com\/vue\/dist\/vue.min.js\"><\/script>\n    <!-- Our own JavaScript code: -->\n    <script type=\"application\/javascript\">\n\n    Vue.component('my-item', {\n      props: ['item'],\n      template: '<li>{{ item.text }}<\/li>'\n    });\n\n    var evtSource = false;\n    \n    var app = new Vue({\n      el: '#app',\n      data: {\n        msg: 'Hello world',\n        actual_msg: '',\n        total_items: -1,\n        items: [],\n        loading: false\n      },\n      computed: {\n        buttonLabel: function() {\n          return (this.loading ? 'Loading\u2026' : 'Go');\n        }\n      },\n      methods: {\n        run: function() {\n    \n          this.reset();\n      \n          var streamUrl = 'stream.php'\n            + '?msg=' + encodeURIComponent(this.msg);\n      \n          evtSource = new EventSource(streamUrl);\n          this.loading = true;\n\n          var that = this;\n\n          evtSource.addEventListener('header', function (e) {\n            var header = JSON.parse(e.data);\n            that.total_items = header.total_items;\n            that.actual_msg = header.msg;\n          }, false);\n\n          evtSource.addEventListener('item', function (e) {\n            var item = JSON.parse(e.data);\n            that.items.push(item);\n          }, false);\n\n          evtSource.addEventListener('close', function (e) {\n            evtSource.close();\n            that.loading = false;\n          }, false);\n        },\n        reset: function() {\n          if (evtSource !== false) {\n            evtSource.close();\n          }\n\n          this.loading = false;\n          this.items = [];\n          this.total_items = -1;\n        }\n      }\n    })\n\n    <\/script>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
For completeness, the PHP code<\/strong> stream.php<\/code> producing the above output, which is not that interesting:<\/p>\n\n\n\n
<?php\n\n\/\/ Parameters\n\n$repeat = 20;\n\n$msg = filter_input\n(\n    INPUT_GET,\n    'msg',\n    FILTER_SANITIZE_FULL_SPECIAL_CHARS,\n    ['options' => ['default' => '']]\n);\n\nif ($msg === '') {\n    $msg = 'Hello from server';\n}\n\n\/\/ Make sure output buffering is turned off\n@ob_end_flush();\n\n\/\/ Header\n\nheader('Content-Type: text\/event-stream; charset=UTF-8');\n\necho dataToStreamEvent\n(\n    'header', \n    ['total_items' => $repeat, 'msg' => $msg]\n);\nflush();\n\n\/\/ Message times repeat\n\nfor ($cnt = 1; $cnt <= $repeat; $cnt++) {\n    usleep(50000);\n    echo dataToStreamEvent\n    (\n        'item', \n        ['cnt' => $cnt, 'text' => sprintf('[%s] %s', $cnt, $msg)]\n    );\n    flush();\n}\n\n\/\/ Tell client to close the connection\n\necho dataToStreamEvent('close', []);\nflush();\n\n\/**\n * @param string $type\n * @param array $data\n * @param string $id\n * @return string text\/event-stream formatted string\n *\/\nfunction dataToStreamEvent($type, array $data, $id = '')\n{\n    $result = '';\n\n    if ($type !== '') {\n        $result .= sprintf(\"event:%s\\n\", strtr($type, [\"\\r\" => ' ', \"\\n\" => ' ']));\n    }\n\n    if ($id !== '') {\n        $result .= sprintf(\"id:%s\\n\", strtr($id, [\"\\r\" => ' ', \"\\n\" => ' ']));\n    }\n\n    $result .= \"data:\" . strtr(json_encode($data), [\"\\r\\n\" => \"\\n\", \"\\r\" => \"\\n\", \"\\n\" => \"\\ndata:\"]);\n\n    $result .= \"\\n\\n\";\n\n    return $result;\n}\n<\/code><\/pre>\n\n\n\n
What do you think of this approach? Let me know on Twitter<\/a> or by e-mail<\/a>.<\/p>\n\n\n\n
(To keep the examples short, I intentionally omitted error handling and documentation. Don\u2019t use it in production like this!)<\/p>\n\n\n\n
Update (2017-06-03):<\/em> See also Chris Blackwell describing his solution for Server Sent Events using Laravel and Vue<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
The problem: We want to display a large number of search results (from our DAM system) on a Web page. Gathering the results on the server and transferring them to the browser takes a while. To improve the user experience and show the first results as soon as possible, we want to \u201cstream\u201d the results. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_share_on_mastodon":"0"},"categories":[1],"tags":[],"class_list":["post-1859","post","type-post","status-publish","format-standard","hentry","category-weblog"],"share_on_mastodon":{"url":"","error":""},"_links":{"self":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts\/1859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/comments?post=1859"}],"version-history":[{"count":1,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts\/1859\/revisions"}],"predecessor-version":[{"id":1902,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts\/1859\/revisions\/1902"}],"wp:attachment":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/media?parent=1859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/categories?post=1859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/tags?post=1859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}