fis-client-demo/src/components/AdminCommands.vue

<template>
  <div>
      <h3>Admin Session</h3>
      <div v-for="request in requestCmds" :key="request.keyword"><button @click="sendRequest(request)">{{ request.label }} </button></div>
      <div v-for="response in responses" :key="response.cnt">{{ response.data }}</div>
  </div>
</template>

<script lang="ts">

import { Component, Prop, Vue } from 'vue-property-decorator'
import * as io from 'socket.io-client';

@Component
export default class AdminCommands extends Vue {
  @Prop() public connection;
  @Prop() public session;
  idToken: string = ''

  requestCmds = [
    { keyword: 'login', label: 'getCurrentLogins' },
    //{ keyword: 'conn',  label: 'getCurrentConnections' },
    //{ keyword: 'sub',   label: 'getSubscriptions' },
    // { keyword: 'req',   label: 'getRequests' },
    // { keyword: 'res',   label: 'getResponses' },
  ];
  
  socket = null
  responses = []
  url = 'http://localhost:3111'

  connect(){
    const socket = io.connect(this.url)
    let cnt = 0;
    socket.on('admin_response', (data) => {
      cnt++;
      this.responses.unshift({cnt, data: JSON.stringify(data,null,3)})
    })

    socket.on('connect', (ws) => {
      console.info('admin connected', ws, socket?.id)
    });

    socket.connect();
    this.socket = socket;
  }

  sendRequest(request) {
    const keyword = request.keyword
    const options = {}
    this.socket.emit('admin_request',{ request: keyword, options }, (data)=>{
      console.log({ got: data })
    })
  }

  loginDisabled(){
    if ( this.idToken == null ) return true
    if ( this.connection.socketId == null ) return true
    if ( this.session.ucpId != null ) return true
    return false
  }

  mounted(){
      this.connect()
  }

}
</script>

<style>
</style>