front.html

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Guess through websocket</title>
  <style>
    .response {
      color: blue;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<h1>WebSocket guess Rust application</h1>

<!-- vuejs app template -->
<div id="app">
<span> Please enter a number between 1 and 10 in this field and press 'enter' </span> <br>
<input type="text" v-model="text" v-on:keyup.enter="send" style="width:40em"/> <br>
<span> The server responded: </span> <span class="response"> {{ response }} </span>
</div>

<!-- vuejs app -->
<script>
var app = new Vue({
  el: '#app',
  data: {
    text: undefined,
    response: "enter a number",
    socket: undefined,
  },
  computed: {
  },
  methods: {
    send: function () {
      this.socket.send(this.text);
    },
    openSocket: function () { // set websocket
      this.socket = new WebSocket("ws://127.0.0.1:3012/");
      this.socket.onmessage = function (event) {
        app.response = event.data // store message it in response
      }
    }
  },
})

app.openSocket(); // initialize connection

</script>

</body>
</html>