wt/mongoose
1
0 Fork 0
mirror of https://github.com/cesanta/mongoose.git synced 2026-10-20 11:19:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

move to new skeleton

Browse Source
This commit is contained in:
Sergio R. Caprile committed 2024-04-29 11:23:00 -03:00
1 parent d391bca2d3
commit fe0b144b84
63 files changed
+20 -20
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/webui-login/Makefile
-25
View File
@@ -1,25 +0,0 @@
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
examples/webui-login/README.md
-1
View File
@@ -1 +0,0 @@
See detailed tutorial at https://mongoose.ws/tutorials/webui-login/
examples/webui-login/main.c
-76
View File
@@ -1,76 +0,0 @@
// Copyright (c) 2022 Cesanta Software Limited
// All rights reserved
#include "mongoose.h"
const char *s_listening_url = "http://0.0.0.0:8000";
// Authenticated user.
// A user can be authenticated by:
// - a name:pass pair
// - a token
// When a user is shown a login screen, they enter a user:pass. If successful,
// the server returns the user info, which includes the token. From that point
// on, the client can use the token for authentication. Tokens could be
// refreshed/changed at server side, forcing clients to re-login.
struct user {
const char *name, *pass, *token;
};
// Parse HTTP requests, return authenticated user or NULL
static struct user *getuser(struct mg_http_message *hm) {
// In production, make passwords strong and tokens randomly generated
// In this example, user list is kept in RAM. In production, it can
// be backed by file, database, or some other method.
static struct user users[] = {
{"admin", "pass0", "admin_token"},
{"user1", "pass1", "user1_token"},
{"user2", "pass2", "user2_token"},
{NULL, NULL, NULL},
};
char user[256], pass[256];
struct user *u;
mg_http_creds(hm, user, sizeof(user), pass, sizeof(pass));
if (user[0] != '\0' && pass[0] != '\0') {
// Both user and password are set, search by user/password
for (u = users; u->name != NULL; u++)
if (strcmp(user, u->name) == 0 && strcmp(pass, u->pass) == 0) return u;
} else if (user[0] == '\0') {
// Only password is set, search by token
for (u = users; u->name != NULL; u++)
if (strcmp(pass, u->token) == 0) return u;
}
return NULL;
}
void fn(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;
struct user *u = getuser(hm);
if (u == NULL && mg_match(hm->uri, mg_str("/api/#"), NULL)) {
// All URIs starting with /api/ must be authenticated
mg_http_reply(c, 403, "", "Denied\n");
} else if (mg_match(hm->uri, mg_str("/api/data"), NULL)) {
mg_http_reply(c, 200, "Content-Type: application/json\r\n",
"{%m:%m,%m:%m}\n", MG_ESC("text"), MG_ESC("Hello!"),
MG_ESC("data"), MG_ESC("somedata"));
} else if (mg_match(hm->uri, mg_str("/api/login"), NULL)) {
mg_http_reply(c, 200, "Content-Type: application/json\r\n",
"{%m:%m,%m:%m}\n", MG_ESC("user"), MG_ESC(u->name),
MG_ESC("token"), MG_ESC(u->token));
} else {
struct mg_http_serve_opts opts = {.root_dir = "web_root"};
mg_http_serve_dir(c, ev_data, &opts);
}
}
}
int main(void) {
struct mg_mgr mgr;
mg_log_set(MG_LL_DEBUG);
mg_mgr_init(&mgr);
mg_http_listen(&mgr, s_listening_url, fn, &mgr);
while (mgr.conns != NULL) mg_mgr_poll(&mgr, 500);
mg_mgr_free(&mgr);
return 0;
}
examples/webui-login/mongoose.c
-1
View File
@@ -1 +0,0 @@
../../mongoose.c
examples/webui-login/mongoose.h
-1
View File
@@ -1 +0,0 @@
../../mongoose.h
examples/webui-login/web_root/index.html
-8
View File
@@ -1,8 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body></body>
<script type="module" src="main.js"></script>
</html>
examples/webui-login/web_root/main.js
-98
View File
@@ -1,98 +0,0 @@
'use strict';
import { h, html, render, useEffect, useState } from './preact.min.js';
const Nav = props => html`
<div style="background: #333; padding: 0.5em; color: #fff;">
<div class="container d-flex">
<div style="flex: 1 1 auto; display: flex; align-items: center;">
<b>Your Product</b>
</div>
<div style="display: flex; align-items: center; flex: 0 0 auto; ">
<span>Logged in as:</span>
<span style="padding: 0 0.5em;"><img src="user.png" height="22" /></span>
<span>${props.user}</span>
<a class="btn" onclick=${props.logout}
style="margin-left: 1em; font-size: 0.8em; background: #8aa;">logout</a>
</div>
</div>
</div>`;
const Main = props => html`
<div class="row">
<H1>${props.data.text}</H1>
</div>`;
const Login = function (props) {
const [user, setUser] = useState('');
const [pass, setPass] = useState('');
const login = () =>
fetch(
'/api/login',
{ headers: { Authorization: 'Basic ' + btoa(user + ':' + pass) } })
.then(r => r.json())
.then(r => r && props.login(r))
.catch(err => err);
return html`
<div class="rounded border" style="max-width: 480px; margin: 0 auto; margin-top: 5em; background: #eee; ">
<div style="padding: 2em; ">
<h1 style="color: #666;">Your Product Login </h1>
<div style="margin: 0.5em 0;">
<input type='text' placeholder='Name' style="width: 100%;"
oninput=${ev => setUser(ev.target.value)} value=${user} />
</div>
<div style="margin: 0.5em 0;">
<input type="password" placeholder="Password" style="width: 100%;"
oninput=${ev => setPass(ev.target.value)} value=${pass}
onchange=${login} />
</div>
<div style="margin: 1em 0;">
<button class="btn" style="width: 100%; background: #8aa;"
disabled=${!user || !pass} onclick=${login}> Login </button>
</div>
<div style="color: #777; margin-top: 2em;">
Valid logins: admin:pass0, user1:pass1, user2:pass2
</div>
</div>
</div>`;
};
const App = function () {
const [user, setUser] = useState('');
const [data, setData] = useState({});
const getin = () =>
fetch('/api/data', { headers: { Authorization: '' } })
.then(r => r.json())
.then(r => setData(r))
.catch(err => console.log(err));
const login = function (u) {
document.cookie = `access_token=${u.token}; Secure, HttpOnly; SameSite=Lax; path=/; max-age=3600`;
setUser(u.user);
return getin();
};
const logout = () => {
document.cookie = `access_token=; Secure, HttpOnly; SameSite=Lax; path=/; max-age=0`;
setUser('');
};
useEffect(() => {
// Called once at init time
fetch('/api/login', { headers: { Authorization: '' } })
.then(r => r.json())
.then(r => login(r))
.catch(() => setUser(''));
}, []);
if (!user) return html`<${Login} login=${login} />`;
return html`
<${Nav} user=${user} logout=${logout} />
<${Main} data=${data} />
`;
};
window.onload = () => render(h(App), document.body);
examples/webui-login/web_root/preact.min.js
Vendored
-1
View File
@@ -1 +0,0 @@
var e,n,_,t,o,r,u,l={},i=[],c=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function s(e,n){for(var _ in n)e[_]=n[_];return e}function f(e){var n=e.parentNode;n&&n.removeChild(e)}function a(n,_,t){var o,r,u,l={};for(u in _)"key"==u?o=_[u]:"ref"==u?r=_[u]:l[u]=_[u];if(arguments.length>2&&(l.children=arguments.length>3?e.call(arguments,2):t),"function"==typeof n&&null!=n.defaultProps)for(u in n.defaultProps)void 0===l[u]&&(l[u]=n.defaultProps[u]);return p(n,l,o,r,null)}function p(e,t,o,r,u){var l={type:e,props:t,key:o,ref:r,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==u?++_:u};return null!=n.vnode&&n.vnode(l),l}function h(e){return e.children}function d(e,n){this.props=e,this.context=n}function v(e,n){if(null==n)return e.__?v(e.__,e.__.__k.indexOf(e)+1):null;for(var _;n<e.__k.length;n++)if(null!=(_=e.__k[n])&&null!=_.__e)return _.__e;return"function"==typeof e.type?v(e):null}function y(e){var n,_;if(null!=(e=e.__)&&null!=e.__c){for(e.__e=e.__c.base=null,n=0;n<e.__k.length;n++)if(null!=(_=e.__k[n])&&null!=_.__e){e.__e=e.__c.base=_.__e;break}return y(e)}}function m(e){(!e.__d&&(e.__d=!0)&&t.push(e)&&!g.__r++||r!==n.debounceRendering)&&((r=n.debounceRendering)||o)(g)}function g(){for(var e;g.__r=t.length;)e=t.sort(function(e,n){return e.__v.__b-n.__v.__b}),t=[],e.some(function(e){var n,_,t,o,r,u;e.__d&&(r=(o=(n=e).__v).__e,(u=n.__P)&&(_=[],(t=s({},o)).__v=o.__v+1,P(u,o,t,n.__n,void 0!==u.ownerSVGElement,null!=o.__h?[r]:null,_,null==r?v(o):r,o.__h),D(_,o),o.__e!=r&&y(o)))})}function k(e,n,_,t,o,r,u,c,s,f){var a,d,y,m,g,k,x,H=t&&t.__k||i,E=H.length;for(_.__k=[],a=0;a<n.length;a++)if(null!=(m=_.__k[a]=null==(m=n[a])||"boolean"==typeof m?null:"string"==typeof m||"number"==typeof m||"bigint"==typeof m?p(null,m,null,null,m):Array.isArray(m)?p(h,{children:m},null,null,null):m.__b>0?p(m.type,m.props,m.key,null,m.__v):m)){if(m.__=_,m.__b=_.__b+1,null===(y=H[a])||y&&m.key==y.key&&m.type===y.type)H[a]=void 0;else for(d=0;d<E;d++){if((y=H[d])&&m.key==y.key&&m.type===y.type){H[d]=void 0;break}y=null}P(e,m,y=y||l,o,r,u,c,s,f),g=m.__e,(d=m.ref)&&y.ref!=d&&(x||(x=[]),y.ref&&x.push(y.ref,null,m),x.push(d,m.__c||g,m)),null!=g?(null==k&&(k=g),"function"==typeof m.type&&null!=m.__k&&m.__k===y.__k?m.__d=s=b(m,s,e):s=C(e,m,y,H,g,s),f||"option"!==_.type?"function"==typeof _.type&&(_.__d=s):e.value=""):s&&y.__e==s&&s.parentNode!=e&&(s=v(y))}for(_.__e=k,a=E;a--;)null!=H[a]&&("function"==typeof _.type&&null!=H[a].__e&&H[a].__e==_.__d&&(_.__d=v(t,a+1)),U(H[a],H[a]));if(x)for(a=0;a<x.length;a++)T(x[a],x[++a],x[++a])}function b(e,n,_){var t,o;for(t=0;t<e.__k.length;t++)(o=e.__k[t])&&(o.__=e,n="function"==typeof o.type?b(o,n,_):C(_,o,o,e.__k,o.__e,n));return n}function C(e,n,_,t,o,r){var u,l,i;if(void 0!==n.__d)u=n.__d,n.__d=void 0;else if(null==_||o!=r||null==o.parentNode)e:if(null==r||r.parentNode!==e)e.appendChild(o),u=null;else{for(l=r,i=0;(l=l.nextSibling)&&i<t.length;i+=2)if(l==o)break e;e.insertBefore(o,r),u=r}return void 0!==u?u:o.nextSibling}function x(e,n,_){"-"===n[0]?e.setProperty(n,_):e[n]=null==_?"":"number"!=typeof _||c.test(n)?_:_+"px"}function H(e,n,_,t,o){var r;e:if("style"===n)if("string"==typeof _)e.style.cssText=_;else{if("string"==typeof t&&(e.style.cssText=t=""),t)for(n in t)_&&n in _||x(e.style,n,"");if(_)for(n in _)t&&_[n]===t[n]||x(e.style,n,_[n])}else if("o"===n[0]&&"n"===n[1])r=n!==(n=n.replace(/Capture$/,"")),n=n.toLowerCase()in e?n.toLowerCase().slice(2):n.slice(2),e.l||(e.l={}),e.l[n+r]=_,_?t||e.addEventListener(n,r?S:E,r):e.removeEventListener(n,r?S:E,r);else if("dangerouslySetInnerHTML"!==n){if(o)n=n.replace(/xlink[H:h]/,"h").replace(/sName$/,"s");else if("href"!==n&&"list"!==n&&"form"!==n&&"tabIndex"!==n&&"download"!==n&&n in e)try{e[n]=null==_?"":_;break e}catch(e){}"function"==typeof _||(null!=_&&(!1!==_||"a"===n[0]&&"r"===n[1])?e.setAttribute(n,_):e.removeAttribute(n))}}function E(e){this.l[e.type+!1](n.event?n.event(e):e)}function S(e){this.l[e.type+!0](n.event?n.event(e):e)}function P(e,_,t,o,r,u,l,i,c){var f,a,p,v,y,m,g,b,C,x,H,E=_.type;if(void 0!==_.constructor)return null;null!=t.__h&&(c=t.__h,i=_.__e=t.__e,_.__h=null,u=[i]),(f=n.__b)&&f(_);try{e:if("function"==typeof E){if(b=_.props,C=(f=E.contextType)&&o[f.__c],x=f?C?C.props.value:f.__:o,t.__c?g=(a=_.__c=t.__c).__=a.__E:("prototype"in E&&E.prototype.render?_.__c=a=new E(b,x):(_.__c=a=new d(b,x),a.constructor=E,a.render=A),C&&C.sub(a),a.props=b,a.state||(a.state={}),a.context=x,a.__n=o,p=a.__d=!0,a.__h=[]),null==a.__s&&(a.__s=a.state),null!=E.getDerivedStateFromProps&&(a.__s==a.state&&(a.__s=s({},a.__s)),s(a.__s,E.getDerivedStateFromProps(b,a.__s))),v=a.props,y=a.state,p)null==E.getDerivedStateFromProps&&null!=a.componentWillMount&&a.componentWillMount(),null!=a.componentDidMount&&a.__h.push(a.componentDidMount);else{if(null==E.getDerivedStateFromProps&&b!==v&&null!=a.componentWillReceiveProps&&a.componentWillReceiveProps(b,x),!a.__e&&null!=a.shouldComponentUpdate&&!1===a.shouldCompLine truncated
examples/webui-login/web_root/style.css
-43
View File
@@ -1,43 +0,0 @@
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font: 16px sans-serif; }
select, input, label::before, textarea { outline: none; box-shadow:none !important; border: 1px solid #ccc !important; }
code, pre { color: #373; font-family: monospace; font-weight: bolder; font-size: smaller; background: #ddd; padding: 0.1em 0.3em; border-radius: 0.2em; }
textarea, input, .addon { font-size: 15px; border: 1px solid #ccc; padding: 0.5em; }
a, a:visited, a:active { color: #55f; }
.addon { background: #eee; min-width: 9em;}
.btn {
background: #ccc; border-radius: 0.3em; border: 0; color: #fff; cursor: pointer;
display: inline-block; padding: 0.6em 2em; font-weight: bolder;
}
.btn[disabled] { opacity: 0.5; cursor: auto;}
.smooth { transition: all .2s; }
.container { margin: 0 20px; width: auto; }
.d-flex { display: flex; }
.d-none { display: none; }
.border { border: 1px solid #ddd; }
.rounded { border-radius: 0.5em; }
.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, .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; }
.col { margin: 0; padding: 0; overflow: auto; }
.col-12 { width: 100%; }
.col-11 { width: 91.66%; }
.col-10 { width: 83.33%; }
.col-9 { width: 75%; }
.col-8 { width: 66.66%; }
.col-7 { width: 58.33%; }
.col-6 { width: 50%; }
.col-5 { width: 41.66%; }
.col-4 { width: 33.33%; }
.col-3 { width: 25%; }
.col-2 { width: 16.66%; }
.col-1 { width: 8.33%; }
@media (min-width: 1310px) { .container { margin: auto; width: 1270px; } }
@media (max-width: 920px) { .row .col { width: 100%; } }
examples/webui-login/web_root/user.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

examples/webui-plain/Makefile
-25
View File
@@ -1,25 +0,0 @@
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
examples/webui-plain/README.md
-1
View File
@@ -1 +0,0 @@
See detailed tutorial at https://mongoose.ws/tutorials/webui-plain/
examples/webui-plain/main.c
-65
View File
@@ -1,65 +0,0 @@
// Copyright (c) 2022 Cesanta Software Limited
// All rights reserved
//
// UI example
// It implements the following endpoints:
// /api/config/get - respond with current config
// /api/config/set - POST a config change
// any other URI serves static files from s_root_dir
// Data and 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";
#define MQTT_SERVER "mqtt://broker.hivemq.com:1883"
#define MQTT_PUBLISH_TOPIC "mg/my_device"
#define MQTT_SUBSCRIBE_TOPIC "mg/#"
static struct config {
char *url, *pub, *sub;
} s_config;
// Try to update a single configuration value
static void update_config(struct mg_str json, const char *path, char **value) {
char *jval;
if ((jval = mg_json_get_str(json, path)) != NULL) {
free(*value);
*value = strdup(jval);
}
}
static void fn(struct mg_connection *c, int ev, void *ev_data) {
if (ev == MG_EV_OPEN && c->is_listening) {
s_config.url = strdup(MQTT_SERVER);
s_config.pub = strdup(MQTT_PUBLISH_TOPIC);
s_config.sub = strdup(MQTT_SUBSCRIBE_TOPIC);
} else 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/config/get"), NULL)) {
mg_http_reply(c, 200, "Content-Type: application/json\r\n",
"{%m:%m,%m:%m,%m:%m}\n", MG_ESC("url"),
MG_ESC(s_config.url), MG_ESC("pub"), MG_ESC(s_config.pub),
MG_ESC("sub"), MG_ESC(s_config.sub));
} else if (mg_match(hm->uri, mg_str("/api/config/set"), NULL)) {
struct mg_str json = hm->body;
update_config(json, "$.url", &s_config.url);
update_config(json, "$.pub", &s_config.pub);
update_config(json, "$.sub", &s_config.sub);
mg_http_reply(c, 200, "", "ok\n");
} else {
struct mg_http_serve_opts opts = {.root_dir = s_root_dir};
mg_http_serve_dir(c, ev_data, &opts);
}
}
}
int main(void) {
struct mg_mgr mgr; // Event manager
mg_log_set(MG_LL_INFO); // 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;
}
examples/webui-plain/mongoose.c
-1
View File
@@ -1 +0,0 @@
../../mongoose.c
examples/webui-plain/mongoose.h
-1
View File
@@ -1 +0,0 @@
../../mongoose.h
examples/webui-plain/web_root/index.html
-86
View File
@@ -1,86 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Basic JavaScript UI demo</h1>
<div style="height: 0.3em;">&nbsp;</div>
<div class="col col-6">
<h3 style="background: #c03434; color: #fff; padding: 0.4em;">
Device Configuration</h3>
<div style="margin: 0.5em 0; display: flex;">
<span class="addon nowrap">MQTT server:</span>
<input id="url" type="text" style="flex: 1 100%;" value="" onchange="updateurl()" />
<button class="btn" id="btn_url" onclick="updateurl()"
style="margin-left: 1em; background: #8aa;">Update</button>
</div>
<div style="margin: 0.5em 0; display: flex; ">
<span class="addon nowrap">Subscribe topic:</span>
<input id="sub" type="text" style="flex: 1 100%;" value="" onchange="updatesub()" />
<button class="btn" id="btn_sub" onclick="updatesub()"
style="margin-left: 1em; background: #8aa;">Update</button>
</div>
<div style="margin: 0.5em 0; display: flex;">
<span class="addon nowrap">Publish topic:</span>
<input id="pub" type="text" style="flex: 1 100%;" value="" onchange="updatepub()" />
<button class="btn" id="btn_pub" onclick="updatepub()"
style="margin-left: 1em; background: #8aa;">Update</button>
</div>
<button id="btn_get" onclick="getconfig()">Get configuration</button>
</div>
<div style="height: 0.3em;">&nbsp;</div>
<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 inp_url = E('url'), inp_sub = E('sub'), inp_pub = E('pub'), msglog = E('log');;
var enable = function(en) { btn_url.disabled = btn_sub.disabled = btn_pub.disabled = !en; };
var log = text => msglog.innerHTML += text + '<br/>\n';
var showurl = function(val) { inp_url.value = val; };
var showsub = function(val) { inp_sub.value = val; };
var showpub = function(val) { inp_pub.value = val; };
const showconfig = function(r) {
showurl(r.url);
showsub(r.sub);
showpub(r.pub);
};
const getconfig = () =>
fetch('/api/config/get')
.then(r => r.json())
.then(r => {
showconfig(r);
log('GET /api/config/get: ' + JSON.stringify(r));
enable(true);
})
.catch(err => {
console.log(err);
enable(false);
});
const update = (name, val) => {
const myObj = { [name]: val };
log('POST ' + JSON.stringify(myObj) + ' to /api/config/set');
fetch('/api/config/set', {method: 'POST',
headers: {
'Content-Type': 'application/json'},
body:JSON.stringify(myObj)})
.catch(err => {
console.log(err);
enable(false);
});
};
const updateurl = ev => update('url', inp_url.value);
const updatesub = ev => update('sub', inp_sub.value);
const updatepub = ev => update('pub', inp_pub.value);
enable(false);
getconfig();
</script>
</html>
examples/webui-plain/web_root/style.css
-43
View File
@@ -1,43 +0,0 @@
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font: 16px sans-serif; }
select, input, label::before, textarea { outline: none; box-shadow:none !important; border: 1px solid #ccc !important; }
code, pre { color: #373; font-family: monospace; font-weight: bolder; font-size: smaller; background: #ddd; padding: 0.1em 0.3em; border-radius: 0.2em; }
textarea, input, .addon { font-size: 15px; border: 1px solid #ccc; padding: 0.5em; }
a, a:visited, a:active { color: #55f; }
.addon { background: #eee; min-width: 9em;}
.btn {
background: #ccc; border-radius: 0.3em; border: 0; color: #fff; cursor: pointer;
display: inline-block; padding: 0.6em 2em; font-weight: bolder;
}
.btn[disabled] { opacity: 0.5; cursor: auto;}
.smooth { transition: all .2s; }
.container { margin: 0 20px; width: auto; }
.d-flex { display: flex; }
.d-none { display: none; }
.border { border: 1px solid #ddd; }
.rounded { border-radius: 0.5em; }
.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, .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; }
.col { margin: 0; padding: 0; overflow: auto; }
.col-12 { width: 100%; }
.col-11 { width: 91.66%; }
.col-10 { width: 83.33%; }
.col-9 { width: 75%; }
.col-8 { width: 66.66%; }
.col-7 { width: 58.33%; }
.col-6 { width: 50%; }
.col-5 { width: 41.66%; }
.col-4 { width: 33.33%; }
.col-3 { width: 25%; }
.col-2 { width: 16.66%; }
.col-1 { width: 8.33%; }
@media (min-width: 1310px) { .container { margin: auto; width: 1270px; } }
@media (max-width: 920px) { .row .col { width: 100%; } }
examples/webui-preact/Makefile
-25
View File
@@ -1,25 +0,0 @@
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
examples/webui-preact/README.md
-1
View File
@@ -1 +0,0 @@
See detailed tutorial at https://mongoose.ws/tutorials/webui-preact/
examples/webui-preact/main.c
-1
View File
@@ -1 +0,0 @@
../webui-plain/main.c
examples/webui-preact/mongoose.c
-1
View File
@@ -1 +0,0 @@
../../mongoose.c
examples/webui-preact/mongoose.h
-1
View File
@@ -1 +0,0 @@
../../mongoose.h
examples/webui-preact/web_root/index.html
-8
View File
@@ -1,8 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body></body>
<script type="module" src="main.js"></script>
</html>
examples/webui-preact/web_root/main.js
-86
View File
@@ -1,86 +0,0 @@
'use strict';
import { h, html, render, useEffect, useState } from './preact.min.js';
const Configuration = function (props) {
const [url, setUrl] = useState(props.config.url || '');
const [pub, setPub] = useState(props.config.pub || '');
const [sub, setSub] = useState(props.config.sub || '');
useEffect(() => {
setUrl(props.config.url);
setPub(props.config.pub);
setSub(props.config.sub);
}, [props.config]);
const update = (name, val) =>
fetch('/api/config/set', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
[name]: val
})
})
.catch(err => {
console.log(err);
enable(false);
});
const updateurl = ev => update('url', url);
const updatepub = ev => update('pub', pub);
const updatesub = ev => update('sub', sub);
return html`
<h3 style="background: #c03434; color: #fff; padding: 0.4em;">
Device Configuration</h3>
<div style="margin: 0.5em 0; display: flex;">
<span class="addon nowrap">MQTT server:</span>
<input type="text" style="flex: 1 100%;"
value=${url} onchange=${updateurl}
oninput=${ev => setUrl(ev.target.value)} />
<button class="btn" disabled=${!url} onclick=${updateurl}
style="margin-left: 1em; background: #8aa;">Update</button>
</div>
<div style="margin: 0.5em 0; display: flex; ">
<span class="addon nowrap">Subscribe topic:</span>
<input type="text" style="flex: 1 100%;"
value=${sub} onchange=${updatesub}
oninput=${ev => setSub(ev.target.value)} />
<button class="btn" disabled=${!sub} onclick=${updatesub}
style="margin-left: 1em; background: #8aa;">Update</button>
</div>
<div style="margin: 0.5em 0; display: flex;">
<span class="addon nowrap">Publish topic:</span>
<input type="text" style="flex: 1 100%;"
value=${pub} onchange=${updatepub}
oninput=${ev => setPub(ev.target.value)} />
<button class="btn" disabled=${!pub} onclick=${updatepub}
style="margin-left: 1em; background: #8aa;">Update</button>
</div>`;
};
const App = function (props) {
const [config, setConfig] = useState({});
const getconfig = () =>
fetch('/api/config/get')
.then(r => r.json())
.then(r => setConfig(r))
.catch(err => console.log(err));
useEffect(() => {
getconfig();
}, []);
return html`
<h1>Basic Preact-based UI demo</h1>
<div class="col col-6">
${h(Configuration, { config })}
</div>
<button onclick=${getconfig}>Get configuration</button>`;
};
window.onload = () => render(h(App), document.body);
examples/webui-preact/web_root/preact.min.js
Vendored
-1
View File
@@ -1 +0,0 @@
var e,n,_,t,o,r,u,l={},i=[],c=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function s(e,n){for(var _ in n)e[_]=n[_];return e}function f(e){var n=e.parentNode;n&&n.removeChild(e)}function a(n,_,t){var o,r,u,l={};for(u in _)"key"==u?o=_[u]:"ref"==u?r=_[u]:l[u]=_[u];if(arguments.length>2&&(l.children=arguments.length>3?e.call(arguments,2):t),"function"==typeof n&&null!=n.defaultProps)for(u in n.defaultProps)void 0===l[u]&&(l[u]=n.defaultProps[u]);return p(n,l,o,r,null)}function p(e,t,o,r,u){var l={type:e,props:t,key:o,ref:r,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==u?++_:u};return null!=n.vnode&&n.vnode(l),l}function h(e){return e.children}function d(e,n){this.props=e,this.context=n}function v(e,n){if(null==n)return e.__?v(e.__,e.__.__k.indexOf(e)+1):null;for(var _;n<e.__k.length;n++)if(null!=(_=e.__k[n])&&null!=_.__e)return _.__e;return"function"==typeof e.type?v(e):null}function y(e){var n,_;if(null!=(e=e.__)&&null!=e.__c){for(e.__e=e.__c.base=null,n=0;n<e.__k.length;n++)if(null!=(_=e.__k[n])&&null!=_.__e){e.__e=e.__c.base=_.__e;break}return y(e)}}function m(e){(!e.__d&&(e.__d=!0)&&t.push(e)&&!g.__r++||r!==n.debounceRendering)&&((r=n.debounceRendering)||o)(g)}function g(){for(var e;g.__r=t.length;)e=t.sort(function(e,n){return e.__v.__b-n.__v.__b}),t=[],e.some(function(e){var n,_,t,o,r,u;e.__d&&(r=(o=(n=e).__v).__e,(u=n.__P)&&(_=[],(t=s({},o)).__v=o.__v+1,P(u,o,t,n.__n,void 0!==u.ownerSVGElement,null!=o.__h?[r]:null,_,null==r?v(o):r,o.__h),D(_,o),o.__e!=r&&y(o)))})}function k(e,n,_,t,o,r,u,c,s,f){var a,d,y,m,g,k,x,H=t&&t.__k||i,E=H.length;for(_.__k=[],a=0;a<n.length;a++)if(null!=(m=_.__k[a]=null==(m=n[a])||"boolean"==typeof m?null:"string"==typeof m||"number"==typeof m||"bigint"==typeof m?p(null,m,null,null,m):Array.isArray(m)?p(h,{children:m},null,null,null):m.__b>0?p(m.type,m.props,m.key,null,m.__v):m)){if(m.__=_,m.__b=_.__b+1,null===(y=H[a])||y&&m.key==y.key&&m.type===y.type)H[a]=void 0;else for(d=0;d<E;d++){if((y=H[d])&&m.key==y.key&&m.type===y.type){H[d]=void 0;break}y=null}P(e,m,y=y||l,o,r,u,c,s,f),g=m.__e,(d=m.ref)&&y.ref!=d&&(x||(x=[]),y.ref&&x.push(y.ref,null,m),x.push(d,m.__c||g,m)),null!=g?(null==k&&(k=g),"function"==typeof m.type&&null!=m.__k&&m.__k===y.__k?m.__d=s=b(m,s,e):s=C(e,m,y,H,g,s),f||"option"!==_.type?"function"==typeof _.type&&(_.__d=s):e.value=""):s&&y.__e==s&&s.parentNode!=e&&(s=v(y))}for(_.__e=k,a=E;a--;)null!=H[a]&&("function"==typeof _.type&&null!=H[a].__e&&H[a].__e==_.__d&&(_.__d=v(t,a+1)),U(H[a],H[a]));if(x)for(a=0;a<x.length;a++)T(x[a],x[++a],x[++a])}function b(e,n,_){var t,o;for(t=0;t<e.__k.length;t++)(o=e.__k[t])&&(o.__=e,n="function"==typeof o.type?b(o,n,_):C(_,o,o,e.__k,o.__e,n));return n}function C(e,n,_,t,o,r){var u,l,i;if(void 0!==n.__d)u=n.__d,n.__d=void 0;else if(null==_||o!=r||null==o.parentNode)e:if(null==r||r.parentNode!==e)e.appendChild(o),u=null;else{for(l=r,i=0;(l=l.nextSibling)&&i<t.length;i+=2)if(l==o)break e;e.insertBefore(o,r),u=r}return void 0!==u?u:o.nextSibling}function x(e,n,_){"-"===n[0]?e.setProperty(n,_):e[n]=null==_?"":"number"!=typeof _||c.test(n)?_:_+"px"}function H(e,n,_,t,o){var r;e:if("style"===n)if("string"==typeof _)e.style.cssText=_;else{if("string"==typeof t&&(e.style.cssText=t=""),t)for(n in t)_&&n in _||x(e.style,n,"");if(_)for(n in _)t&&_[n]===t[n]||x(e.style,n,_[n])}else if("o"===n[0]&&"n"===n[1])r=n!==(n=n.replace(/Capture$/,"")),n=n.toLowerCase()in e?n.toLowerCase().slice(2):n.slice(2),e.l||(e.l={}),e.l[n+r]=_,_?t||e.addEventListener(n,r?S:E,r):e.removeEventListener(n,r?S:E,r);else if("dangerouslySetInnerHTML"!==n){if(o)n=n.replace(/xlink[H:h]/,"h").replace(/sName$/,"s");else if("href"!==n&&"list"!==n&&"form"!==n&&"tabIndex"!==n&&"download"!==n&&n in e)try{e[n]=null==_?"":_;break e}catch(e){}"function"==typeof _||(null!=_&&(!1!==_||"a"===n[0]&&"r"===n[1])?e.setAttribute(n,_):e.removeAttribute(n))}}function E(e){this.l[e.type+!1](n.event?n.event(e):e)}function S(e){this.l[e.type+!0](n.event?n.event(e):e)}function P(e,_,t,o,r,u,l,i,c){var f,a,p,v,y,m,g,b,C,x,H,E=_.type;if(void 0!==_.constructor)return null;null!=t.__h&&(c=t.__h,i=_.__e=t.__e,_.__h=null,u=[i]),(f=n.__b)&&f(_);try{e:if("function"==typeof E){if(b=_.props,C=(f=E.contextType)&&o[f.__c],x=f?C?C.props.value:f.__:o,t.__c?g=(a=_.__c=t.__c).__=a.__E:("prototype"in E&&E.prototype.render?_.__c=a=new E(b,x):(_.__c=a=new d(b,x),a.constructor=E,a.render=A),C&&C.sub(a),a.props=b,a.state||(a.state={}),a.context=x,a.__n=o,p=a.__d=!0,a.__h=[]),null==a.__s&&(a.__s=a.state),null!=E.getDerivedStateFromProps&&(a.__s==a.state&&(a.__s=s({},a.__s)),s(a.__s,E.getDerivedStateFromProps(b,a.__s))),v=a.props,y=a.state,p)null==E.getDerivedStateFromProps&&null!=a.componentWillMount&&a.componentWillMount(),null!=a.componentDidMount&&a.__h.push(a.componentDidMount);else{if(null==E.getDerivedStateFromProps&&b!==v&&null!=a.componentWillReceiveProps&&a.componentWillReceiveProps(b,x),!a.__e&&null!=a.shouldComponentUpdate&&!1===a.shouldCompLine truncated
examples/webui-preact/web_root/style.css
-43
View File
@@ -1,43 +0,0 @@
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font: 16px sans-serif; }
select, input, label::before, textarea { outline: none; box-shadow:none !important; border: 1px solid #ccc !important; }
code, pre { color: #373; font-family: monospace; font-weight: bolder; font-size: smaller; background: #ddd; padding: 0.1em 0.3em; border-radius: 0.2em; }
textarea, input, .addon { font-size: 15px; border: 1px solid #ccc; padding: 0.5em; }
a, a:visited, a:active { color: #55f; }
.addon { background: #eee; min-width: 9em;}
.btn {
background: #ccc; border-radius: 0.3em; border: 0; color: #fff; cursor: pointer;
display: inline-block; padding: 0.6em 2em; font-weight: bolder;
}
.btn[disabled] { opacity: 0.5; cursor: auto;}
.smooth { transition: all .2s; }
.container { margin: 0 20px; width: auto; }
.d-flex { display: flex; }
.d-none { display: none; }
.border { border: 1px solid #ddd; }
.rounded { border-radius: 0.5em; }
.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, .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; }
.col { margin: 0; padding: 0; overflow: auto; }
.col-12 { width: 100%; }
.col-11 { width: 91.66%; }
.col-10 { width: 83.33%; }
.col-9 { width: 75%; }
.col-8 { width: 66.66%; }
.col-7 { width: 58.33%; }
.col-6 { width: 50%; }
.col-5 { width: 41.66%; }
.col-4 { width: 33.33%; }
.col-3 { width: 25%; }
.col-2 { width: 16.66%; }
.col-1 { width: 8.33%; }
@media (min-width: 1310px) { .container { margin: auto; width: 1270px; } }
@media (max-width: 920px) { .row .col { width: 100%; } }
examples/webui-push-rest/Makefile
-25
View File
@@ -1,25 +0,0 @@
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
examples/webui-push-rest/README.md
-1
View File
@@ -1 +0,0 @@
See detailed tutorial at https://mongoose.ws/tutorials/webui-push/
examples/webui-push-rest/main.c
-80
View File
@@ -1,80 +0,0 @@
// Copyright (c) 2022 Cesanta Software Limited
// All rights reserved
//
// This example demonstrates how to push data over a REST API
// We're going to send a JSON array of some integer values, s_data.
// Periodically, s_data changes, which is tracked by s_version.
// Clients inform their current version, we only send on version mismatch,
// or when version is zero (client has no data); this minimizes traffic and
// avoids updating the UI unnecesarily.
//
// 1. Start this server, type `make`
// 2. Open http://localhost:8000 in your browser
#include "mongoose.h"
static const char *s_listen_on = "http://localhost:8000";
static const char *s_root_dir = "web_root";
#define DATA_SIZE 10 // Total number of elements
static int s_data[DATA_SIZE]; // Simulate some complex data
static long s_version = 0; // Data "version"
static long getparam(struct mg_http_message *hm, const char *json_path) {
double dv = 0;
mg_json_get_num(hm->body, json_path, &dv);
return dv;
}
static size_t printdata(mg_pfn_t out, void *ptr, va_list *ap) {
const char *comma = "";
size_t n = 0;
for (int i = 0; i < DATA_SIZE; ++i) {
n += mg_xprintf(out, ptr, "%s%d", comma, s_data[i]);
comma = ",";
}
return n;
(void) ap;
}
static void fn(struct mg_connection *c, int ev, void *ev_data) {
if (ev == MG_EV_HTTP_MSG) {
struct mg_http_message *hm = ev_data;
if (mg_match(hm->uri, mg_str("/api/data"), NULL)) {
long version = getparam(hm, "$.version");
if (version > 0 && version == s_version) {
// Version match: no changes
mg_http_reply(c, 200, "Content-Type: application/json\r\n",
"{%m:%m,%m:%ld}\n", MG_ESC("status"), MG_ESC("no change"),
MG_ESC("version"), version);
} else {
// Version mismatch, return data
mg_http_reply(c, 200, "Content-Type: application/json\r\n",
"{%m:%ld,%m:[%M]}\n", MG_ESC("version"), s_version,
MG_ESC("data"), printdata);
}
} else {
struct mg_http_serve_opts opts = {.root_dir = s_root_dir};
mg_http_serve_dir(c, hm, &opts);
}
}
}
static void timer_fn(void *arg) {
for (int i = 0; i < DATA_SIZE; i++) {
s_data[i] = rand();
}
s_version++;
(void) arg;
}
int main(void) {
struct mg_mgr mgr;
mg_mgr_init(&mgr);
srand(time(NULL));
mg_timer_add(&mgr, 5000, MG_TIMER_REPEAT | MG_TIMER_RUN_NOW, timer_fn, NULL);
mg_http_listen(&mgr, s_listen_on, fn, NULL);
for (;;) mg_mgr_poll(&mgr, 1000);
mg_mgr_free(&mgr);
return 0;
}
examples/webui-push-rest/mongoose.c
-1
View File
@@ -1 +0,0 @@
../../mongoose.c
examples/webui-push-rest/mongoose.h
-1
View File
@@ -1 +0,0 @@
../../mongoose.h
examples/webui-push-rest/web_root/index.html
-39
View File
@@ -1,39 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Data push using REST demo</h1>
<div id="UI" style="background: #fff; border:1px solid black; height: 10em; padding: 0.5em; overflow:auto;"></div>
<div style="margin-top: 1em;">Event log:</div>
<div id="log" style="background: #eee; height: 10em; padding: 0.5em; overflow:auto;"></div>
</body>
<script>
var ui = document.getElementById('UI');
var log = document.getElementById('log');
var version = 0;
const refreshUI = d => ui.innerHTML = JSON.stringify(d, null, 2)
const watch = function() {
var tid;
fetch('/api/data', {method: 'POST', body:JSON.stringify({version})})
.then(r => r.json())
.then(r => {
if (r.status) {
log.innerHTML += 'Status: ' + r.status + '<br/>';
} else {
version = r.version;
log.innerHTML += 'Version: ' + version + '<br/>';
refreshUI(r.data);
}
})
.catch(err => console.log(err));
clearTimeout(tid);
tid = setTimeout(watch, 1000);
};
watch();
</script>
</html>
examples/webui-push-ws/Makefile
-25
View File
@@ -1,25 +0,0 @@
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
examples/webui-push-ws/README.md
-1
View File
@@ -1 +0,0 @@
See detailed tutorial at https://mongoose.ws/tutorials/webui-push/
examples/webui-push-ws/main.c
-53
View File
@@ -1,53 +0,0 @@
// Copyright (c) 2020 Cesanta Software Limited
// All rights reserved
//
// Example Websocket server with timers. This is a simple Websocket echo
// server, which sends a message to all connected clients periodically,
// using timer API.
#include "mongoose.h"
static const char *s_listen_on = "http://localhost:8000";
static const char *s_web_root = "web_root";
static void fn(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/watch"), NULL)) {
mg_ws_upgrade(c, hm, NULL); // Upgrade HTTP to Websocket
c->data[0] = 'W'; // Set some unique mark on the connection
} else {
struct mg_http_serve_opts opts = {.root_dir = s_web_root};
mg_http_serve_dir(c, ev_data, &opts);
}
}
}
// Push to all watchers
static void push(struct mg_mgr *mgr, const char *name, const void *data) {
struct mg_connection *c;
for (c = mgr->conns; c != NULL; c = c->next) {
if (c->data[0] != 'W') continue;
mg_ws_printf(c, WEBSOCKET_OP_TEXT, "{%m:%m,%m:%m}", MG_ESC("name"),
MG_ESC(name), MG_ESC("data"), MG_ESC(data));
}
}
static void timer_fn(void *arg) {
struct mg_mgr *mgr = (struct mg_mgr *) arg;
char buf[50];
mg_snprintf(buf, sizeof(buf), "[%lu, %d]", (unsigned long) time(NULL),
10 + (int) ((double) rand() * 10 / RAND_MAX));
push(mgr, "metrics", buf);
}
int main(void) {
struct mg_mgr mgr; // Event manager
mg_mgr_init(&mgr); // Initialise event manager
mg_log_set(MG_LL_DEBUG); // Set log level
mg_timer_add(&mgr, 2000, MG_TIMER_REPEAT, timer_fn, &mgr);
mg_http_listen(&mgr, s_listen_on, fn, NULL); // Create HTTP listener
for (;;) mg_mgr_poll(&mgr, 500); // Infinite event loop
mg_mgr_free(&mgr); // Free manager resources
return 0;
}
examples/webui-push-ws/mongoose.c
-1
View File
@@ -1 +0,0 @@
../../mongoose.c
examples/webui-push-ws/mongoose.h
-1
View File
@@ -1 +0,0 @@
../../mongoose.h
examples/webui-push-ws/web_root/index.html
-39
View File
@@ -1,39 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Data push over WebSocket demo</h1>
<div style="margin-top: 1em;">Event log:</div>
<div id="log" style="background: #eee; height: 10em; padding: 0.5em; overflow:auto;"></div>
</body>
<script>
var log = document.getElementById('log');
const watch = function() {
var l = window.location, proto = l.protocol.replace('http', 'ws');
var tid, wsURI = proto + '//' + l.host + '/api/watch'
var reconnect = function() {
var ws = new WebSocket(wsURI);
ws.onopen = function() { log.innerHTML += 'CONNECTED<br/>'; }
ws.onmessage = function(ev) {
console.log(ev.data);
try {
var msg = JSON.parse(ev.data);
log.innerHTML += 'RECEIVED: ' + JSON.stringify(msg) + '<br/>';
} catch (e) {
console.log('Invalid ws frame:', ev.data);
}
};
ws.onclose = function() {
clearTimeout(tid);
tid = setTimeout(reconnect, 1000);
log.innerHTML += 'DISCONNECTED<br/>';
};
ws.onerror = err => console.log(err);
};
reconnect();
};
watch();
</script>
</html>
examples/webui-rest/Makefile
-25
View File
@@ -1,25 +0,0 @@
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
examples/webui-rest/README.md
-1
View File
@@ -1 +0,0 @@
See detailed tutorial at https://mongoose.ws/tutorials/webui-rest/
examples/webui-rest/main.c
-47
View File
@@ -1,47 +0,0 @@
// 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) {
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/f1"), NULL)) {
mg_http_reply(c, 200, "Content-Type: application/json\r\n", "{%m:%d}\n",
MG_ESC("result"), 123);
} else if (mg_match(hm->uri, mg_str("/api/sum"), NULL)) {
// 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", "{%m:%g}\n",
MG_ESC("result"), num1 + num2);
}
} else {
struct mg_http_serve_opts opts = {.root_dir = s_root_dir};
mg_http_serve_dir(c, hm, &opts);
}
}
}
int main(void) {
struct mg_mgr mgr; // Event manager
mg_log_set(MG_LL_DEBUG); // Set log level
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;
}
examples/webui-rest/mongoose.c
-1
View File
@@ -1 +0,0 @@
../../mongoose.c
examples/webui-rest/mongoose.h
-1
View File
@@ -1 +0,0 @@
../../mongoose.h
examples/webui-rest/web_root/index.html
-38
View File
@@ -1,38 +0,0 @@
<!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>