webchat_vue/src/views/WebsocketTest.vue

<template>
  <div>
    <input v-model="message">
    <button @click="send">发消息</button>
    <div v-html="html">

    </div>
  </div>
</template>

<script>
export default {
  name: "WebsocketTest",
  data () {
    return {
      path:"ws://1ce51be55193.ngrok.io/ws/",
      socket:"",
      message:'',
      html:''
    }
  },
  mounted () {
    // 初始化
    this.init()
  },
  methods: {
    init: function () {
      if(typeof(WebSocket) === "undefined"){
        alert("您的浏览器不支持socket")
      }else{
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open: function () {
      console.log("socket连接成功")
    },
    error: function () {
      console.log("连接错误")
    },
    getMessage: function (msg) {
      console.log(msg.data)
      this.html = this.html+"<div>"+msg.data+"</div>"
    },
    send: function () {
      this.socket.send(this.message)
    },
    close: function () {
      console.log("socket已经关闭")
    }
  },
  destroyed () {
    // 销毁监听
    this.socket.onclose = this.close
  }
}
</script>

<style>

</style>