move to new skeleton

tutorials/webui/live-log/Makefile

@@ -0,0 +1,25 @@
+PROG ?= example                   # Program we are building
+DELETE = rm -rf                   # Command to remove files
+OUT ?= -o $(PROG)                 # Compiler argument for output file
+SOURCES = main.c mongoose.c       # Source code files
+CFLAGS = -W -Wall -Wextra -g -I.  # Build options
+
+# Mongoose build options. See https://mongoose.ws/documentation/#build-options
+#CFLAGS_MONGOOSE += -DMG_ENABLE_LINES
+
+ifeq ($(OS),Windows_NT)   # Windows settings. Assume MinGW compiler. To use VC: make CC=cl CFLAGS=/MD OUT=/Feprog.exe
+  PROG ?= example.exe           # Use .exe suffix for the binary
+  CC = gcc                      # Use MinGW gcc compiler
+  CFLAGS += -lws2_32            # Link against Winsock library
+  DELETE = cmd /C del /Q /F /S  # Command prompt command to delete files
+  OUT ?= -o $(PROG)             # Build output
+endif
+
+all: $(PROG)              # Default target. Build and run program
+	$(RUN) ./$(PROG) $(ARGS)
+
+$(PROG): $(SOURCES)       # Build program from sources
+	$(CC) $(SOURCES) $(CFLAGS) $(CFLAGS_MONGOOSE) $(CFLAGS_EXTRA) $(OUT)
+
+clean:                    # Cleanup. Delete built program and all build artifacts
+	$(DELETE) $(PROG) *.o *.obj *.exe *.dSYM

tutorials/webui/live-log/README.md

@@ -0,0 +1 @@
+See detailed tutorial at https://mongoose.ws/tutorials/webui/webui-push/

tutorials/webui/live-log/main.c

@@ -0,0 +1,61 @@
+// Copyright (c) 2020 Cesanta Software Limited
+// All rights reserved
+
+#include "mongoose.h"
+
+// HTTP request handler function. It implements the following endpoints:
+//   /api/log/static - returns contents of log.txt file
+//   /api/log/live - hangs forever, and returns live log messages
+//   all other URI - serves web_root/ directory
+static void cb(struct mg_connection *c, int ev, void *ev_data) {
+  if (ev == MG_EV_HTTP_MSG) {
+    struct mg_http_message *hm = (struct mg_http_message *) ev_data;
+    if (mg_match(hm->uri, mg_str("/api/log/static"), NULL)) {
+      struct mg_http_serve_opts opts = {.root_dir = NULL};
+      mg_http_serve_file(c, hm, "log.txt", &opts);
+    } else if (mg_match(hm->uri, mg_str("/api/log/live"), NULL)) {
+      c->data[0] = 'L';  // Mark that connection as live log listener
+      mg_printf(c, "HTTP/1.1 200 OK\r\nTransfer-Encoding: chunked\r\n\r\n");
+    } else {
+      struct mg_http_serve_opts opts = {.root_dir = "web_root"};
+      mg_http_serve_dir(c, ev_data, &opts);
+    }
+  }
+}
+
+static void log_message(const char *filename, const char *message) {
+  FILE *fp = fopen(filename, "a");
+  if (fp != NULL) {
+    fprintf(fp, "%s", message);
+    fclose(fp);
+  }
+}
+
+static void broadcast_message(struct mg_mgr *mgr, const char *message) {
+  struct mg_connection *c;
+  for (c = mgr->conns; c != NULL; c = c->next) {
+    if (c->data[0] == 'L') mg_http_printf_chunk(c, "%s", message);
+  }
+}
+
+// Timer function - called periodically.
+// Prepare log message. Save it to a file, and broadcast.
+static void timer_fn(void *arg) {
+  char buf[64];
+  snprintf(buf, sizeof(buf), "Time is: %lu\n", (unsigned long) time(NULL));
+  log_message("log.txt", buf);
+  broadcast_message(arg, buf);
+}
+
+int main(void) {
+  struct mg_mgr mgr;
+
+  mg_mgr_init(&mgr);
+  mg_http_listen(&mgr, "http://localhost:8000", cb, NULL);
+  mg_timer_add(&mgr, 1000, MG_TIMER_REPEAT, timer_fn, &mgr);
+
+  for (;;) mg_mgr_poll(&mgr, 50);
+  mg_mgr_free(&mgr);
+
+  return 0;
+}

tutorials/webui/live-log/mongoose.c

@@ -0,0 +1 @@
+../../../mongoose.c

tutorials/webui/live-log/mongoose.h

@@ -0,0 +1 @@
+../../../mongoose.h

tutorials/webui/live-log/web_root/index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>example</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <style>
+      #container { margin-right: auto; margin-left: auto; max-width: 480px; }
+      #info { background: #e0f0f0; border-radius: .5em; padding: 2em;  }
+      #static, #live { background: #f0f0f0; border-radius: .5em; padding: 0.5em; max-height: 10em; overflow: auto; height: 100%; }
+      #wrapper { display: flex; justify-content: flex-evenly; margin-top: 1em; }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="info">
+        A div below shows file log.txt, which is produced by the server.
+        The server appends a new log message to that file every second,
+        and a div below also shows that, implementing a "live log" feature.
+        JS code on this page first fetches /api/log/static that returns
+        log.txt contents, then fetches /api/log/live that does not return,
+        but feeds chunks of data as they arrive (live log).
+        <br/><br/>
+        You can also use <code>curl</code> command-line utility to see
+        live logs:
+        <br/><code>curl localhost:8000/api/log/live</code>
+      </div>
+      <div id="wrapper">
+        <div style="width: 50%"><b>Static</b><pre id="static"></pre></div>
+        <div style="width: 1em;"></div>
+        <div style="width: 50%"><b>Live</b><pre id="live"></pre></div>
+      </div>
+    </div>
+  </body>
+  <script>
+    var f = function(r) {
+      return r.read().then(function(result) {
+        var data = String.fromCharCode.apply(null, result.value);
+        document.getElementById('live').innerText += data;  // Append live log
+        if (!result.done) f(r);  // Read next chunk
+      });
+    };
+    window.onload = ev => fetch('/api/log/static')
+      .then(r => r.text())
+      .then(r => { document.getElementById('static').innerText = r; })
+      .then(r => fetch('/api/log/live'))
+      .then(r => r.body.getReader())
+      .then(f);
+  </script>
+</html>