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的使用

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值