Frontend specification for real time event process ┌─┐ ║"│ └┬┘ ┌┼┐ │ ┌─────┐ ┌────────────────────────┐ ┌────┐ ┌┴┐ │Front│ │TracimLiveMessageManager│ │Back│ User └──┬──┘ └────────────┬───────────┘ └──┬─┘ │ │ │ │ │ │ ╔╧═══════════╗ │ ════════╪════════════════════════════════════════════════╪════════════════════════════════════════════════════╣ Connection ╠════════════════════════════════════════════════════════════════════════╪══════════════════════════════════════ │ │ ╚╤═══════════╝ │ │ │ │ │ │ │ GET /ui/login │ │ │──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────>│ │ │ │ │ │ │ │ app Tracim │ │ │<─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│ │ │ │ │ │ │────┐ │ │ │ │ │ routing for login page │ │ │ │<───┘ │ │ │ │ │ │ │ /ui/login │ │ │ │<───────────────────────────────────────────────│ │ │ │ │ │ │ │ "email" + "password" │ │ │ │───────────────────────────────────────────────>│ │ │ │ │ │ │ │ │ │ POST /api/login │ │ │─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────>│ │ │ │ │ │ │ │ │────┐ │ │ │ │ │ check email + password │ │ │ │<───┘ │ │ │ │ │ │ 200 "ok" + header "SET-COOKIE" │ │ │<─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│ │ │ │ │ │ │────┐ │ │ │ │ │ create session cookie │ │ │ │<───┘ │ │ │ │ │ │ │ /ui/ │ │ │ │<───────────────────────────────────────────────│ │ │ │ │ │ │ │ │ │ GET /api/v2/notification │ │ │─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────>│ │ │ │ │ │ │ │ │────┐ │ │ │ │ │ get list of notif from database │ │ │ │<───┘ │ │ │ │ │ │ 200 "ok" "list of notif as json" │ │ │<─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│ │ │ │ │ │ show number of unread notif in headbar │ │ │ │<───────────────────────────────────────────────│ │ │ │ │ │ │ │ │ │ GET /api/v2/todo │ │ │─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────>│ │ │ │ │ │ │ │ │────┐ │ │ │ │ │ get list of todo from database │ │ │ │<───┘ │ │ │ │ │ │ 200 "ok" "list of todo as json" │ │ │<─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│ │ │ │ │ │show number of unread notif and todo in headbar │ │ │ │<───────────────────────────────────────────────│ │ │ │ │ │ │ │ ╔════════╧═════════════════════════════════════════════════════╧════════╗ │ │ ║Here is start the process to get TracimLiveMessage in real time ░║ │ │ ╚════════╤═════════════════════════════════════════════════════╤════════╝ │ │ │openTracimLiveMessageConnection(session_id, user_id) │ ╔══════════════════════════════╗ │ │ │────────────────────────────────────────────────────>│ ║session_id comes from cookie ░║ │ │ │ │ ╚══════════════════════════════╝ │ │ ╔══════════════════════════╧═══════════════════════════════════════════════════╗ │ /whatever_end_point_to_open_connection?session_id=session_cookie&user_id=1 │ │ ║session_id and user_id might be passed through a body instead of query param ░║ │───────────────────────────────────────────────────────────────────────────────────>│ │ ╚══════════════════════════╤═══════════════════════════════════════════════════╝ │ │ │ │ │ 200 "ok" │ │ │ │<───────────────────────────────────────────────────────────────────────────────────│ │ │ │ │ │ │ true │ │ │ │<────────────────────────────────────────────────────│ │ │ │ │ │ │ │ │ │ │ │ ╔════╧═══════════════╗ │ ════════╪════════════════════════════════════════════════╪════════════════════════════════════════════════╣ Creating a comment ╠════════════════════════════════════════════════════════════════════╪══════════════════════════════════════ │ │ ╚════╤═══════════════╝ │ │ │ │ │ │ ╔═════════════════════════════════════════╧═════════════════════════════════════════╗ │ │ │ ║User open a dochtml content 42 in workspace 12 and type a comment in the timeline ░║ │ │ │ ╚═════════════════════════════════════════╤═════════════════════════════════════════╝ │ │ │ click "Validate" to send his comment │ │ │ │───────────────────────────────────────────────>│ │ │ │ │ │ │ │ │ POST /api/v2/workspaces/12/contents/42/comments │ │ │─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────>│ │ │ │ │ │ │ │ │────┐ │ │ │ │ │ add comment in database │ │ │ │<───┘ │ │ │ │ │ │ │ 200 "ok" │ │ │<─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│ │ │ │ │ │ │ │ │────┐ │ │ │ │ │ generate new TracimLiveMessage │ │ │ │<───┘ │ │ │ │ │ │ ╔═══════════════════════════╗ │ │ │ │ ║data = { ░║ │ │ │ │ ║ type: 'comment.create', ║ │ "new TLM with data json" │ │ │ ║ workspace_id: 12, ║ │<───────────────────────────────────────────────────────────────────────────────────│ │ │ ║ content_id: 42, ║ │ │ │ │ ║ comment_id: 1337 ║ │ │ │ │ ║} ║ │ │ │ │ ╚═══════════════════════════╝ │ │ │ │ GLOBAL_dispatchEvent(data) │ │ │ │<────────────────────────────────────────────────────│ │ │ │ │ │ │ │────┐ │ │ │ │ │ document.dispatchEvent(data) │ │ │ │<───┘ │ │ │ │ │ │ │ │────┐ ╔══════════════════════════╧════╗ │ │ │ │ addNotification() ║header shows new notification ░║ │ │ │<───┘ ╚══════════════════════════╤════╝ │ │ │ │ │ │ │ │ │ document.dispatchEvent(data) │ ┌───────────────┐ ╔══════════════════════════════════════════╧════════╗ │ │───────────────────────────────────────────────────────────────────────────> │AppHtmlDocument│ ║this actually is the same .dispatchEvent as above ░║ │ │ │ └───────┬───────┘ ╚══════════════════════════════════════════╤════════╝ │ │ │ │────┐ │ │ │ │ │ │ customEventHandler() │ │ │ │ │<───┘ │ │ │ │ │ │ │ │ │ │GET /api/v2/workspaces/12/contents/42/comments/1337 │ │ │ │ │───────────────────────────────────────────────────>│ │ │ │ │ │ │ │ │ │ 200 "ok" "{content_id: 1337, raw_content: '...'}" │ │ │ │ │<───────────────────────────────────────────────────│ │ │ │ │ │ │ │ │ │────┐ │ │ │ │ │ │ insert comment in timeline │ │ │ │ │<───┘ │ │ │ │ │ │ │ │ show new comment in timeline │ │ │ │<─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│ │ │ │ │ │ │ │ │dispatchCustomEvent('user.upToDateWithContent', {workspace_id: 12, content_id: 42}) │ ╔═════════════════════════════════════╗ │ │ │<────────────────────────────────────────────────────────────────────────────────────│ ║some specification required on this ░║ │ │ │ │ │ ╚═════════════════════════════════════╝ │ │ │────┐ ╔═════════════════════════╧═══════════════╗ │ │ │ │ │ notificationRead() ║remove the new notification from header ░║ │ │ │ │<───┘ ╚═════════════════════════╤═══════════════╝ │ │ User ┌──┴──┐ ┌────────────┴───────────┐ ┌───────┴───────┐ ┌──┴─┐ ┌─┐ │Front│ │TracimLiveMessageManager│ │AppHtmlDocument│ │Back│ ║"│ └─────┘ └────────────────────────┘ └───────────────┘ └────┘ └┬┘ ┌┼┐ │ ┌┴┐