-
Notifications
You must be signed in to change notification settings - Fork 2
Architecture
Michael van der Kamp edited this page Apr 28, 2023
·
4 revisions
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!