57 lines
1.5 KiB
Scheme
57 lines
1.5 KiB
Scheme
;; Run with 'awful example2.scm'.
|
|
;; Open two web browsers and point both to http://localhost:8080/client.
|
|
;; Try clicking on the blue and the red divs and see them changing their
|
|
;; boolean values on BOTH browsers.
|
|
(import (chicken port) (awful sse) awful spiffy json srfi-18)
|
|
|
|
; Global variables are not good practice, but will suffice for the moment.
|
|
(define one #t)
|
|
(define two #f)
|
|
|
|
(define (swap1!)
|
|
(set! one (not one)))
|
|
(define (swap2!)
|
|
(set! two (not two)))
|
|
|
|
(define (prepare-json one two)
|
|
(with-output-to-string
|
|
(lambda ()
|
|
(json-write (list->vector `(("one" . ,one) ("two" . ,two)))))))
|
|
|
|
(define (sse-proc)
|
|
(let loop ()
|
|
(send-sse-data (prepare-json one two))
|
|
(thread-sleep! 1)
|
|
(loop)))
|
|
|
|
(define-page/sse "/client"
|
|
(lambda ()
|
|
(add-javascript
|
|
"var source = new EventSource('/sse');
|
|
source.addEventListener('message', function(e) {
|
|
var data = JSON.parse(e.data);
|
|
document.getElementById('one').innerHTML = data.one;
|
|
document.getElementById('two').innerHTML = data.two;
|
|
}, false);")
|
|
|
|
(add-css "div #one, #two { padding: 1em; margin: 1em; border-width: 1px; border-style: solid; }")
|
|
|
|
(ajax "one" 'one 'click
|
|
(lambda ()
|
|
(swap1!)))
|
|
|
|
(ajax "two" 'two 'click
|
|
(lambda ()
|
|
(swap2!)))
|
|
|
|
`((div (div (@ (id "one")
|
|
(style "border-color: blue;"))
|
|
"")
|
|
(div (@ (id "two")
|
|
(style "border-color: red;"))
|
|
""))))
|
|
"/sse"
|
|
sse-proc
|
|
use-sxml: #t
|
|
use-ajax: #t)
|