<!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>