[Vue.js] ws 모듈 사용하기

웹소켓 통신을 위해 ws 모듈 설치하기

npm install --save ws 입력

 

코드 작성

<template>
    <div id="app">
		App.vue
        <button @click="close()">close</button>
    </div>
</template>
<script>
    export default {
		components: { ..생략.. },
		data: function () {
			return { ..생략..}
		},
		created() { //화면 켜지자마자 실행되도록 함
			this.ws = new WebSocket("..생략..");
			this.ws.binaryType = 'arraybuffer';
			this.ws.onopen=()=> { //소켓 연결
				console.log('Connection Success');
				this.ws.send(..생략..)
				this.isclose = false;
			}
			this.ws.onmessage =(data)=> { //메세지 출력
				this.buffer = data.data //메세지 저장
				console.log("Saved in buffer");
				console.log(this.buffer);
			}
            this.ws.onerror =(error)=>{
				console.log('error: %s', error)
			}
            this.ws.onclose =(event)=> { //소켓 종료
				console.log('Disconneted');
				this.isclose = true;
			}
		},
        methods: {
        	close: function(event){ //버튼 클릭 시 소켓 종료
            	this.$router.push('/');
                this.ws.close();
			}
		},
        ..생략..
	}
</script>

 

npm run build 입력하여 실행하기

기능구현된 화면