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

<template>
  <div class="hello">
    <h1>Demo Message Client UI v1</h1>
    <p>
      <button @click="connect">connect</button>
      <input type="text" v-model="url">
    </p>
    <ul>
      <transition-group name="fade">
        <li v-for="(client,i) in clients" :key="i">
          <div> isConnected {{ client.socket.connected }} <a href="#" @click.prevent="disconnect(i)">disconnect</a> </div>
        </li>
      </transition-group>
    </ul>
  </div>
</template>

<script lang="ts">
import { TestSocketIoClient } from "../assets/js/__transport.socketio"
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class UiClient extends Vue {
  @Prop() private msg!: string;
  
  clients: TestSocketIoClient[] = [];
  url = 'http://swopt.com:3011';

  disconnect(idx: number) {
    console.info(idx)
    this.clients[idx].disconnect()
  }

  connect(): void {
    const client = new TestSocketIoClient()
    client.connect(this.url)
    this.clients.push(client)
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fade-enter-active, .fade-leave-active {
  /* transition: translate scale opacity 0.5s ease-out; */
  transition: all 0.3s ease-out;
}
.fade-enter, .fade-leave-to {
  transform: scale(0.5) translateY(-49px) translateX(-103px);
  box-shadow: none;
  opacity: 0;
}

button + button {
  margin-left: 1em;
}
ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
ul li {
  list-style: none;
  box-shadow: #989795a6 1px 3px 13px;
  /* border: 2px solid gray; */
  margin: .2em;
  display: inline-block;
  width: 200px;
  height: 100px;
  border-radius: .5em;
  padding: 10px;
}
</style>