begin static file caching
This commit is contained in:
parent
a0418788c5
commit
73fc38b7ad
100
priv/static/chat.html
Normal file
100
priv/static/chat.html
Normal file
@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Chat with Websockets</title>
|
||||
<link rel="stylesheet" href="./default.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 class="content-title">Chat with websockets</h1>
|
||||
|
||||
<div class="content-body">
|
||||
<input autofocus label="Nick" id="nick"></input>
|
||||
<textarea hidden disabled id="wfc-output"></textarea>
|
||||
<input hidden id="wfc-input"></input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let nelt = document.getElementById('nick');
|
||||
let ielt = document.getElementById('wfc-input');
|
||||
let oelt = document.getElementById('wfc-output');
|
||||
let ws = new WebSocket("/ws/chat");
|
||||
let nick = '';
|
||||
|
||||
// when user hits any key while typing in nick
|
||||
function on_nick(evt) {
|
||||
if (evt.key === 'Enter') {
|
||||
// don't do default thing
|
||||
evt.preventDefault();
|
||||
// grab contents
|
||||
let contents = nelt.value;
|
||||
let trimmed = contents.trim();
|
||||
// if contents are nonempty
|
||||
let nonempty_contents = trimmed.length > 0;
|
||||
if (nonempty_contents) {
|
||||
nick = trimmed;
|
||||
let msg_obj = ['nick', nick];
|
||||
let msg_str = JSON.stringify(msg_obj);
|
||||
console.log('message to server:', contents.trim());
|
||||
// query backend for result
|
||||
ws.send(msg_str);
|
||||
|
||||
// delete element from dom
|
||||
nelt.remove();
|
||||
oelt.hidden = false;
|
||||
ielt.hidden = false;
|
||||
ielt.autofocus = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// when user hits any key while typing in ielt
|
||||
function on_input_key(evt) {
|
||||
if (evt.key === 'Enter') {
|
||||
// don't do default thing
|
||||
evt.preventDefault();
|
||||
// grab contents
|
||||
let contents = ielt.value;
|
||||
let trimmed = contents.trim();
|
||||
// if contents are nonempty
|
||||
let nonempty_contents = trimmed.length > 0;
|
||||
if (nonempty_contents) {
|
||||
let msg_obj = ['chat', trimmed];
|
||||
let msg_str = JSON.stringify(msg_obj);
|
||||
console.log('message to server:', contents.trim());
|
||||
// query backend for result
|
||||
ws.send(msg_str);
|
||||
|
||||
// clear input
|
||||
ielt.value = '';
|
||||
|
||||
// add to output
|
||||
oelt.value += '> ';
|
||||
oelt.value += trimmed;
|
||||
oelt.value += '\n';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function main() {
|
||||
nelt.addEventListener('keydown', on_nick);
|
||||
ielt.addEventListener('keydown', on_input_key);
|
||||
ws.onmessage =
|
||||
function (msg_evt) {
|
||||
console.log('message from server:', msg_evt);
|
||||
let msg_str = msg_evt.data;
|
||||
let msg_obj = JSON.parse(msg_str);
|
||||
|
||||
oelt.value += msg_obj.nick;
|
||||
oelt.value += '> ';
|
||||
oelt.value += msg_obj.msg;
|
||||
oelt.value += '\n';
|
||||
};
|
||||
}
|
||||
|
||||
main();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
95
priv/static/default.css
Normal file
95
priv/static/default.css
Normal file
@ -0,0 +1,95 @@
|
||||
/* color pallette */
|
||||
* {
|
||||
--white: #f7f8fb;
|
||||
--lgray0: #f5fbfd;
|
||||
--lgray1: #daddd6;
|
||||
--lgray2: #d3d8d5;
|
||||
--mgray1: #687864;
|
||||
--dgreen1: #21341e;
|
||||
--lgreen1: #e5eef2;
|
||||
--black: #003d27;
|
||||
|
||||
--sans: Helvetica, Liberation Sans, FreeSans, Roboto, sans-serif;
|
||||
--mono: Liberation Mono, FreeMono, Roboto Mono, monospace;
|
||||
--fsdef: 12pt;
|
||||
}
|
||||
|
||||
/* body */
|
||||
body {
|
||||
background: var(--white);
|
||||
color: var(--dgray1);
|
||||
font-size: var(--fsdef);
|
||||
font-family: var(--sans);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
/*
|
||||
background: #ff0;
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
/* add some top padding to content */
|
||||
|
||||
.content-title {
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
/*
|
||||
background: #f00;
|
||||
*/
|
||||
|
||||
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* element-specific styling */
|
||||
|
||||
a {
|
||||
color: var(--mgray1);
|
||||
}
|
||||
|
||||
|
||||
#wfc-input {
|
||||
font-family: var(--mono);
|
||||
font-size: var(--fsdef);
|
||||
background: var(--lgreen1);
|
||||
|
||||
width: 100%;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--lgray1);
|
||||
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#wfc-output {
|
||||
background: var(--lgray0);
|
||||
font-family: var(--mono);
|
||||
font-size: var(--fsdef);
|
||||
|
||||
width: 100%;
|
||||
resize: vertical;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--lgray1);
|
||||
|
||||
padding: 5px;
|
||||
}
|
||||
138
priv/static/index.html
Normal file
138
priv/static/index.html
Normal file
@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WF Compiler Demo</title>
|
||||
<link rel="stylesheet" href="./default.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 class="content-title">WFC Demo</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="/chat.html">Websocket Chatroom</a></li>
|
||||
<li><a href="/ws-test-echo.html">Websocket Echo Test</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="content-body">
|
||||
<textarea disabled id="wfc-output"></textarea>
|
||||
<input autofocus id="wfc-input"></input>
|
||||
|
||||
<h2>Settings</h2>
|
||||
<input type="checkbox" checked id="auto-resize-output">Auto-resize output</input> <br>
|
||||
<input type="checkbox" checked id="auto-scroll" >Auto-scroll output to bottom</input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let ielt = document.getElementById('wfc-input');
|
||||
let oelt = document.getElementById('wfc-output');
|
||||
let MAX_OELT_HEIGHT = 300;
|
||||
|
||||
function auto_resize_output() {
|
||||
// if the user has manually resized their output, we do nothing
|
||||
if (document.getElementById('auto-resize-output').checked) {
|
||||
// resize it automagically up to 500px
|
||||
if (oelt.scrollHeight < MAX_OELT_HEIGHT) {
|
||||
oelt.style.height = String(oelt.scrollHeight) + 'px';
|
||||
}
|
||||
else {
|
||||
oelt.style.height = String(MAX_OELT_HEIGHT) + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function auto_scroll_to_bottom() {
|
||||
if (document.getElementById('auto-scroll').checked) {
|
||||
// scroll to bottom
|
||||
oelt.scrollTop = oelt.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
async function on_server_return(response) {
|
||||
console.log('on_server_return:', response);
|
||||
if (response.ok) {
|
||||
let jsbs = await response.json();
|
||||
console.log('jsbs', jsbs);
|
||||
// jsbs: {ok: true, result: string} | {ok: false, error: string}
|
||||
if (jsbs.ok) {
|
||||
// this means got a result back from server
|
||||
// put it in
|
||||
oelt.value += jsbs.result;
|
||||
oelt.value += '\n';
|
||||
}
|
||||
else {
|
||||
// this is an error at the WFC level
|
||||
oelt.value += jsbs.error;
|
||||
oelt.value += '\n';
|
||||
}
|
||||
}
|
||||
// this means we sent an invalid request
|
||||
else {
|
||||
oelt.value += 'HTTP ERROR, SEE BROWSER CONSOLE\n'
|
||||
}
|
||||
}
|
||||
|
||||
function on_some_bullshit(x) {
|
||||
console.log('on_some_bullshit:', x);
|
||||
oelt.value += 'NETWORK ERROR, SEE BROWSER CONSOLE\n'
|
||||
}
|
||||
|
||||
function fetch_wfcin(user_line) {
|
||||
let req_body_obj = {wfcin: user_line};
|
||||
// let req_body_str = JSON.stringify(req_body_obj, undefined, 4);
|
||||
let req_body_str = JSON.stringify(req_body_obj);
|
||||
|
||||
let req_options = {method: 'POST',
|
||||
headers: {'content-type': 'application/json'},
|
||||
body: req_body_str};
|
||||
|
||||
let response_promise = fetch('/wfcin', req_options);
|
||||
|
||||
response_promise.then(on_server_return, on_some_bullshit);
|
||||
|
||||
// this is a promise for a response
|
||||
//console.log(response_promise);
|
||||
}
|
||||
|
||||
// when user hits any key
|
||||
function on_input_key(evt) {
|
||||
if (evt.key === 'Enter') {
|
||||
// don't do default thing
|
||||
evt.preventDefault();
|
||||
// grab contents
|
||||
let contents = ielt.value;
|
||||
// if contents are nonempty
|
||||
let nonempty_contents = contents.trim().length > 0;
|
||||
if (nonempty_contents) {
|
||||
// put in output
|
||||
// // if it's nonempty add a newline
|
||||
// if (oelt.value.length > 0) {
|
||||
// oelt.value += '\n';
|
||||
// }
|
||||
oelt.value += '> ' + contents + '\n';
|
||||
oelt.hidden = false;
|
||||
|
||||
// query backend for result
|
||||
fetch_wfcin(contents.trim());
|
||||
|
||||
// clear input
|
||||
ielt.value = '';
|
||||
|
||||
// auto-resize
|
||||
auto_resize_output();
|
||||
auto_scroll_to_bottom();
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function main() {
|
||||
ielt.addEventListener('keydown', on_input_key);
|
||||
}
|
||||
|
||||
main();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
56
priv/static/scratch.txt
Normal file
56
priv/static/scratch.txt
Normal file
@ -0,0 +1,56 @@
|
||||
/* header */
|
||||
div#header {
|
||||
background: var(--lgray2);
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img#header-logo {
|
||||
height: 40px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
.main {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.content-diagram {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
/* Pandoc makes some wacky choices with how it lays out code blocks
|
||||
*
|
||||
* this means all <code> blocks that do not have a <pre> block as an ancestor
|
||||
*
|
||||
* ie the `inline code`
|
||||
*/
|
||||
code:not(pre *) {
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--lgray1);
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
background: var(--lgreen1);
|
||||
}
|
||||
|
||||
/* this is specifically for ```fenced blocks``` */
|
||||
pre {
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--lgray1);
|
||||
padding: 5px;
|
||||
background: var(--lgreen1);
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
/* All `unfenced` or ```fenced``` blocks */
|
||||
code {
|
||||
font-family: Liberation Mono, Roboto Mono, monospace;
|
||||
color: var(--dgreen1);
|
||||
}
|
||||
65
priv/static/ws-test-echo.html
Normal file
65
priv/static/ws-test-echo.html
Normal file
@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Websockets echo test</title>
|
||||
<link rel="stylesheet" href="./default.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 class="content-title">Websockets echo test</h1>
|
||||
|
||||
<div class="content-body">
|
||||
<textarea id="wfc-output"
|
||||
disabled></textarea>
|
||||
<input autofocus id="wfc-input"></input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let ielt = document.getElementById('wfc-input');
|
||||
let oelt = document.getElementById('wfc-output');
|
||||
let ws = new WebSocket("/ws/echo");
|
||||
|
||||
// when user hits any key while typing in ielt
|
||||
function on_input_key(evt) {
|
||||
if (evt.key === 'Enter') {
|
||||
// don't do default thing
|
||||
evt.preventDefault();
|
||||
// grab contents
|
||||
let contents = ielt.value;
|
||||
let trimmed = contents.trim();
|
||||
// if contents are nonempty
|
||||
let nonempty_contents = trimmed.length > 0;
|
||||
if (nonempty_contents) {
|
||||
console.log('message to server:', contents.trim());
|
||||
// query backend for result
|
||||
ws.send(contents.trim());
|
||||
|
||||
// clear input
|
||||
ielt.value = '';
|
||||
|
||||
// add to output
|
||||
oelt.value += '> ';
|
||||
oelt.value += trimmed;
|
||||
oelt.value += '\n';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function main() {
|
||||
ielt.addEventListener('keydown', on_input_key);
|
||||
ws.onmessage =
|
||||
function (msg_evt) {
|
||||
console.log('message from server:', msg_evt);
|
||||
let msg_str = msg_evt.data;
|
||||
oelt.value += '< ';
|
||||
oelt.value += msg_str;
|
||||
oelt.value += '\n';
|
||||
};
|
||||
}
|
||||
|
||||
main();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
120
src/fd_static_cache.erl
Normal file
120
src/fd_static_cache.erl
Normal file
@ -0,0 +1,120 @@
|
||||
% @doc static file cache
|
||||
-module(fd_static_cache).
|
||||
|
||||
-behavior(gen_server).
|
||||
|
||||
-export([
|
||||
start_link/0,
|
||||
query/1, set/2, unset/1,
|
||||
%%---
|
||||
%% everything below here runs in process context
|
||||
%%--
|
||||
%% gen_server callbacks
|
||||
init/1, handle_call/3, handle_cast/2, handle_info/2,
|
||||
code_change/3, terminate/2
|
||||
]).
|
||||
|
||||
-include("$zx_include/zx_logger.hrl").
|
||||
|
||||
-type context() :: wfc_eval_context:context().
|
||||
|
||||
-record(s,
|
||||
{cookies = #{} :: #{Cookie :: binary() := context()}}).
|
||||
% -type state() :: #s{}.
|
||||
|
||||
|
||||
%%--------------------------------
|
||||
%% api (runs in context of caller)
|
||||
%%--------------------------------
|
||||
|
||||
-spec start_link() -> {ok, pid()} | {error, term()}.
|
||||
start_link() ->
|
||||
gen_server:start_link({local, ?MODULE}, ?MODULE, none, []).
|
||||
|
||||
|
||||
|
||||
-spec query(Cookie) -> {ok, Context} | error
|
||||
when Cookie :: binary(),
|
||||
Context :: context().
|
||||
|
||||
query(Cookie) ->
|
||||
gen_server:call(?MODULE, {query, Cookie}).
|
||||
|
||||
|
||||
|
||||
-spec set(Cookie, Context) -> ok
|
||||
when Cookie :: binary(),
|
||||
Context :: context().
|
||||
|
||||
set(Cookie, Context) ->
|
||||
gen_server:cast(?MODULE, {set, Cookie, Context}).
|
||||
|
||||
|
||||
-spec unset(Cookie) -> ok
|
||||
when Cookie :: binary().
|
||||
|
||||
unset(Cookie) ->
|
||||
gen_server:cast(?MODULE, {unset, Cookie}).
|
||||
|
||||
|
||||
%%----------------------
|
||||
%% gen-server bs
|
||||
%%----------------------
|
||||
|
||||
|
||||
|
||||
init(none) ->
|
||||
log(info, "starting fd_cache"),
|
||||
InitState = #s{},
|
||||
{ok, InitState}.
|
||||
|
||||
|
||||
handle_call({query, Cookie}, _, State) ->
|
||||
Result = do_query(Cookie, State),
|
||||
{reply, Result, State};
|
||||
handle_call(Unexpected, From, State) ->
|
||||
tell("~tp: unexpected call from ~tp: ~tp", [?MODULE, Unexpected, From]),
|
||||
{noreply, State}.
|
||||
|
||||
|
||||
handle_cast({set, Cookie, Context}, State) ->
|
||||
NewState = do_set(Cookie, Context, State),
|
||||
{noreply, NewState};
|
||||
handle_cast({unset, Cookie}, State) ->
|
||||
NewState = do_unset(Cookie, State),
|
||||
{noreply, NewState};
|
||||
handle_cast(Unexpected, State) ->
|
||||
tell("~tp: unexpected cast: ~tp", [?MODULE, Unexpected]),
|
||||
{noreply, State}.
|
||||
|
||||
|
||||
handle_info(Unexpected, State) ->
|
||||
tell("~tp: unexpected info: ~tp", [?MODULE, Unexpected]),
|
||||
{noreply, State}.
|
||||
|
||||
|
||||
code_change(_, State, _) ->
|
||||
{ok, State}.
|
||||
|
||||
terminate(_, _) ->
|
||||
ok.
|
||||
|
||||
|
||||
%%---------------------
|
||||
%% doers
|
||||
%%---------------------
|
||||
|
||||
do_set(Cookie, Context, State = #s{cookies = Cookies}) ->
|
||||
NewCookies = maps:put(Cookie, Context, Cookies),
|
||||
NewState = State#s{cookies = NewCookies},
|
||||
NewState.
|
||||
|
||||
|
||||
do_unset(Cookie, State = #s{cookies = Cookies}) ->
|
||||
NewCookies = maps:remove(Cookie, Cookies),
|
||||
NewState = State#s{cookies = NewCookies},
|
||||
NewState.
|
||||
|
||||
|
||||
do_query(Cookie, _State = #s{cookies = Cookies}) ->
|
||||
maps:find(Cookie, Cookies).
|
||||
Loading…
x
Reference in New Issue
Block a user