[Vue.js] - HTML5 WebSocket(웹 소켓) 소스코드 및 데모 사이트

웹소켓 클라이언트가 필요해서 bootstrap+vuejs로 간단하게 만들어봤습니다.

 

jQuery에서 vuejs로 넘어오면서 익숙하지 않은게 힘들었는데, 조금씩 익숙해지니 개발하는데 훨씬 편리함을 느끼네요.

 

웹소켓 또한 이벤트핸들러와 메소드로 간단히 만들 수 있습니다.

 

핵심 부분은 아래가 전부입니다.

 

  ...
  //소켓 연결
  this.socket = new WebSocket(this.address)
  ...
  this.socket.onopen = 소켓 연결 이벤트 헨들러
  ...
  this.socket.onerror = 소켓 에러 이벤트 헨들러
  ...
  this.socket.onmessage = 데이터 수신 이벤트 헨들러
  ...
  this.socket.onclose = 소켓 해제 이벤트 헨들러
  ...
  // 소켓 데이터 전송
  this.socket.send("메시지") 
  ...
  // 소켓 종료
  this.socket.close()

 

아래는 자바 스크립트 전체 소스코드 입니다.

 

  methods: {
    connect () {
      if (this.socket === undefined || this.socket.readyState === 3) {
        this.socket = new WebSocket(this.address)
        this.socket.onopen = () => {
          this.logs.push({ type: 'INFO', msg: 'CONNECTED' })
          this.disabled = false
        }
        this.socket.onerror = () => {
          this.logs.push({ type: 'ERROR', msg: 'ERROR:' })
        }
        this.socket.onmessage = ({ data }) => {
          this.logs.push({ type: 'RECV', msg: 'RECV:' + data })
        }
        this.socket.onclose = (msg) => {
          this.logs.push({ type: 'ERROR', msg: 'Closed (Code: ' + msg.code + ', Message: ' + msg.reason + ')' })
        }
      }
    },
    sendMessage () {
      if (this.selected === 'plain') {
        this.logs.push({ type: 'SENT', msg: 'SENT:' + this.message })
        this.socket.send(this.message)
      } else if (this.selected === 'json') {
        this.logs.push({ type: 'SENT', msg: 'SENT:' + JSON.stringify(this.json) })
        this.socket.send(JSON.stringify(this.json))
      }
    },
    disconnect () {
      if (this.socket.readyState === 1) {
        this.socket.close()
        this.logs.push({ type: 'INFO', msg: 'DISCONNECTED' })
        this.disabled = true
      }
    }
  }

 

Vue를 포함한 모든 소스 코드는 깃허브에 있습니다.

깃허브 주소: github.com/lehdqlsl/vue-websocket-client

 

---

실제 서버에 올려서 구동시킨 데모 화면입니다. 아래 URL에 누르면 해당 웹페이지로 접속 가능합니다.

접속주소: vue-websocket.ga/

 

그리고 Location 부분에 아래 에코서버에 연결하여 간단하게 테스트해 볼 수 있습니다.

wss://echo.websocket.org