added webUI REST basics example

This commit is contained in:
Sergio R. Caprile 2022-07-11 16:11:15 -03:00
parent 3f46ae7beb
commit abd7698d6d
4 changed files with 107 additions and 0 deletions

View File

@ -0,0 +1,20 @@
PROG ?= example
SSL = ?
ifeq "$(SSL)" "MBEDTLS"
CFLAGS += -DMG_ENABLE_MBEDTLS=1 -lmbedtls -lmbedcrypto -lmbedx509
endif
ifeq "$(SSL)" "OPENSSL"
CFLAGS += -DMG_ENABLE_OPENSSL=1 -lssl -lcrypto
endif
all: $(PROG)
$(DEBUGGER) ./$(PROG) $(ARGS)
$(PROG): main.c
$(CC) ../../mongoose.c -I../.. -W -Wall $(CFLAGS) $(EXTRA_CFLAGS) -o $(PROG) main.c
clean:
rm -rf $(PROG) *.o *.dSYM *.gcov *.gcno *.gcda *.obj *.exe *.ilk *.pdb

1
examples/webui-rest/ca.pem Symbolic link
View File

@ -0,0 +1 @@
../../test/data/ca.pem

View File

@ -0,0 +1,48 @@
// Copyright (c) 2022 Cesanta Software Limited
// All rights reserved
//
// REST basics example
// It implements the following endpoints:
// /api/f1 - respond with a simple mock result
// /api/sum - respond with the result of adding two numbers
// any other URI serves static files from s_root_dir
// Results are JSON strings
#include "mongoose.h"
static const char *s_http_addr = "http://localhost:8000"; // HTTP port
static const char *s_root_dir = "web_root";
static void fn(struct mg_connection *c, int ev, void *ev_data, void *fn_data) {
if (ev == MG_EV_HTTP_MSG) {
struct mg_http_message *hm = (struct mg_http_message *) ev_data;
if (mg_http_match_uri(hm, "/api/f1")) {
mg_http_reply(c, 200, "Content-Type: application/json\r\n", "{%Q:%d}\n",
"result", 123);
} else if (mg_http_match_uri(hm, "/api/sum")) {
// Attempt to fetch a JSON array from the body, hm->body
struct mg_str json = hm->body;
double num1, num2;
if (mg_json_get_num(json, "$[0]", &num1) &&
mg_json_get_num(json, "$[1]", &num2)) {
// Success! create a JSON response
mg_http_reply(c, 200, "Content-Type: application/json\r\n", "{%Q:%g}\n",
"result", num1 + num2);
}
} else {
struct mg_http_serve_opts opts = {.root_dir = s_root_dir};
mg_http_serve_dir(c, ev_data, &opts);
}
}
(void) fn_data;
}
int main(void) {
struct mg_mgr mgr; // Event manager
mg_log_set("2"); // Set to 3 to enable debug
mg_mgr_init(&mgr); // Initialise event manager
mg_http_listen(&mgr, s_http_addr, fn, NULL); // Create HTTP listener
for (;;) mg_mgr_poll(&mgr, 1000); // Infinite event loop
mg_mgr_free(&mgr);
return 0;
}

View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<body>
<h1>REST basics demo</h1>
<div style="height: 0.3em;">&nbsp;</div>
<button id="btn1">Call F1</button>
<button id="btn2">Call SUM(1, 2)</button>
<div style="margin-top: 1em;">Action log:</div>
<div id="log" style="background: #eee; height: 10em; padding: 0.5em; overflow:auto;"><div>
</body>
<script>
var E = function(id) { return document.getElementById(id); };
var btn1 = E('btn1'), btn2 = E('btn2'), msglog = E('log');
var enable = function(en) { btn1.disabled = btn2.disabled = !en; };
var log = text => msglog.innerHTML += text + '<br/>\n';
enable(true);
btn1.onclick = ev => fetch('/api/f1')
.then(r => r.json())
.then(r => {
console.log(r);
log('GET /api/f1: ' + JSON.stringify(r) + ' -> ' + JSON.stringify(r.result))
})
.catch(err => console.log(err));
const getsum = (a, b) =>
fetch('/api/sum', {method: 'POST', body:JSON.stringify([a, b])})
.then(r => r.json())
.catch(err => console.log(err));
btn2.onclick = ev => getsum(1, 2)
.then(r => {
console.log(r);
log('POST [1, 2] to /api/sum: ' + JSON.stringify(r) + ' -> ' + JSON.stringify(r.result))
})
.catch(err => console.log(err));
</script>
</html>