Architecture

Startup Sequence

sequenceDiagram
    actor user as API User
    participant server as WAMS Server
    participant express as Express.js
    participant http as http.Server
    participant server_socket as Socket.io Server
    participant client_socket as Socket.io Client
    participant client as WAMS Client
    actor browser as Web Browser
    participant others as Other WAMS Clients


    user ->> server: Instantiates Application
    server ->> express: instantiate express app
    express ->> server: express.app
    server ->> express: defines route to index.html
    server ->> express: defines route to internal static files dir
    alt if user defined custom static dir
        server ->> express: defines custom static files dir
    end
    server ->> http: creates server using express app
    http ->> server: http.Server
    server ->> server_socket: instantiate socket.io server
    server_socket ->> server: IO server
    server ->> server_socket: defines WAMS socket namespace
    server ->> server_socket: add 'connect' event listener
    server ->> user: WAMS.Application

    user ->> server: calls Application.listen(port, host)
    server ->> http: listen on the given host and port

    browser ->> http: visits host and port
    http ->> express: load '/' route
    express ->> http: dist/index.html
    http ->> browser: dist/index.html

    browser ->> http: requests client.js script
    http ->> express: load '/wams/client.js' route
    express ->> http: minified and bundled 'client.js'
    http ->> browser: client.js

    browser ->> client: run WAMS client
    client ->> browser: add 'load' event listener
    browser ->> client: 'load' event
    note over client, browser: Client instantiates model, view, controller, client app
    client ->> browser: add various event listeners
    client ->> browser: find and resize the canvas to fill the window

    client ->> client_socket: instantiate socket.io client
    client_socket ->> client: IO client
    client ->> client_socket: attach various event listeners
    client ->> client_socket: connect to WAMS socket namespace

    client_socket ->> server_socket: connect
    server_socket ->> server: connect
    break if clientLimit is reached on server
        server ->> server_socket:  emit "FULL" and disconnect
        server_socket ->> client_socket: emit "FULL" and disconnect
        client_socket ->> client: "FULL"
        client ->> browser: replace HTML with "full" message
    end

    note over server, server_socket: server instantiates controller, view
    server ->> server_socket: add various event listeners

    note over server, client: connection established

    server ->> client: send INITIALIZE
    client ->> browser: load any client scripts or style sheets
    browser ->> http: request static files
    http ->> express: request static files
    express ->> http: static files
    http ->> browser: static files

    note over server, client: client model records current application state
    client ->> server: emit LAYOUT
    note over server, client: server notes client view details
    server ->> user: emit 'connect' event
    user ->> server: applies changes to model
    server ->> others: emit ADD_SHADOW
    server ->> client: emit UD_VIEW

    note over server, client: Client is now a full participant!

Loading