WebSocket APIs in Amazon API Gateway https://aws.amazon.com/jp/blogs/news/announcing-websocket-apis-in-amazon-api-gateway/

AwsApiGatewayWebsocket.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="section">
      <el-input type="text" v-model="input" auto-complete="off" style="width:80%;"></el-input>
    </div>
    <div class="section">
      <el-button type="button" @click="send">SEND</el-button>
      <el-button type="button" @click="disconnect">DISCONNECT</el-button>
    </div>
    <div class="section">
      <ol>
        <div v-for="item in items">
          {{ item.msg }}
        </div>
      </ol>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  conn: null,
  data() {
    return {
      input: 'Your message',
      msg: 'Hello',
      items: []
    }
  },
  mounted() {
    const that = this;
    this.conn = new WebSocket('wss://myendpoint.execute-api.ap-northeast-1.amazonaws.com/prod');
    const connection = this.conn;

    connection.onopen = function(e) {
      console.log('onopen');
      console.dir(e);
    };
    connection.onerror = function(error) {
      console.error('onerror');
      console.dir(error);
    };
    connection.onmessage = function(e) {
      console.log('onmessage');
      console.dir(e);
      if (e && e.data) {
        that.msg = e.data;
        that.items.unshift({"msg": e.data});
      }
    };
    connection.onclose = function() {
      console.log('onclose');
    };
  },
  methods: {
    send: function () {
      this.conn.send(JSON.stringify({
        "action": "sendmessage",
        "data": this.input
      }));
    },
    disconnect: function () {
      this.conn.disconnect();
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>