websoclet_client_test.html

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template</title>
<!--CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<style>
</style>
<!-- load JavaScripts-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.js"></script>
</head>
<body>
<section class="section" id="app">
    <div class="container">
        <button v-on:click="matching">Matching Test</button>
        <br><br>
        <img v-show='uploadedImage' :src="uploadedImage">
        <br>
        <input type="file" v-on:change="onFileChange">
        <br><br>
        <button v-on:click="judgment">Judgment Test</button>
    </div>
    <br>
    <p v-for="text in messages">{{text}}</p>
</section>

<script>
const vm = new Vue({
    el: '#app',
    data: {
        messages: [],
        uploadedImage: '',
        ws: new WebSocket("ws://localhost:7532/")
    },
    mounted: function () {
        // WebSocketのコネクション開いた初回の動作
        this.ws.onopen = () => {
        }

        // サーバからWebSocketコネクション経由でなんか来た時の動作
        this.ws.onmessage = (evt) => {
            this.messages.push(evt.data)
        }
    },
    methods: {
        //マッチング開始時に送るjson
        matching: function() {
            json = {
                "type" : "Matching"
            }
            this.ws.send(JSON.stringify(json))
        },
        //判定開始時に送るjson
        judgment: function() {
            json = {
                "type" : "Judgment"
            }
            //画像をjsonに追加
            image = this.uploadedImage;
            json.image = image.replace(/^.*,/, '');
            this.ws.send(JSON.stringify(json))
        },
        //以下2つは画像アップロード用メソッド
        onFileChange(e) {
            let files = e.target.files || e.dataTransfer.files;
            this.createImage(files[0]);
        },
        createImage(file) {
            let reader = new FileReader();
            reader.onload = (e) => {
                this.uploadedImage = e.target.result;
            };
            reader.readAsDataURL(file);
        },
    }
})
</script>
</body>
</html>