pYyQxj

index.html

<div id="app">
  <button @click="disconnect" v-if="status === 'connected'">Disconnects </button>
  <button @click="connect" v-if="status === 'disconnected'">Connect</button> {{ status }}
  <br /><br />
  <div v-if="status === 'connected'">
    <form @submit.prevent="sendMessage" action="#">
      <input v-model="message"><button type="submit">Send Message</button>
    </form>
    <ul id="logs">
      <li v-for="log in logs" class="log">
        {{ log.event }}: {{ log.data }}
      </li>
    </ul>
  </div>
</div>

pyyqxj.markdown

pYyQxj

A Pen by Martin Beeby on CodePen.

License.

script.js

 var app = new Vue({
  el: "#app",
  data: {
    message: "",
    logs: [],
    status: "disconnected" },

  methods: {
    connect: function connect() {var _this = this;
      this.socket = new WebSocket("wss://kv05pv9tf9.execute-api.eu-west-1.amazonaws.com/dev");
      this.socket.onopen = function () {
        _this.status = "connected";
        _this.logs.push({ event: "Connected to", data: 'wss://kv05pv9tf9.execute-api.eu-west-1.amazonaws.com/dev' });


        _this.socket.onmessage = function (_ref) {var data = _ref.data;
          _this.logs.push({ event: "Recieved message", data: data });
        };
      };
    },
    disconnect: function disconnect() {
      this.socket.close();
      this.status = "disconnected";
      this.logs = [];
    },
    sendMessage: function sendMessage(e) {
      var ob = `{"action":"sendmessage","data": "${this.message}"}`
      this.socket.send(ob);
      this.logs.push({ event: "Sent message", data: this.message });
      this.message = "";
    } } });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>