mirror of
https://github.com/rabbibotton/clog.git
synced 2025-12-06 02:30:42 -08:00
Tutorial 13
This commit is contained in:
parent
2b8663169d
commit
07a84c7052
7 changed files with 171 additions and 0 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
13
tutorial/13-tutorial/README.md
Normal file
13
tutorial/13-tutorial/README.md
Normal file
|
|
@ -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)
|
||||
12
tutorial/13-tutorial/hello-clog/hello-clog.asd
Normal file
12
tutorial/13-tutorial/hello-clog/hello-clog.asd
Normal file
|
|
@ -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")))
|
||||
|
||||
15
tutorial/13-tutorial/hello-clog/hello-clog.lisp
Normal file
15
tutorial/13-tutorial/hello-clog/hello-clog.lisp
Normal file
|
|
@ -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))
|
||||
15
tutorial/13-tutorial/hello-clog/www/boot.html
Normal file
15
tutorial/13-tutorial/hello-clog/www/boot.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype HTML>
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script src="/js/boot.js" type="text/javascript"></script>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
</BODY>
|
||||
<noscript>Your browser must support JavaScript and be HTML 5 compilant to see this site.</noscript>
|
||||
</HTML>
|
||||
114
tutorial/13-tutorial/hello-clog/www/js/boot.js
Normal file
114
tutorial/13-tutorial/hello-clog/www/js/boot.js
Normal file
|
|
@ -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.");
|
||||
}
|
||||
});
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue