mirror/mongoose
1
0
Fork 0
mirror of https://github.com/cesanta/mongoose.git synced 2024-11-27 20:59:00 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Make dashboard more robust

Browse Source
This commit is contained in:
Sergey Lyubka 2022-06-08 19:53:29 +01:00
parent d4106b5cbd
commit ac3151f871
7 changed files with 2369 additions and 1076 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/device-dashboard/Makefile
View File

@ -1,5 +1,5 @@
PROG ?= example
SOURCES ?= ../../mongoose.c main.c net.c packed_fs.c
SOURCES ?= ../../mongoose.c main.c net.c mjson.c packed_fs.c
CFLAGS ?= -I../.. -DMG_ENABLE_PACKED_FS=1 -DMG_ENABLE_LINES=1 $(EXTRA)
FILES_TO_EMBED ?= $(wildcard web_root/*)
ROOT ?= $(realpath $(CURDIR)/../../..)

1066
examples/device-dashboard/mjson.c Normal file
View File

File diff suppressed because it is too large Load Diff

208
examples/device-dashboard/mjson.h Normal file
View File

@ -0,0 +1,208 @@
// Copyright (c) 2018-2020 Cesanta Software Limited
// All rights reserved
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
#ifndef MJSON_H
#define MJSON_H
#include <stdarg.h>
#include <stdlib.h>
#include <string.h>
#ifndef MJSON_ENABLE_PRINT
#define MJSON_ENABLE_PRINT 1
#endif
#ifndef MJSON_ENABLE_RPC
#define MJSON_ENABLE_RPC 1
#endif
#ifndef MJSON_ENABLE_BASE64
#define MJSON_ENABLE_BASE64 1
#endif
#ifndef MJSON_ENABLE_MERGE
#define MJSON_ENABLE_MERGE 1
#endif
#ifndef MJSON_ENABLE_PRETTY
#define MJSON_ENABLE_PRETTY 1
#endif
#ifndef MJSON_ENABLE_NEXT
#define MJSON_ENABLE_NEXT 1
#endif
#ifndef MJSON_RPC_LIST_NAME
#define MJSON_RPC_LIST_NAME "rpc.list"
#endif
#ifndef MJSON_DYNBUF_CHUNK
#define MJSON_DYNBUF_CHUNK 256 // Allocation granularity for print_dynamic_buf
#endif
#ifndef MJSON_REALLOC
#define MJSON_REALLOC realloc
#endif
#ifdef __cplusplus
extern "C" {
#endif
#define MJSON_ERROR_INVALID_INPUT (-1)
#define MJSON_ERROR_TOO_DEEP (-2)
#define MJSON_TOK_INVALID 0
#define MJSON_TOK_KEY 1
#define MJSON_TOK_STRING 11
#define MJSON_TOK_NUMBER 12
#define MJSON_TOK_TRUE 13
#define MJSON_TOK_FALSE 14
#define MJSON_TOK_NULL 15
#define MJSON_TOK_ARRAY 91
#define MJSON_TOK_OBJECT 123
#define MJSON_TOK_IS_VALUE(t) ((t) > 10 && (t) < 20)
typedef int (*mjson_cb_t)(int ev, const char *s, int off, int len, void *ud);
#ifndef MJSON_MAX_DEPTH
#define MJSON_MAX_DEPTH 20
#endif
int mjson(const char *s, int len, mjson_cb_t cb, void *ud);
int mjson_find(const char *s, int len, const char *jp, const char **, int *);
int mjson_get_number(const char *s, int len, const char *path, double *v);
int mjson_get_bool(const char *s, int len, const char *path, int *v);
int mjson_get_string(const char *s, int len, const char *path, char *to, int n);
int mjson_get_hex(const char *s, int len, const char *path, char *to, int n);
#if MJSON_ENABLE_NEXT
int mjson_next(const char *s, int n, int off, int *koff, int *klen, int *voff,
int *vlen, int *vtype);
#endif
#if MJSON_ENABLE_BASE64
int mjson_get_base64(const char *s, int len, const char *path, char *to, int n);
int mjson_base64_dec(const char *src, int n, char *dst, int dlen);
#endif
#if MJSON_ENABLE_PRINT
typedef int (*mjson_print_fn_t)(const char *buf, int len, void *userdata);
typedef int (*mjson_vprint_fn_t)(mjson_print_fn_t, void *, va_list *);
struct mjson_fixedbuf {
char *ptr;
int size, len;
};
int mjson_printf(mjson_print_fn_t, void *, const char *fmt, ...);
int mjson_vprintf(mjson_print_fn_t, void *, const char *fmt, va_list *ap);
int mjson_print_str(mjson_print_fn_t, void *, const char *s, int len);
int mjson_print_int(mjson_print_fn_t, void *, int value, int is_signed);
int mjson_print_long(mjson_print_fn_t, void *, long value, int is_signed);
int mjson_print_buf(mjson_print_fn_t fn, void *, const char *buf, int len);
int mjson_print_dbl(mjson_print_fn_t fn, void *, double, int width);
int mjson_print_null(const char *ptr, int len, void *userdata);
int mjson_print_fixed_buf(const char *ptr, int len, void *userdata);
int mjson_print_dynamic_buf(const char *ptr, int len, void *userdata);
int mjson_snprintf(char *buf, size_t len, const char *fmt, ...);
char *mjson_aprintf(const char *fmt, ...);
#if MJSON_ENABLE_PRETTY
int mjson_pretty(const char *, int, const char *, mjson_print_fn_t, void *);
#endif
#if MJSON_ENABLE_MERGE
int mjson_merge(const char *, int, const char *, int, mjson_print_fn_t, void *);
#endif
#endif // MJSON_ENABLE_PRINT
#if MJSON_ENABLE_RPC
void jsonrpc_init(mjson_print_fn_t, void *userdata);
int mjson_globmatch(const char *s1, int n1, const char *s2, int n2);
struct jsonrpc_request {
struct jsonrpc_ctx *ctx;
const char *frame; // Points to the whole frame
int frame_len; // Frame length
const char *params; // Points to the "params" in the request frame
int params_len; // Length of the "params"
const char *id; // Points to the "id" in the request frame
int id_len; // Length of the "id"
const char *method; // Points to the "method" in the request frame
int method_len; // Length of the "method"
mjson_print_fn_t fn; // Printer function
void *fndata; // Printer function data
void *userdata; // Callback's user data as specified at export time
};
struct jsonrpc_method {
const char *method;
int method_sz;
void (*cb)(struct jsonrpc_request *);
struct jsonrpc_method *next;
};
// Main RPC context, stores current request information and a list of
// exported RPC methods.
struct jsonrpc_ctx {
struct jsonrpc_method *methods;
mjson_print_fn_t response_cb;
void *response_cb_data;
};
// Registers function fn under the given name within the given RPC context
#define jsonrpc_ctx_export(ctx, name, fn) \
do { \
static struct jsonrpc_method m = {(name), sizeof(name) - 1, (fn), 0}; \
m.next = (ctx)->methods; \
(ctx)->methods = &m; \
} while (0)
void jsonrpc_ctx_init(struct jsonrpc_ctx *ctx, mjson_print_fn_t, void *);
void jsonrpc_return_error(struct jsonrpc_request *r, int code,
const char *message, const char *data_fmt, ...);
void jsonrpc_return_success(struct jsonrpc_request *r, const char *result_fmt,
...);
void jsonrpc_ctx_process(struct jsonrpc_ctx *ctx, const char *req, int req_sz,
mjson_print_fn_t fn, void *fndata, void *userdata);
extern struct jsonrpc_ctx jsonrpc_default_context;
extern void jsonrpc_list(struct jsonrpc_request *r);
#define jsonrpc_export(name, fn) \
jsonrpc_ctx_export(&jsonrpc_default_context, (name), (fn))
#define jsonrpc_process(buf, len, fn, fnd, ud) \
jsonrpc_ctx_process(&jsonrpc_default_context, (buf), (len), (fn), (fnd), (ud))
#define JSONRPC_ERROR_INVALID -32700 /* Invalid JSON was received */
#define JSONRPC_ERROR_NOT_FOUND -32601 /* The method does not exist */
#define JSONRPC_ERROR_BAD_PARAMS -32602 /* Invalid params passed */
#define JSONRPC_ERROR_INTERNAL -32603 /* Internal JSON-RPC error */
#endif // MJSON_ENABLE_RPC
#ifdef __cplusplus
}
#endif
#endif // MJSON_H

50
examples/device-dashboard/net.c
View File

@ -1,6 +1,7 @@
// Copyright (c) 2020-2022 Cesanta Software Limited
// All rights reserved
#include "mjson.h"
#include "mongoose.h"
#define MQTT_SERVER "mqtt://broker.hivemq.com:1883"
@ -66,12 +67,14 @@ static struct user *getuser(struct mg_http_message *hm) {
static void send_notification(struct mg_mgr *mgr, const char *name,
const char *data) {
struct mg_connection *c;
char *msg = mjson_aprintf("{%Q:%Q,%Q:%s}", "name", name, "data", data);
for (c = mgr->conns; c != NULL; c = c->next) {
if (c->label[0] != 'W') continue;
// c->is_hexdumping = 1;
mg_ws_printf(c, WEBSOCKET_OP_TEXT, "{\"name\": \"%s\", \"data\": %s}", name,
data);
mg_ws_send(c, msg, strlen(msg), WEBSOCKET_OP_TEXT);
if (strcmp(name, "metrics") != 0) MG_INFO(("%lu -> %s", c->id, msg));
}
free(msg);
}
// Send simulated metrics data to the dashboard, for chart rendering
@ -80,23 +83,25 @@ static void timer_metrics_fn(void *param) {
mg_snprintf(buf, sizeof(buf), "[ %lu, %d ]", (unsigned long) time(NULL),
10 + (int) ((double) rand() * 10 / RAND_MAX));
send_notification(param, "metrics", buf);
// MG_INFO(("%s", buf));
}
// MQTT event handler function
static void mqtt_fn(struct mg_connection *c, int ev, void *evd, void *fnd) {
static void mqtt_fn(struct mg_connection *c, int ev, void *ev_data, void *fnd) {
if (ev == MG_EV_MQTT_OPEN) {
s_connected = true;
// c->is_hexdumping = 1;
mg_mqtt_sub(s_mqtt, mg_str(s_config.sub), 1);
c->is_hexdumping = 1;
mg_mqtt_sub(s_mqtt, mg_str(s_config.sub), 2);
send_notification(c->mgr, "config", "null");
} else if (ev == MG_EV_MQTT_MSG) {
struct mg_mqtt_message *mm = evd;
char buf[256];
snprintf(buf, sizeof(buf), "{\"topic\":\"%.*s\",\"data\":\"%.*s\"}",
(int) mm->topic.len, mm->topic.ptr, (int) mm->data.len,
mm->data.ptr);
send_notification(c->mgr, "message", buf);
struct mg_mqtt_message *mm = ev_data;
char *message = mjson_aprintf(
"{%Q: %.*Q,%Q:%.*Q,%Q:%d}", "topic", (int) mm->topic.len, mm->topic.ptr,
"data", (int) mm->data.len, mm->data.ptr, "qos", mm->qos);
send_notification(c->mgr, "message", message);
free(message);
} else if (ev == MG_EV_MQTT_CMD) {
struct mg_mqtt_message *mm = (struct mg_mqtt_message *) ev_data;
MG_DEBUG(("cmd %d qos %d", mm->cmd, mm->qos));
} else if (ev == MG_EV_CLOSE) {
s_mqtt = NULL;
if (s_connected) {
@ -136,12 +141,11 @@ void device_dashboard_fn(struct mg_connection *c, int ev, void *ev_data,
// All URIs starting with /api/ must be authenticated
mg_printf(c, "%s", "HTTP/1.1 403 Denied\r\nContent-Length: 0\r\n\r\n");
} else if (mg_http_match_uri(hm, "/api/config/get")) {
mg_printf(c, "HTTP/1.1 200 OK\r\nTransfer-Encoding: chunked\r\n\r\n");
mg_http_printf_chunk(
c, "{\"url\":\"%s\",\"pub\":\"%s\",\"sub\":\"%s\",\"connected\":%s}",
s_config.url, s_config.pub, s_config.sub,
s_connected ? "true" : "false");
mg_http_printf_chunk(c, "");
char *response = mjson_aprintf("{%Q:%Q,%Q:%Q,%Q:%Q,%Q:%B}", "url",
s_config.url, "pub", s_config.pub, "sub",
s_config.sub, "connected", s_connected);
mg_http_reply(c, 200, NULL, "%s\n", response);
free(response);
} else if (mg_http_match_uri(hm, "/api/config/set")) {
// Admins only
if (strcmp(u->name, "admin") == 0) {
@ -166,13 +170,13 @@ void device_dashboard_fn(struct mg_connection *c, int ev, void *ev_data,
mg_ws_upgrade(c, hm, NULL);
// mg_printf(c, "HTTP/1.1 200 OK\r\nTransfer-Encoding: chunked\r\n\r\n");
} else if (mg_http_match_uri(hm, "/api/login")) {
mg_printf(c, "HTTP/1.1 200 OK\r\nTransfer-Encoding: chunked\r\n\r\n");
mg_http_printf_chunk(c, "{\"user\":\"%s\",\"token\":\"%s\"}\n", u->name,
u->token);
mg_http_printf_chunk(c, "");
char *response =
mjson_aprintf("{%Q:%Q,%Q:%Q}", "user", u->name, "token", u->token);
mg_http_reply(c, 200, NULL, "%s\n", response);
free(response);
} else {
struct mg_http_serve_opts opts = {0};
#if 1
#if 0
opts.root_dir = "/web_root";
opts.fs = &mg_fs_packed;
#else

2059
examples/device-dashboard/packed_fs.c
View File

File diff suppressed because it is too large Load Diff

54
examples/device-dashboard/web_root/main.js
View File

@ -36,12 +36,6 @@ const Nav = props => html`
</div>
</div>`;
const Footer = props => html`
<div style="color: silver; margin-top: 2em; padding-top: 0.5em; border-top: 1px solid #ccc; ">
Copyright (c) Your Company
</div>
`;
const Hero = props => html`
<div class="section">
@ -107,20 +101,15 @@ const Login = function(props) {
const Configuration = function(props) {
const [url, setUrl] = useState('');
const [pub, setPub] = useState('');
const [sub, setSub] = useState('');
const [url, setUrl] = useState(props.config.url || '');
const [pub, setPub] = useState(props.config.pub || '');
const [sub, setSub] = useState(props.config.sub || '');
useEffect(() => {
const id = PubSub.subscribe(function(msg) {
if (msg.name == 'newconfig') {
setUrl(msg.data.url);
setPub(msg.data.pub);
setSub(msg.data.sub);
}
});
return PubSub.unsubscribe(id);
}, []);
setUrl(props.config.url);
setPub(props.config.pub);
setSub(props.config.sub);
}, [props.config]);
const update = (name, val) => fetch('/api/config/set', {
method: 'post',
@ -130,6 +119,7 @@ const Configuration = function(props) {
const updatepub = ev => update('pub', pub);
const updatesub = ev => update('sub', sub);
console.log(props, [url, pub, sub]);
return html`
<div class="section">
<h3 style="background: #c03434; color: #fff; padding: 0.4em;">
@ -158,6 +148,10 @@ const Configuration = function(props) {
<button class="btn" disabled=${!pub} onclick=${updatepub}
style="margin-left: 1em; background: #8aa;">Update</button>
</div>
<div>
You can use <a href="http://www.hivemq.com/demos/websocket-client/">
HiveMQ Websocket web client</a> to send messages to this console.
</div>
<div class="msg">
Device keeps a persistent connection to the configured MQTT server.
Changes to this configuration are propagated to all dashboards: try
@ -172,18 +166,17 @@ const Configuration = function(props) {
const Message = m => html`<div style="margin: 0.5em 0;">
<span class="qos">qos: ${m.message.qos} </span>
<span class="topic">topic: ${m.message.topic} </span>
<span class="data">data: ${m.message.data}</span>
</div>`;
const Messages = function(props) {
const [messages, setMessages] = useState([]);
const [cfg, setCfg] = useState({});
const [txt, setTxt] = useState('');
useEffect(() => {
const id = PubSub.subscribe(function(msg) {
if (msg.name == 'newconfig') setCfg(x => msg.data);
if (msg.name == 'message') setMessages(x => x.concat([msg.data]));
});
return PubSub.unsubscribe(id);
@ -193,12 +186,12 @@ const Messages = function(props) {
method: 'post',
body: `message=${encodeURIComponent(txt)}`
}).then(r => setTxt(''));
const connstatus = props.config.connected ? 'connected' : 'diconnected';
return html`
<div class="section">
<h3 style="background: #30c040; color: #fff; padding: 0.4em;">MQTT messages</h3>
<div>
MQTT server status: <b>${cfg.connected ? 'connected' : 'diconnected'}</b>
MQTT server status: <b>${connstatus}</b>
</div>
<div style="height: 10em; overflow: auto; padding: 0.5em; " class="border">
${messages.map(message => h(Message, {message}))}
@ -312,11 +305,13 @@ const Chart = function(props) {
const App = function(props) {
const [user, setUser] = useState('');
const [config, setConfig] = useState({});
const getconfig = () =>
fetch('/api/config/get', {headers: {Authorization: ''}})
.then(r => r.json())
.then(r => PubSub.publish({name: 'newconfig', data: r}));
.then(r => setConfig(r))
.catch(err => console.log(err));
const login = function(u) {
document.cookie = `access_token=${u.token};path=/;max-age=3600`;
@ -336,6 +331,7 @@ const App = function(props) {
var tid, wsURI = proto + '//' + l.host + '/api/watch'
var reconnect = function() {
var ws = new WebSocket(wsURI);
ws.onopen = () => console.log('ws connected');
ws.onmessage = function(ev) {
try {
var msg = JSON.parse(ev.data);
@ -348,6 +344,7 @@ const App = function(props) {
ws.onclose = function() {
clearTimeout(tid);
tid = setTimeout(reconnect, 1000);
console.log('ws disconnected');
};
};
reconnect();
@ -355,12 +352,12 @@ const App = function(props) {
useEffect(() => {
// Called once at init time
PubSub.subscribe(msg => msg.name == 'config' && getconfig());
fetch('/api/login', {headers: {Authorization: ''}})
.then(r => r.json())
.then(r => login(r))
.then(watch)
.catch(err => setUser(''));
watch();
PubSub.subscribe(msg => msg.name == 'config' && getconfig());
}, []);
if (!user) return html`<${Login} login=${login} />`;
@ -371,10 +368,11 @@ const App = function(props) {
<div class="row">
<div class="col col-6"><${Hero} /></div>
<div class="col col-6"><${Chart} /></div>
<div class="col col-6">${user == 'admin' && h(Configuration)}</div>
<div class="col col-6"><${Messages} /></div>
<div class="col col-6">
${user == 'admin' && h(Configuration, {config})}
</div>
<div class="col col-6"><${Messages} config=${config} /></div>
</div>
<${Footer} />
</div>`;
};

6
examples/device-dashboard/web_root/style.css
View File

@ -19,8 +19,10 @@ a, a:visited, a:active { color: #55f; }
.nowrap { white-space: nowrap; }
.msg { background: #def; border-left: 5px solid #59d; padding: 0.5em; font-size: 90%; margin: 1em 0; }
.section { margin: 0 1em; }
.topic { background: #fea; padding: 0.2em 1em; border-radius: 0.4em; }
.data { background: #aef; padding: 0.2em 1em; border-radius: 0.4em; }
.topic, .data, .qos { padding: 0.2em 0.5em; border-radius: 0.4em; margin-right: 0.5em; }
.qos { background: #efa; }
.topic { background: #fea; }
.data { background: #aef; }
/* Grid */
.row { display: flex; flex-wrap: wrap; }