vue2.0使用websocket的简单demo

1.首次接触websocket，花了一天多的时间寻找相关资料，参考了网络上的相关例子（https://www.cnblogs.com/qilin-3611/p/7054270.html），整理出一个简单前端、后台demo，后台demo直接使用链接中的文章的demo，下载后部署在8.0以上的tomcat，jdk为1.8

此处给出简单的前端代码：

<!-- readyState表示连接有四种状态：
CONNECTING (0)：表示还没建立连接；
OPEN (1)： 已经建立连接，可以进行通讯；
CLOSING (2)：通过关闭握手，正在关闭连接；
CLOSED (3)：连接已经关闭或无法打开； -->
<template>
  <div>
    <input type="text" v-model="text">
    <button @click="send()">发送消息</button>
    <br>
    <button @click="closeWebSocket()">关闭websocket连接</button>
    <br>
    <div>{{data}}</div>
  </div>
</template>
<script>
export default {
  name: "WebSocket",
  components: {

  },
  data() {
    return {
      text: '',
      data: '',
      websocket: null
    }
  },
  mounted() {
    if ('WebSocket' in window) {
      this.websocket = new WebSocket('ws://localhost:8080/JavaWebSocket/websocket')
      this.initWebSocket()
    } else {
      alert('当前浏览器 Not support websocket')
    }
  },
  beforeDestroy() {
    this.onbeforeunload()
  },
  methods: {
    initWebSocket() {
      //连接错误
      this.websocket.onerror = this.setErrorMessage

      // //连接成功
      this.websocket.onopen = this.setOnopenMessage

      //收到消息的回调
      this.websocket.onmessage = this.setOnmessageMessage

      //连接关闭的回调
      this.websocket.onclose = this.setOncloseMessage

      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = this.onbeforeunload
    },
    setErrorMessage() {
      this.data = "WebSocket连接发生错误" + '   状态码：' + this.websocket.readyState;
    },
    setOnopenMessage() {
      this.data = "WebSocket连接成功" + '   状态码：' + this.websocket.readyState;
    },
    setOnmessageMessage(event) {
      this.data = '服务端返回：' + event.data;
    },
    setOncloseMessage() {
      this.data = "WebSocket连接关闭" + '   状态码：' + this.websocket.readyState;
    },
    onbeforeunload() {
      this.closeWebSocket();
    },

    //websocket发送消息
    send() {
      this.websocket.send(this.text)
      this.text = ''
    },
    closeWebSocket() {
      this.websocket.close()
    }
  }
}

</script>
<style scoped>
</style>

以上代码使用不同浏览器打开，输入任意文本后，后台会返回所输入的文本到所有已经连接的浏览器，demo非常简陋，目的在于了解websocket的简单概念与简单使用，后续还会深入研究wss的使用

vue2.0使用websocket的简单demo

猜你喜欢