二维码条形码 websocket长连接

最新推荐文章于 2024-08-31 08:52:40 发布

陌上浮屠

最新推荐文章于 2024-08-31 08:52:40 发布

阅读量919

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/weixin_38788947/article/details/79033298

版权

h5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

VUE条形码生成插件
https://github.com/lindell/vue-barcode
这里写图片描述


    <barcode v-bind:value="barcodeValue" format="CODE128">
      Show this if the rendering fails.
    </barcode>

二维码再index.html文件中引入；

//index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>code</title>
    <script src="./static/qrcode.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


//vue文件
<template>
  <div class="qart">
    <!--<input v-model="barcodeValue" /><br>-->
    <barcode v-bind:value="barcodeValue" format="CODE128">
      Show this if the rendering fails.
    </barcode>
    <div id="qrcode" ref="qrcode" >
    </div>
    <input type="text" id="getval" v-model="barcodeValue" value="" placeholder="修改这个值改变二维码">


    <div id="sse">
      <a href="javascript:void(0)" @click="WebSocketTest">运行 WebSocket</a>

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

<script>
  import VueBarcode from 'vue-barcode';
  export default {
    components: {
      'barcode': VueBarcode
    },
    data() {
      return {
        i:false,
        barcodeValue: 'test',
      }
    },
    created() {

    },
    mounted() {
      this._getQart()
    },

    methods: {

      _getQart: function() {

        if(this.i==false){
          var qrcode = new QRCode(document.getElementById("qrcode"), {
            width : 200,//设置宽高
            height : 200
          });
          document.getElementById("getval").onkeyup =function(){
            qrcode.makeCode(document.getElementById("getval").value);
          };

          qrcode.makeCode(document.getElementById("getval").value);

        }
        this.i = true;
      },
      WebSocketTest:function ()
      {
        if ("WebSocket" in window)
        {
          alert("您的浏览器支持 WebSocket!");

          // 打开一个 web socket
          var ws = new WebSocket("ws://10.133.254.29:8080/websocket/chat");

          ws.onopen = function()
          {
            // Web Socket 已连接上，使用 send() 方法发送数据
            ws.send("发送数据");
            alert("数据发送中...");
          };

          ws.onmessage = function (evt)
          {
            var received_msg = evt.data;
            alert("数据已接收...");
          };

          ws.onclose = function()
          {
            // 关闭 websocket
            alert("连接已关闭...");
          };
        }

        else
        {
          // 浏览器不支持 WebSocket
          alert("您的浏览器不支持 WebSocket!");
        }
      }

    }

  }




</script>



<style>
  #qrcode{
    height: 200px;
    width: 200px;
    margin: auto;
  }
</style>