c0ckp1t 1.0.0

package/core/ws-client/Session.mjs

@@ -0,0 +1,72 @@
+/*
+  Session.mjs
+*/
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {markRaw, reactive, watch, defineAsyncComponent, getCurrentInstance} from 'vue'
+import {getLogger} from "Logging";
+import {actions as wsAction, connStateString, isConnected, state, url} from "./WsInterface.mjs"
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'ws/Session.mjs'
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+
+// This watcher is needed because the Connection can be closed
+//  unexpectedly. This updates the state-machine to match state of wsClient.
+//  Ugly solution.
+watch(
+    () => isConnected.value,
+    async (curr, prev) => {
+        // NOTE: actor.send is idempotent
+        if (!curr) {
+            logger.info(`[WATCH] - WsInterface - isConnected=${curr}`)
+            store.actor.send({type: 'c0ckp1t.disconnected'});
+            store.isConnected = false
+        } else {
+            store.actor.send({type: 'c0ckp1t.connected'});
+        }
+    }
+)
+
+function loginValidateClientSide() {
+    logger.debug(`[${store.id}] - loginValidateClientSide`)
+    if (state.username < 3) {
+        store.errorMessage = "UniqueId must have 3 or more characters"
+        return false
+    }
+    if (state.password < 3) {
+        store.errorMessage = "Password must have 3 or more characters"
+        return false
+    }
+    return true
+}
+
+
+
+
+
+//________________________________________________________________________________
+// Connection
+// ________________________________________________________________________________
+export default class Session {
+    // ________________________________________________________________________________
+    // CONSTRUCTOR
+    // ________________________________________________________________________________
+    constructor() {
+
+
+
+    }
+
+    // ________________________________________________________________________________
+    // API
+    // ________________________________________________________________________________
+
+
+}
+

package/core/ws-client/WsClient.mjs

@@ -0,0 +1,230 @@
+
+const { BehaviorSubject } = rxjs;
+const { WebSocketSubject } = rxjs.webSocket;
+const { from } = rxjs;
+const { switchMapTo, tap } = rxjs.operators;
+const { map, takeWhile, filter, take, distinctUntilChanged } = rxjs.operators;
+
+import { Code2, toBinary, fromBinary, eventBus } from 'WsUtils'
+
+// Note: This is global because we want to search across all connections
+import { api as apiLogger } from './WsLogUtils.mjs'
+
+//________________________________________________________________________________
+// ConnectionStates
+//________________________________________________________________________________
+export const ConnectionStates = {
+    IDLE: 0,
+    CONNECTING: 1,
+    CONNECTED: 2,
+    ERROR: 3,
+    CLOSED: 4
+};
+export const ConnectionLookUp = [
+    'IDLE',
+    'CONNECTING',
+    'CONNECTED',
+    'ERROR',
+    'CLOSED'
+];
+
+// https://github.com/Luka967/websocket-close-codes
+// code = 1000 connection closed normally
+// code = 1001 connection is going away, server shut down, or tab closed
+// code = 1002  protocol error occurred, endpoint received a malformed frame
+// code = 1003  InvalidMessageType - cannot accept the data type it received.
+// code = 1005  Got no close status but transport layer finished normally (e.g. TCP FIN but no previous CLOSE frame)
+// code = 1006  Transport layer broke (e.g. couldn't connect, TCP RST)
+// code = 1007  InvalidPayloadData - received data inconsistent with the message type.
+// code = 1008  endpoint terminated connection
+// code = 1009  MessageTooBig - message that is too big for it to process.
+// code = 1011  InternalServerError - error on the server.
+// code = 1012  Server/service is restarting
+// code = 3000  Endpoint must be authorized to perform application-based request. Equivalent to HTTP 401
+// code = 3003  Endpoint is authorized but has no permissions to perform application-based request. Equivalent to HTTP 403
+// code = 3008  Endpoint took too long to respond to application-based request. Equivalent to HTTP 408
+export function getCodeDescription(code) {
+    if (typeof code !== 'number') {
+        return 'unknown';
+    }
+
+    const codeMap = {
+        1000: 'connection closed normally',
+        1001: 'connection is going away (server shutdown or tab closed)',
+        1002: 'protocol error occurred (malformed frame)',
+        1003: 'invalid message type - cannot accept data type',
+        1005: 'no close status but transport finished normally',
+        1006: 'transport layer broke or couldn’t connect (TCP RST)',
+        1007: 'invalid payload data - data inconsistent with message type',
+        1008: 'endpoint terminated connection (policy violation)',
+        1009: 'message too big',
+        1011: 'internal server error',
+        1012: 'server/service is restarting',
+        3000: 'endpoint must be authorized (HTTP 401 equivalent)',
+        3003: 'no permission to perform request (HTTP 403 equivalent)',
+        3008: 'endpoint took too long to respond (HTTP 408 equivalent)',
+
+        4001: 'C0ckp1t - missing cookie',
+        4002: 'C0ckp1t - cookie decode error',
+        4003: 'C0ckp1t - invalid authenticator',
+        4004: 'C0ckp1t - validate session failed',
+        4005: 'C0ckp1t - received text but binary is required',
+        4006: 'C0ckp1t - unhandled exception',
+    };
+
+    return codeMap[code] || 'unknown';
+}
+//________________________________________________________________________________
+// WsClient
+// ________________________________________________________________________________
+export default class WsClient {
+
+    constructor(id) {
+        this.id = id
+        this.subscriptionCount = 0
+
+        this.subscriptionCount$ = new BehaviorSubject(this.subscriptionCount);
+        this.status$ = new BehaviorSubject({state: ConnectionStates.IDLE});
+
+        this.url = null
+        this.socket$ = null
+        this.logInBound = (data) => {
+            apiLogger.logInbound(this.id, data)
+        }
+        this.logOutBound = (data) => {
+            apiLogger.logOutbound(this.id, data)
+        }
+    }
+
+    status() {
+        return this.status$.pipe(distinctUntilChanged())
+    }
+
+    connect(url) {
+        console.log(`[WsClient.mjs] url=${url}, state=${this.status$.value.state}`)
+        this.url = url
+        this.status$.next({state: ConnectionStates.CONNECTING, url: url})
+        return new Promise((resolve, reject) => {
+            // https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/dom/WebSocketSubject.ts
+            this.socket$ = new WebSocketSubject({
+                url: this.url,
+                // deserializer: msg => msg,
+                binaryType: 'arraybuffer',
+                deserializer: msg => {
+                    return fromBinary(msg.data)
+                },
+                serializer: (pkt) => {
+                    return toBinary(pkt)
+                },
+                openObserver: {
+                    next: () => {
+                        this.status$.next({state:ConnectionStates.CONNECTED})
+                        resolve(true)
+                    },
+                    error: e => reject(e)
+                },
+                closeObserver: {
+                    next: (event) => {
+                        // Note: See error codes above for event.code
+                        this.status$.next({state: ConnectionStates.CLOSED, code: event.code, reason: event.reason, clean: event.wasClean});
+                        console.log(`[WsClient.js] - WebSocket closed. Code: ${event.code}, Reason: ${event.reason}, Clean: ${event.wasClean}`);
+                    },
+                    error: e => console.log(e)
+                }
+            })
+
+            // https://rxjs.dev/deprecations/subscribe-arguments
+            // This is required because we don't actually connect until we send first packet
+            this.socket$.subscribe(
+                (data) => this.logInBound(data),
+                (error) => {
+                  console.log(error)
+                  console.log(this)
+
+                    this.logInBound(error)
+                    if (error.type === "close") {
+                        console.log("[WsClient.js] - got close event")
+                    }
+                    if (error.type === "error") {
+                        this.status$.next({state: ConnectionStates.ERROR, error: error})
+                        reject(error)
+                    }
+                }
+            ) // end of subscribe
+
+            // eventBus
+            // /alert : Object     ( display and alert: {title, message})
+            // /invalidate : String (cache has been invalidated for the given endpoint)
+            // /refresh : Empty  (registry changed need to refresh)
+            this.socket$.pipe(
+                filter(pkt => {
+                    return pkt.code === Code2.EVENT
+                })
+            ).subscribe((pkt) => {
+                eventBus.emit(pkt.endpoint, pkt)
+            })
+        }); // end of promise
+    }
+
+    close() {
+        this.socket$.unsubscribe()
+    }
+
+    send(aWsPacket) {
+        this.logOutBound(aWsPacket)
+        this.socket$.next(aWsPacket)
+    }
+
+    /*
+        Doesn't work because it will return FACK
+        but we don't want the first message
+    */
+    sendAndGetPromise(aWsPacket) {
+        this.logOutBound(aWsPacket)
+        const promise = this.socket$.pipe(
+            tap({
+                subscribe: () => {
+                    this.subscriptionCount += 1
+                    this.subscriptionCount$.next(this.subscriptionCount)
+                },
+                unsubscribe: () =>  {
+                    this.subscriptionCount -= 1
+                    this.subscriptionCount$.next(this.subscriptionCount)
+                }
+
+            }),
+            filter(reply => {
+                return reply.id == aWsPacket.id
+            }),
+            take(1)
+        ).toPromise();
+        this.socket$.next(aWsPacket)
+        return promise;
+    }
+
+    sendAndGetObservable(aWsPacket) {
+        this.logOutBound(aWsPacket)
+        this.socket$.next(aWsPacket)
+        return this.socket$.pipe(
+            // timeout(60000), // Set a 1-minute timeout
+            tap({
+                subscribe: () => {
+                    this.subscriptionCount += 1
+                    this.subscriptionCount$.next(this.subscriptionCount)
+                },
+                // TODO: doesn't work when server throws exception
+                unsubscribe: () =>  {
+                    this.subscriptionCount -= 1
+                    this.subscriptionCount$.next(this.subscriptionCount)
+                }
+            }),
+            filter(reply => {
+                return reply.id === aWsPacket.id
+            }),
+            takeWhile( reply => reply.code !== Code2.COMPLETE , true)
+        )
+    }
+
+
+
+}

package/core/ws-client/WsLogUtils.mjs

@@ -0,0 +1,91 @@
+
+/*
+    Usage:
+
+    import {api as wsLog} from "NotifyUtils"
+
+
+*/
+// ________________________________________________________________________________
+// IMPORT
+// ________________________________________________________________________________
+import { reactive } from 'vue'
+import {Code, toBinary, fromBinary, Code2} from "WsUtils"
+
+const MSG_HISTORY = 50
+
+function buildHistObj(index, instanceId, pkt) {
+    return {
+        index: index,
+        type: pkt.code,
+        instanceId: instanceId,
+        id: pkt.id,
+        endpoint: pkt.endpoint,
+        in: [],
+        out: [pkt]
+    }
+}
+
+// ________________________________________________________________________________
+// WsPacket HISTORY STORE
+// ________________________________________________________________________________
+export const store = reactive({
+    history: [],
+    enabled: true,
+    instanceId: null,
+    historyIdx: 0,
+    idToIdxMap: {},
+    documentation: "/v3/text-markdown/c0ckp1t/vue-js/Traffic.md"
+})
+
+// ________________________________________________________________________________
+// METHODS
+// ________________________________________________________________________________
+// Convert from WsPacket.id to the store.historyIdx it is inserted into
+function idToIndex(id) {
+    return store.idToIdxMap[id]
+}
+
+// ________________________________________________________________________________
+// NOTIFY API
+// ________________________________________________________________________________
+export const api = {
+    logInbound(id, wsPacket) {
+        if (!store.enabled) return
+        let idx = idToIndex(wsPacket.id)
+        if(!idx) {
+            console.log("TODO: fix logger for events")
+            return
+        }
+        store.history[idx].in.push(wsPacket)
+    },
+    logOutbound(id, wsPacket) {
+        if (!store.enabled) return
+
+        if (wsPacket.code === Code2.EXEC_REQ || wsPacket.code === Code2.EXEC2_REQ || wsPacket.code === Code2.EXEC3_REQ) {
+            let idx = store.historyIdx
+            store.history[idx] = buildHistObj(idx, id, wsPacket)
+            store.idToIdxMap[wsPacket.id] = idx
+
+            if (store.historyIdx > MSG_HISTORY) {
+                store.historyIdx = 0
+                const oldPktId = store.history[0]
+                delete store.idToIdxMap[oldPktId]
+            } else {
+                store.historyIdx += 1
+            }
+        } else {
+            return
+            // Note: All messages are outbound first. C0ckp1t doesn't currently
+            //  initiate any messages
+            // console.log(`[LOG_OUTBOUND_ERROR] - unexpected wsPacket - ${wsPacket}`)
+        }
+    },
+    async clearHistory() {
+        for (var i = 0; i < MSG_HISTORY; ++i) {
+            store.history[i] = buildHistObj(i)
+        }
+    }
+
+}
+

package/core/ws-client/ws-connection.vue

@@ -0,0 +1,144 @@
+<script setup>
+import { ref, reactive, watch, onMounted, computed } from 'vue'
+
+
+import { actions, state, connStateString, url, isAuthenticated, tryCallLoading} from "WsInterface";
+
+// import {store, methods} from 'GlobalStore'
+import Constants from 'Constants'
+import {getLogger} from "Logging";
+import {store as storeSession} from "./Session.mjs";
+
+//________________________________________________________________________________
+// Logging
+//________________________________________________________________________________
+const LOG_HEADER = 'ws-connection.vue'
+const logger = getLogger(LOG_HEADER)
+
+// ________________________________________________________________________________
+// STATE
+// ________________________________________________________________________________
+const backoffMsMax = 20000;
+
+const local = reactive({
+  isLoading: false,
+  isDev: Constants.isDev,
+
+  retries: 0,
+  retryEnable: true,
+  errorReason: "N/A",
+
+})
+
+var timeoutID = null
+
+// ________________________________________________________________________________
+// EVENT METHODS
+// ________________________________________________________________________________
+async function connectRetry() {
+  if (isAuthenticated.value === true) return connStateString.value
+  try {
+    logger.info("connectRetry")
+    await actions.connect()
+  } catch(e) {
+    local.errorReason = e
+    if(local.retryEnable) {
+      const delay = Math.min(local.retries * 2000, backoffMsMax)
+      local.retries += 1
+      timeoutID = setTimeout(() => { connectRetry() }, delay)
+    }
+  }
+}
+
+async function connect() {
+  storeSession.actor.send({type: 'c0ckp1t.connect'});
+}
+
+async function disconnect() {
+  storeSession.actor.send({type: 'c0ckp1t.disconnect'});
+}
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+function init() {
+  logger.info("init")
+}
+
+onMounted(async () => { init() })
+
+</script>
+
+
+<template>
+<div class="ws-server">
+
+<div class="row mb-3">
+  <div class="input-group">
+    <span class="input-group-text">Host</span>
+    <input type="text" v-model="state.hostname" name="hostname" class="form-control">
+  </div>
+  <div class="input-group">
+    <span class="input-group-text">Port</span>
+    <input type="text" v-model="state.port" name="port" class="form-control">
+  </div>
+  <div class="input-group">
+    <span class="input-group-text">Endpoint</span>
+    <input type="text" v-model="state.endpoint" name="endpoint" class="form-control">
+  </div>
+  <div class="input-group">
+    <span class="input-group-text">Username</span>
+    <input type="text" v-model="state.username" name="username" class="form-control">
+  </div>
+  <div class="input-group">
+    <span class="input-group-text">Password</span>
+    <input type="password" v-model="state.password" name="password" class="form-control">
+  </div>
+</div>
+
+<div class="row mb-3">
+  <div class="input-group">
+    <span class="input-group-text">URL</span>
+    <!-- URL will have to be filled in using JavaScript -->
+    <input type="text" v-model="url" readonly class="form-control">
+  </div>
+  <div class="input-group">
+    <span class="input-group-text">Connection State</span>
+    <!-- Connection state will also need to be managed with JavaScript -->
+    <input type="text" v-model="connStateString" readonly class="form-control" :class="{'bg-success': connStateString === 'ONLINE'}">
+  </div>
+  <div class="input-group">
+    <span class="input-group-text">Session State</span>
+    <!-- Connection state will also need to be managed with JavaScript -->
+    <input type="text" v-model="storeSession.stateText" readonly class="form-control" >
+  </div>
+  <span class="" v-if="storeSession.errorMessage !== ''">Error Reason: {{storeSession.errorMessage}}</span>
+</div>
+
+<div class="row">
+  <div class="btn-group" role="group" aria-label="Basic example">
+    <button class="btn btn-primary me-1" @click="connect" :disabled="storeSession.isConnected">Connect</button>
+    <button class="btn btn-warning me-1" @click="disconnect" :disabled="!storeSession.isConnected">Disconnect</button>
+
+
+
+  </div>
+  <span class="">Retry Enabled: {{local.retryEnable}}</span>
+  <span class="" v-if="local.retries !== 0">Retries: {{local.retries}}</span>
+</div>
+
+</div>
+
+</template>
+
+
+<style scoped>
+.input-group-text {
+  min-width:100px;
+}
+
+.input-group-text-lg {
+  min-width: 150px;
+}
+
+</style>

package/css/Makefile

@@ -0,0 +1,10 @@
+# https://cdnjs.com/libraries/font-awesome
+FONTAWESOME_URL=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1
+download-fontawesome-css:
+	#curl  $(FONTAWESOME_URL)/css/brands.min.css -o fontawesome/brands.min.css
+	#curl  $(FONTAWESOME_URL)/css/fontawesome.min.css -o fontawesome/fontawesome.min.css
+	#curl  $(FONTAWESOME_URL)/css/regular.min.css -o fontawesome/regular.min.css
+	#curl  $(FONTAWESOME_URL)/css/solid.min.css -o fontawesome/solid.min.css
+	curl  $(FONTAWESOME_URL)/webfonts/fa-brands-400.woff2 -o webfonts/fa-brands-400.woff2
+	curl  $(FONTAWESOME_URL)/webfonts/fa-regular-400.woff2 -o webfonts/fa-regular-400.woff2
+	curl  $(FONTAWESOME_URL)/webfonts/fa-solid-900.woff2 -o webfonts/fa-solid-900.woff2

package/css/README.md

@@ -0,0 +1,25 @@
+
+# Sizes
+
+* 228K bootstrap.min.css
+* 572  solid.min.css
+* 19K  brands.min.css
+* 79K  fontawesome.min.css
+
+# Bootstrap 5
+
+* https://cdnjs.com/libraries/bootstrap
+* https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css
+* https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css.map
+
+# Fontawesome
+
+* https://cdnjs.com/libraries/font-awesome
+* https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/fontawesome.min.css
+* https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/solid.min.css
+* https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/brands.min.css
+* https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css
+* https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/svg-with-js.min.css
+* https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/fontawesome.min.js
+* https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-brands-400.ttf
+