Streaming Real-Time Text Data to a Web Page Using Bash and Netcat

In this tutorial, we’ll walk through how to display a stream of text data from a Bash script onto a web page. This is useful for monitoring logs or real-time data directly in the browser. We will use a combination of a Bash script to generate the text data stream and netcat (also known as nc) to serve the data over HTTP.

Steps to Generate Text Stream using Bash

1. Create the Bash script to generate the text data stream.
2. Use netcat to serve the text over HTTP.

Example

1. Create a Bash Script to Generate the Text Data Stream

Let’s create a Bash script stream_data.sh, that simulates a real-time log output:

#!/bin/bash
# Filename: stream_data.sh

while true; do
  echo "$(date) - Random number: $RANDOM"
  sleep 2  # Simulate real-time data every 2 seconds
done

This script outputs a timestamp and a random number every 2 seconds.

2. Use netcat to Serve the Stream on a Web Page

We can now use netcat to serve the output of the script over HTTP. Create a new file serve_stream.sh with the following script.

#!/bin/bash
# Filename: serve_stream.sh

while true; do
{ 
  echo -e "HTTP/1.1 200 OK\r\nContent-Type: text/plain\r\n\r\n";
  ./stream_data.sh;
} | nc -l -p 8080;
done

This script starts an HTTP server on port 8080 and serves the output of stream_data.sh as plain text.

3. Run the Server

Make both scripts executable:

chmod +x stream_data.sh serve_stream.sh

Then, start the server:

./serve_stream.sh

4. Access the Stream via a Web Browser

Open your web browser and go to:

http://localhost:8080

You should now see a real-time stream of text data being updated in the browser.

Explanation

Here’s a brief explanation of what each part does:

• The Bash script stream_data.sh generates the text data stream with a timestamp and random number every 2 seconds.
• The serve_stream.sh script serves this data over HTTP using netcat. It listens on port 8080 and sends a simple HTTP response with the content type set to text/plain.

This is a very basic setup to stream text data to a webpage. For more advanced use cases, such as handling multiple clients or improving the design, you might want to consider using more advanced tools like Flask or Node.js.