awful-sse/examples/example2.scm

;; 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.
(use awful-sse awful spiffy json posix 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)