Vue Element Axios WebSocket

最新推荐文章于 2024-08-25 03:34:31 发布

weixin_42036146

最新推荐文章于 2024-08-25 03:34:31 发布

阅读量11

点赞数

文章标签： vue.js websocket 前端 javascript ecmascript

本文链接：https://blog.csdn.net/weixin_42036146/article/details/138631554

版权

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <!-- vue -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- element引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- element引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!--Axios-->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
  <div id="App">
    <!-- 是否禁用 :disabled="true" -->
    <input v-if="flag === '有'" :disabled="true" class="but" type="file" />
    <input v-else-if="flag === '无'" class="but" type="file" />
    <input v-else :disabled="true" class="but" type="file" />

    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
      <el-button slot="reference">hover 激活</el-button>
    </el-popover>

    <el-button type="primary" @click.prevent.stop="but1">
      button
    </el-button>
  </div>
</body>
<script>
  var vm = new Vue({
    el: "#App",
    data: {
      flag: '有',
      visible: false
    },
    created() {
      this.initWebSocket()
    },
    methods: {
      but1() {
        console.log('控制台输出')
        axios.get('https://ip.ws.126.net/ipquery')
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });

        this.$notify({
          title: '提示',
          message: 'message',
          type: 'warning',
          duration: 2000
        })
      },
      initWebSocket() {
        const _this = this
        if (typeof (WebSocket) === 'undefined') {

        } 
        else
         {
          const socketUrl = 'ws://127.0.0.1:9527/'
          this.socket = new WebSocket(socketUrl)
          this.searchDisabled = false
          // 监听socket打开
          this.socket.onopen = function () {
            console.log('浏览器WebSocket已打开')
            _this.$notify({
          title: '提示',
          message: '浏览器WebSocket已打开',
          type: 'warning',
          duration: 2000
        })
          }
          // 监听socket消息接收
          this.socket.onmessage = function (evt) {
            console.log('onmessage:' + evt.data)
            
          }
          // 监听socket错误
          this.socket.onerror = function () {
            console.log('监听socket错误')
            _this.searchDisabled = true
          }
          // 监听socket关闭
          this.socket.onclose = function () {
            console.log('WebSocket已关闭')
          }
        }
      }
    }
  })
</script>

</html>