From 07a84c7052f914d32ce2bd9e47cdbb381ce705a6 Mon Sep 17 00:00:00 2001 From: David Botton Date: Wed, 20 Jan 2021 17:16:36 -0500 Subject: [PATCH] Tutorial 13 --- README.md | 1 + tutorial/13-tutorial/README.md | 13 ++ .../13-tutorial/hello-clog/hello-clog.asd | 12 ++ .../13-tutorial/hello-clog/hello-clog.lisp | 15 +++ tutorial/13-tutorial/hello-clog/www/boot.html | 15 +++ .../13-tutorial/hello-clog/www/js/boot.js | 114 ++++++++++++++++++ tutorial/README.md | 1 + 7 files changed, 171 insertions(+) create mode 100644 tutorial/13-tutorial/README.md create mode 100644 tutorial/13-tutorial/hello-clog/hello-clog.asd create mode 100644 tutorial/13-tutorial/hello-clog/hello-clog.lisp create mode 100644 tutorial/13-tutorial/hello-clog/www/boot.html create mode 100644 tutorial/13-tutorial/hello-clog/www/js/boot.js diff --git a/README.md b/README.md index 7b5d7eb..6c889f4 100644 --- a/README.md +++ b/README.md @@ -137,6 +137,7 @@ Tutorial Summary - 10-tutorial.lisp - Canvas - 11-tutorial.lisp - Attaching to existing HTML - 12-tutorial.lisp - Running a website in CLOG (routing) +- 13-tutorial/ - Flying Solo - A minimalist CLOG project Demo Summary diff --git a/tutorial/13-tutorial/README.md b/tutorial/13-tutorial/README.md new file mode 100644 index 0000000..d11ce60 --- /dev/null +++ b/tutorial/13-tutorial/README.md @@ -0,0 +1,13 @@ +Tutorial 13 is a minimalist project for CLOG + +Move the hello-clog directory to ~/common-lisp or another directory +setup for QuickLisp to search. Then excute: + +CL-USER> (ql:quickload :hello-clog) +To load "hello-clog": + Load 1 ASDF system: + hello-clog +; Loading "hello-clog" +[package hello-clog] +(:HELLO-CLOG) +CL-USER> (hello-clog:start-app) diff --git a/tutorial/13-tutorial/hello-clog/hello-clog.asd b/tutorial/13-tutorial/hello-clog/hello-clog.asd new file mode 100644 index 0000000..f8eb0df --- /dev/null +++ b/tutorial/13-tutorial/hello-clog/hello-clog.asd @@ -0,0 +1,12 @@ +;;;; hello-clog + +(asdf:defsystem #:hello-clog + :description "Hello Clog - Flying Solo" + + :author "someone@someplace.com" + :license "BSD" + :version "0.0.0" + :serial t + :depends-on (#:clog) + :components ((:file "hello-clog"))) + diff --git a/tutorial/13-tutorial/hello-clog/hello-clog.lisp b/tutorial/13-tutorial/hello-clog/hello-clog.lisp new file mode 100644 index 0000000..a7bc145 --- /dev/null +++ b/tutorial/13-tutorial/hello-clog/hello-clog.lisp @@ -0,0 +1,15 @@ +(defpackage #:hello-clog + (:use #:cl #:clog) + (:export start-app)) + +(in-package :hello-clog) + +(defun on-new-window (body) + (create-div body :content "Hello World!") + + (run body)) + +(defun start-app () + + (initialize #'on-new-window :static-root #P"www/") + (open-browser)) diff --git a/tutorial/13-tutorial/hello-clog/www/boot.html b/tutorial/13-tutorial/hello-clog/www/boot.html new file mode 100644 index 0000000..11a6c21 --- /dev/null +++ b/tutorial/13-tutorial/hello-clog/www/boot.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/tutorial/13-tutorial/hello-clog/www/js/boot.js b/tutorial/13-tutorial/hello-clog/www/js/boot.js new file mode 100644 index 0000000..d3a6fda --- /dev/null +++ b/tutorial/13-tutorial/hello-clog/www/js/boot.js @@ -0,0 +1,114 @@ +var ws; +var adr; +var params={}; +var clog={}; +var pingerid; + +if (typeof clog_debug == 'undefined') { + clog_debug = false; +} + +function Ping_ws() { + if (ws.readyState == 1) { + ws.send ("0"); + } +} + +function Shutdown_ws(event) { + if (ws != null) { + ws.onerror = null; + ws.onclose = null; + ws.close (); + ws = null; + } + clearInterval (pingerid); + if (clog['html_on_close'] != "") { + $(document.body).html(clog['html_on_close']); + } +} + +function Setup_ws() { + ws.onmessage = function (event) { + try { + if (clog_debug == true) { + console.log ("eval data = " + event.data); + } + eval (event.data); + } catch (e) { + console.error (e.message); + } + } + + ws.onerror = function (event) { + console.log ("onerror: reconnect"); + ws = null; + ws = new WebSocket (adr + "?" + clog['connection_id']); + ws.onopen = function (event) { + console.log ("onerror: reconnect successful"); + Setup_ws(); + } + ws.onclose = function (event) { + console.log ("onerror: reconnect failure"); + Shutdown_ws(event); + } + } + + ws.onclose = function (event) { + console.log ("onclose: reconnect"); + ws = null; + ws = new WebSocket (adr + "?" + clog['connection_id']); + ws.onopen = function (event) { + console.log ("onclose: reconnect successful"); + Setup_ws(); + } + ws.onclose = function (event) { + console.log ("onclose: reconnect failure"); + Shutdown_ws(event); + } + } +} + +$( document ).ready(function() { + var s = document.location.search; + var tokens; + var r = /[?&]?([^=]+)=([^&]*)/g; + + clog['body']=document.body; + clog['window']=window; + clog['navigator']=navigator; + clog['document']=window.document; + clog['location']=window.location; + + s = s.split("+").join(" "); + + while (tokens = r.exec(s)) { + params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]); + } + + if (location.protocol == "https:") { + adr = "wss://" + location.hostname; + } else { + adr = "ws://" + location.hostname; + } + + if (location.port != "") { adr = adr + ":" + location.port; } + adr = adr + "/clog"; + + try { + console.log ("connecting to " + adr); + ws = new WebSocket (adr); + } catch (e) { + console.log ("trying again, connecting to " + adr); + ws = new WebSocket (adr); + } + + if (ws != null) { + ws.onopen = function (event) { + console.log ("connection successful"); + Setup_ws(); + } + pingerid = setInterval (function () {Ping_ws ();}, 10000); + } else { + document.writeln ("If you are seeing this your browser or your connection to the internet is blocking websockets."); + } +}); diff --git a/tutorial/README.md b/tutorial/README.md index 4e41ac1..95ded1d 100644 --- a/tutorial/README.md +++ b/tutorial/README.md @@ -45,3 +45,4 @@ Tutorial Summary - 10-tutorial.lisp - Canvas - 11-tutorial.lisp - Attaching to existing HTML - 12-tutorial.lisp - Running a website in CLOG (routing) +- 13-tutorial/ - Flying Solo - A minimalist CLOG project