A visually pleasing way to view log entries in "real time". It's not meant to be a way to look through logs, but to show new log entries in a nice way. It's not suitable for logs where new entries are added more often than about every 5-10 seconds, depending on how JSON keys you serve.
LogStream is inspired by Google's Material Design, and adapts to different screen sizes.
- Personally I use it fullscreen on a retired iPad to visualize logs from two web servers that serves some webapps and other content, showing the web server logs in the order and format I want
- You can of course show logs from various log sources in one instance of LogStream, like both a Webapp and its API, since LogStream reads whatever it gets from server-generated JSON output, served as JSONP (see more below)
The demo checks server-generated JSON output, served as JSONP, for changes every 10 seconds (the interval can be configured). The data is only for the demo. In a real life scenario it's unlikely there'll be new data every 10 seconds.
PS: The animation is of course only shown when there's new data. The demo always has new data per 10 seconds.
LogStream is very easy to set up.
The server must serve a URL with JSON output in this format:
{
"stream":
{
"time":"2018-01-01 12:00:00",
"first key":"first value",
"second key":"second value",
"third key":"third value"
}
}
Notes:
- You must serve the output as JSONP
- Click here here to view the server side PHP code used for the demo
The only required JSON key is time
. You can use whatever format you like, but it should at least include seconds. The time is compared to the previous time, and if it has changed, the new data is shown.
If you want the IP address information shown in the demo, all you have to do is include a key called ip
with a valid IP address as value.
Note: My server uses a simple API that only supports IPv4 addresses. You can always change these JavaScript lines to use something better!
It is easiest to run LogStream directly from my server to always run the latest version. All you have to do is go to this URL:
https://www.olejon.net/code/logstream/app/?stream={URL}&interval={INTEGER}
As you can see, you must provide two query parameters:
stream
URL encoded URL to your JSON outputinterval
How often to check for new data, in seconds
Example:
https://www.olejon.net/code/logstream/app/?stream=https%3A%2F%2Fwww.olejon.net%2Fcode%2Flogstream%2Fstream%2F&interval=10
This is the URL to the demo, so the demo gets its JSON data from https://www.olejon.net/code/logstream/stream/?callback=JSONP
.
If LogStream is added to the home screen, both desktop or mobile, if using Chrome/Chromium or Safari (mobile only), they will add a shortcut so LogStream is showed as if it was a native app.
Nothing is logged.