Traditional web interaction in a client-server app

The code of this tutorial has been tested with Eliom 6.0.

Multi-user collaborative drawing application

We now want to turn our collaborative drawing application into a multi-user one. Each user will have their own drawing, where everyone can draw, and the owner will have the ability to save the drawing they want and create an Atom feed containing all saved drawings.

See the full code of examples.

Split application into multiple files and using several canvases

We first build a multi-canvas drawing application. Each drawing has its own URL. Everyone can create a new drawing by going to the corresponding URL.

We need to refactor some parts. In particular, we need to handle different drawings separately. To do this, we turn all global variables, like the bus, into local ones.

When an application grows, it becomes useful to split it into multiple files. For example, we will split graffiti into 4 files.

  • common.ml, which will be part of both client and server, containing shared types and declarations,
  • client.ml, client-only part of the application,
  • server.ml, server-only part of the application, and
  • graffiti.eliom, which is the only part where we need to include both client-side and server-side code

common.ml

It contains what was previously in [%shared ... ]

type messages =
  ((int * int * int) * int * (int * int) * (int * int))
  [@@deriving json]

let width = 700
let height = 400

client.ml

It is almost the same code as what was enclosed in {{{ {client{ ... }} }}}, with the difference that what was previously in the client value init_client is now in the function launch_client_canvas.

open Common
open Eliom_content

let draw ctx ((r, g, b), size, (x1, y1), (x2, y2)) =
  let color = CSS.Color.string_of_t (CSS.Color.rgb r g b)