WebSocket types & messages refactored using new spec.

src/component/main.vue

@@ -93,9 +93,7 @@
           inverse: true,
           sensitivity: 1,
         },
-        clipboard: {
-          data: null,
-        },
+        clipboard: null,
         host: null,
       },
       screen: {
@@ -227,8 +225,8 @@
     }
 
     public setScreenSize(width: number, height: number, rate: number) {
-      this.api.admin.screenConfigurationChange({ screenConfigurationPayload: { width, height, rate } })
-      //this.websocket.send('screen/set', { width, height, rate })
+      //this.api.admin.screenConfigurationChange({ screenConfigurationPayload: { width, height, rate } })
+      this.websocket.send('screen/set', { width, height, rate })
     }
 
     /////////////////////////////
@@ -238,11 +236,6 @@
       // component size change
       this.observer.observe(this._component)
 
-      // host change
-      this.events.on('control.host', (id: string | null) => {
-        Vue.set(this.state.member, 'is_controlling', id != null && id === this.state.member.id)
-      })
-
       // fullscreen change
       this._component.addEventListener('fullscreenchange', () => {
         Vue.set(this.state.video, 'fullscreen', document.fullscreenElement !== null)
@@ -256,8 +249,6 @@
       this.websocket.on('message', async (event: string, payload: any) => {
         switch (event) {
           case 'signal/provide':
-            Vue.set(this.state.member, 'id', payload.id)
-
             try {
               let sdp = await this.webrtc.connect(payload.sdp, payload.lite, payload.ice)
               this.websocket.send('signal/answer', { sdp })
@@ -267,15 +258,16 @@
       })
       this.websocket.on('connecting', () => {
         Vue.set(this.state.connection, 'websocket', 'connecting')
-        this.events.emit('system.websocket', 'connecting')
+        this.events.emit('internal.websocket', 'connecting')
       })
       this.websocket.on('connected', () => {
+        this.websocket.send('signal/request')
         Vue.set(this.state.connection, 'websocket', 'connected')
-        this.events.emit('system.websocket', 'connected')
+        this.events.emit('internal.websocket', 'connected')
       })
       this.websocket.on('disconnected', () => {
         Vue.set(this.state.connection, 'websocket', 'disconnected')
-        this.events.emit('system.websocket', 'disconnected')
+        this.events.emit('internal.websocket', 'disconnected')
         this.webrtc.disconnect()
 
         // TODO: reset state
@@ -308,15 +300,15 @@
       })
       this.webrtc.on('connecting', () => {
         Vue.set(this.state.connection, 'webrtc', 'connecting')
-        this.events.emit('system.webrtc', 'connecting')
+        this.events.emit('internal.webrtc', 'connecting')
       })
       this.webrtc.on('connected', () => {
         Vue.set(this.state.connection, 'webrtc', 'connected')
-        this.events.emit('system.webrtc', 'connected')
+        this.events.emit('internal.webrtc', 'connected')
       })
       this.webrtc.on('disconnected', () => {
         Vue.set(this.state.connection, 'webrtc', 'disconnected')
-        this.events.emit('system.webrtc', 'disconnected')
+        this.events.emit('internal.webrtc', 'disconnected')
         // @ts-ignore
         this._video.src = null
       })

src/component/types/events.ts

@@ -1,72 +1,30 @@
-export const EVENT = {
-  SYSTEM: {
-    DISCONNECT: 'system/disconnect',
-  },
-  SIGNAL: {
-    ANSWER: 'signal/answer',
-    PROVIDE: 'signal/provide',
-  },
-  MEMBER: {
-    LIST: 'member/list',
-    CONNECTED: 'member/connected',
-    DISCONNECTED: 'member/disconnected',
-  },
-  CONTROL: {
-    LOCKED: 'control/locked',
-    RELEASE: 'control/release',
-    REQUEST: 'control/request',
-    REQUESTING: 'control/requesting',
-    GIVE: 'control/give',
-    CLIPBOARD: 'control/clipboard',
-    KEYBOARD: 'control/keyboard',
-  },
-  SCREEN: {
-    CONFIGURATIONS: 'screen/configurations',
-    RESOLUTION: 'screen/resolution',
-    SET: 'screen/set',
-  },
-  BROADCAST: {
-    STATUS: 'broadcast/status',
-    CREATE: 'broadcast/create',
-    DESTROY: 'broadcast/destroy',
-  },
-  ADMIN: {
-    CONTROL: 'admin/control',
-    RELEASE: 'admin/release',
-    GIVE: 'admin/give',
-  },
-} as const
+export const SYSTEM_INIT = 'system/init'
+export const SYSTEM_ADMIN = 'system/admin'
+export const SYSTEM_DISCONNECT = 'system/disconnect'
 
-export type Events = typeof EVENT
+export const SIGNAL_REQUEST = 'signal/request'
+export const SIGNAL_ANSWER = 'signal/answer'
+export const SIGNAL_PROVIDE = 'signal/provide'
 
-export type WebSocketEvents =
-  | SystemEvents
-  | SignalEvents
-  | MemberEvents
-  | ControlEvents
-  | ScreenEvents
-  | BroadcastEvents
-  | AdminEvents
+export const MEMBER_CONNECTED = 'member/connected'
+export const MEMBER_UPDATED = 'member/updated' // TODO: New.
+export const MEMBER_DISCONNECTED = 'member/disconnected'
 
-export type SystemEvents = typeof EVENT.SYSTEM.DISCONNECT
+export const CONTROL_HOST = 'control/host'
+export const CONTROL_RELEASE = 'control/release'
+export const CONTROL_REQUEST = 'control/request'
+export const CONTROL_MOVE = 'control/move' // TODO: New. (fallback)
+export const CONTROL_SCROLL = 'control/scroll' // TODO: New. (fallback)
+export const CONTROL_KEYDOWN = 'control/keydown' // TODO: New. (fallback)
+export const CONTROL_KEYUP = 'control/keyup' // TODO: New. (fallback)
 
-export type SignalEvents = typeof EVENT.SIGNAL.ANSWER | typeof EVENT.SIGNAL.PROVIDE
+export const SCREEN_UPDATED = 'screen/updated'
+export const SCREEN_SET = 'screen/set'
 
-export type MemberEvents = typeof EVENT.MEMBER.LIST | typeof EVENT.MEMBER.CONNECTED | typeof EVENT.MEMBER.DISCONNECTED
+export const CLIPBOARD_UPDATED = 'clipboard/updated'
+export const CLIPBOARD_SET = 'clipboard/set'
 
-export type ControlEvents =
-  | typeof EVENT.CONTROL.LOCKED
-  | typeof EVENT.CONTROL.RELEASE
-  | typeof EVENT.CONTROL.REQUEST
-  | typeof EVENT.CONTROL.GIVE
-  | typeof EVENT.CONTROL.CLIPBOARD
-  | typeof EVENT.CONTROL.KEYBOARD
+export const KEYBOARD_MODIFIERS = 'keyboard/modifiers'
+export const KEYBOARD_LAYOUT = 'keyboard/layout'
 
-export type ScreenEvents = typeof EVENT.SCREEN.CONFIGURATIONS | typeof EVENT.SCREEN.RESOLUTION | typeof EVENT.SCREEN.SET
-
-export type BroadcastEvents =
-  | typeof EVENT.BROADCAST.STATUS
-  | typeof EVENT.BROADCAST.CREATE
-  | typeof EVENT.BROADCAST.DESTROY
-
-export type AdminEvents = typeof EVENT.ADMIN.CONTROL | typeof EVENT.ADMIN.RELEASE | typeof EVENT.ADMIN.GIVE
+export const BORADCAST_STATUS = 'broadcast/status'

src/component/types/messages.ts

@@ -1,178 +1,137 @@
-import {
-  EVENT,
-  WebSocketEvents,
-  SystemEvents,
-  SignalEvents,
-  MemberEvents,
-  ControlEvents,
-  ScreenEvents,
-  BroadcastEvents,
-  AdminEvents,
-} from './events'
-
-import { Member, ScreenConfigurations, ScreenResolution } from './structs'
-
-export type WebSocketMessages =
-  | WebSocketMessage
-  | SignalProvideMessage
-  | SignalAnswerMessage
-  | MemberListMessage
-  | MemberConnectMessage
-  | MemberDisconnectMessage
-  | ControlMessage
-  | ScreenResolutionMessage
-  | ScreenConfigurationsMessage
-
-export type WebSocketPayloads =
-  | SignalProvidePayload
-  | SignalAnswerPayload
-  | MemberListPayload
-  | Member
-  | ControlPayload
-  | ControlClipboardPayload
-  | ControlKeyboardPayload
-  | ScreenResolutionPayload
-  | ScreenConfigurationsPayload
-  | AdminPayload
-  | BroadcastStatusPayload
-  | BroadcastCreatePayload
-
-export interface WebSocketMessage {
-  event: WebSocketEvents | string
+export interface Message {
+  event: string | undefined
+  payload: any
 }
 
-/*
-  SYSTEM MESSAGES/PAYLOADS
-*/
-// system/disconnect
-export interface DisconnectMessage extends WebSocketMessage, DisconnectPayload {
-  event: typeof EVENT.SYSTEM.DISCONNECT
+/////////////////////////////
+// System
+/////////////////////////////
+
+export interface SystemInit {
+  event: string | undefined
+  control_host: ControlHost
+  screen_size: ScreenSize
+  members: MemberData[]
 }
-export interface DisconnectPayload {
+
+export interface SystemAdmin {
+  event: string | undefined
+  screen_sizes_list: ScreenSize[]
+  broadcast_status: BroadcastStatus
+}
+
+// TODO: New.
+export interface SystemDisconnect {
+  event: string | undefined
   message: string
 }
 
-/*
-  SIGNAL MESSAGES/PAYLOADS
-*/
-// signal/provide
-export interface SignalProvideMessage extends WebSocketMessage, SignalProvidePayload {
-  event: typeof EVENT.SIGNAL.PROVIDE
-}
-export interface SignalProvidePayload {
-  id: string
+/////////////////////////////
+// Signal
+/////////////////////////////
+
+export interface SignalProvide {
+  event: string | undefined
+  sdp: string
   lite: boolean
   ice: string[]
+}
+
+export interface SignalAnswer {
+  event: string | undefined
   sdp: string
 }
 
-// signal/answer
-export interface SignalAnswerMessage extends WebSocketMessage, SignalAnswerPayload {
-  event: typeof EVENT.SIGNAL.ANSWER
-}
-export interface SignalAnswerPayload {
-  sdp: string
-}
+/////////////////////////////
+// Member
+/////////////////////////////
 
-/*
-  MEMBER MESSAGES/PAYLOADS
-*/
-// member/list
-export interface MemberListMessage extends WebSocketMessage, MemberListPayload {
-  event: typeof EVENT.MEMBER.LIST
-}
-export interface MemberListPayload {
-  members: Member[]
-}
-
-// member/connected
-export interface MemberConnectMessage extends WebSocketMessage, MemberPayload {
-  event: typeof EVENT.MEMBER.CONNECTED
-}
-export type MemberPayload = Member
-
-// member/disconnected
-export interface MemberDisconnectMessage extends WebSocketMessage, MemberPayload {
-  event: typeof EVENT.MEMBER.DISCONNECTED
-}
-export interface MemberDisconnectPayload {
+// TODO: New.
+export interface MemberID {
+  event: string | undefined
   id: string
 }
 
-/*
-  CONTROL MESSAGES/PAYLOADS
-*/
-// control/locked & control/release & control/request
-export interface ControlMessage extends WebSocketMessage, ControlPayload {
-  event: ControlEvents
-}
-export interface ControlPayload {
+// TODO: New.
+export interface MemberData {
+  event: string | undefined
   id: string
+  name: string
+  is_admin: boolean
 }
 
-export interface ControlTargetPayload {
-  id: string
-  target: string
+/////////////////////////////
+// Control
+/////////////////////////////
+
+export interface ControlHost {
+  event: string | undefined
+  has_host: boolean
+  host_id: string | undefined
 }
 
-export interface ControlClipboardPayload {
+// TODO: New.
+export interface ControlMove {
+  event: string | undefined
+  x: number
+  y: number
+}
+
+// TODO: New.
+export interface ControlScroll {
+  event: string | undefined
+  x: number
+  y: number
+}
+
+// TODO: New.
+export interface ControlKey {
+  event: string | undefined
+  key: number
+}
+
+/////////////////////////////
+// Screen
+/////////////////////////////
+
+export interface ScreenSize {
+  event: string | undefined
+  width: number
+  height: number
+  rate: number
+}
+
+/////////////////////////////
+// Clipboard
+/////////////////////////////
+
+export interface ClipboardData {
+  event: string | undefined
   text: string
 }
 
-export interface ControlKeyboardPayload {
-  layout?: string
-  capsLock?: boolean
-  numLock?: boolean
-  scrollLock?: boolean
+/////////////////////////////
+// Keyboard
+/////////////////////////////
+
+export interface KeyboardModifiers {
+  event: string | undefined
+  caps_lock: boolean
+  num_lock: boolean
+  scroll_lock: boolean
 }
 
-/*
-  SCREEN PAYLOADS
-*/
-export interface ScreenResolutionMessage extends WebSocketMessage, ScreenResolutionPayload {
-  event: ScreenEvents
+export interface KeyboardLayout {
+  event: string | undefined
+  layout: string
 }
 
-export interface ScreenResolutionPayload extends ScreenResolution {
-  id?: string
-}
+/////////////////////////////
+// Broadcast
+/////////////////////////////
 
-export interface ScreenConfigurationsMessage extends WebSocketMessage, ScreenConfigurationsPayload {
-  event: ScreenEvents
-}
-
-export interface ScreenConfigurationsPayload {
-  configurations: ScreenConfigurations
-}
-
-/*
-  BROADCAST PAYLOADS
-*/
-export interface BroadcastCreatePayload {
-  url: string
-}
-
-export interface BroadcastStatusPayload {
-  url: string
-  isActive: boolean
-}
-
-/*
-  ADMIN PAYLOADS
-*/
-export interface AdminMessage extends WebSocketMessage, AdminPayload {
-  event: AdminEvents
-}
-
-export interface AdminPayload {
-  id: string
-}
-
-export interface AdminTargetMessage extends WebSocketMessage, AdminTargetPayload {
-  event: AdminEvents
-}
-
-export interface AdminTargetPayload {
-  id: string
-  target?: string
+export interface BroadcastStatus {
+  event: string | undefined
+  is_active: boolean
+  url: string | undefined
 }

src/component/types/state.ts

@@ -35,7 +35,7 @@ export interface Video {
 /////////////////////////////
 export interface Control {
   scroll: Scroll
-  clipboard: Clipboard
+  clipboard: Clipboard | null
   host: Member | null
 }
 
@@ -45,7 +45,7 @@ export interface Scroll {
 }
 
 export interface Clipboard {
-  data: string | null
+  text: string
 }
 
 /////////////////////////////

src/component/types/structs.ts

@@ -1,25 +0,0 @@
-export interface Member {
-  id: string
-  name: string
-  admin: boolean
-  connected?: boolean
-  ignored?: boolean
-}
-
-export interface ScreenConfigurations {
-  [index: string]: ScreenConfiguration
-}
-
-export interface ScreenConfiguration {
-  width: number
-  height: number
-  rates: {
-    [index: string]: number
-  }
-}
-
-export interface ScreenResolution {
-  width: number
-  height: number
-  rate: number
-}