weex websocket鏈接遠程控制

<template>
  <div style="justify-content:center">
  <div class="example">
      <text class="label">紅燈</text>
      <switch @change="onchange"></switch>
      <!--<switch @change="onchange"  v-if='ch' checked='true'></switch>-->
      <!--<switch @change="onchange"  v-if="ch1" checked='false'></switch>-->
      <text class="info">{{checked}}</text>
    </div>

     <div class="example">
      <text class="label" >黃燈</text>
      <switch @change="onchange2"></switch>
      <!--<switch @change="onchange2" v-if='ch3' checked='true' ></switch>-->
      <!--<switch @change="onchange2"  v-if='ch4' checked='false'></switch>-->
      <text class="info">{{checked2}}</text>
    </div>

     <div class="example">
      <text class="label" >綠燈</text>
      <switch @change="onchange1"></switch>
      <!--<switch @change="onchange1" v-if='ch5' checked='true'></switch>-->
      <!--<switch @change="onchange1" v-if='ch6' checked='false' ></switch>-->
      <text class="info">{{checked1}}</text>
    </div>
    
      <div class="controls">
        <text class="button" @click="sing" @touchstart="start" @touchend="end">蜂鳴</text>
      </div>
      
      <button class="button" @click="connect">重連</button>
  </div>
</template>

<script>

  var websocket = weex.requireModule('webSocket')
  // const modal = weex.requireModule('modal');
  
  
  export default {
    data () {
      return {
        ch:'',
        ch1:'',
        ch3:'',
        ch4:'',
        ch5:'',
        ch6:'',
        checked: '',
        checked1: '',
        checked2: '',
        checked3:0,
        msg:'',
        a0:'',
        a1:'',
        a2:'',
        a3:''
      }
    },
    created () {
       websocket.WebSocket('ws://10.132.213.239:8888/plc/demo');
       websocket.onopen = (e)=>
        {
          this.send('{"act":"load","ch":"dev:plc:001","data":{}}');
          console.log(e,111);
        }
        websocket.onmessage = (e)=>
        {
          let ar=this.transform(e.data);
          console.log(ar,"43434")
          if(ar.act=='cmd'){
            return
          }else if(ar.act=="load"){
          // 得到狀態m碼 
          this.msg = ar.data.status_code;
          console.log(this.transform(e.data),222,this.msg);
          console.log(this.msg)
          this.split(this.msg);
          }
        }
        websocket.onerror = (e)=>
        {
          this.onerrorinfo = e.data;
          console.log(e,333);
          websocket.WebSocket('ws://10.132.213.239:8888/plc/demo');
        }
        websocket.onclose = (e)=>
        {
          this.onopeninfo = '';
          this.onerrorinfo = e.code;
          console.log(e,444);
           websocket.WebSocket('ws://10.132.213.239:8888/plc/demo');
        }
        
    },
    methods: {
      onchange (event) {
        this.checked = event.value;
        // this.toast('紅燈',this.checked);
        this.send('{"act":"cmd","ch":"dev:plc:001","data":{"status_code":'+'"'+this.transform1(this.checked)+this.transform1(this.checked1)+this.transform1(this.checked2)+this.checked3+'"'+'}}')
      },
       onchange1 (event) {
        this.checked1 = event.value;
        // this.toast('黃燈',this.checked2);
         this.send('{"act":"cmd","ch":"dev:plc:001","data":{"status_code":'+'"'+this.transform1(this.checked)+this.transform1(this.checked1)+this.transform1(this.checked2)+this.checked3+'"'+'}}')
      },
       onchange2 (event) {
        this.checked2 = event.value
        // this.toast('綠燈',this.checked1);
        this.send('{"act":"cmd","ch":"dev:plc:001","data":{"status_code":'+'"'+this.transform1(this.checked)+this.transform1(this.checked1)+this.transform1(this.checked2)+this.checked3+'"'+'}}')
   
      },
      sing(){
        // console.log('dianjile點擊了 ')
      },
      judge(val){
        if(val){
          return '開'
        }else{
          return '關'
        }
      },
      toast(val1,val){
         modal.toast({
          message:val1+': '+this.judge(val),
          duration:1
        })
      },
      send(val){
        websocket.send(val);
      },
      start(){
         console.log("anxia按下");
         this.checked3=1;
         this.send('{"act":"cmd","ch":"dev:plc:001","data":{"status_code":'+'"'+this.transform1(this.checked)+this.transform1(this.checked1)+this.transform1(this.checked2)+this.checked3+'"'+'}}')
      },
      end(){
        console.log("songkai鬆開");
        this.checked3=0;
        this.send('{"act":"cmd","ch":"dev:plc:001","data":{"status_code":'+'"'+this.transform1(this.checked)+this.transform1(this.checked1)+this.transform1(this.checked2)+this.checked3+'"'+'}}')
      },
      transform(val){
      return  JSON.parse(val);
      },
      transform1(val){
        if(val==true){
          return 1
        }else{
          return 0
        }
      },
      connect(){
        websocket.WebSocket('ws://10.132.213.239:8888/plc/demo');
       websocket.onopen = (e)=>
        {
          this.send('{"act":"load","ch":"dev:plc:001","data":{}}');
          console.log(e,111);
        }
      },
      
      
      
      //
      split(val){
         let a=val.split('');
            this.a0=a[0];
            this.a1=a[1];
            this.a2=a[2];
            this.a3=a[3];
          if(this.a0==1){
            this.checked=true;
            this.ch=true;
            this.ch1=false;
          }else{
            this.checked=false;
            this.ch1=true;
            this.ch=false;
          };
           if(this.a1==1){
            this.checked2=true;
            this.ch3=true;
            this.ch4=false;
          }else{
            this.checked2=false;
            this.ch3=false;
            this.ch4=true;
          };
           if(this.a2==1){
            this.checked1=true;
            this.ch5=true;
            this.ch6=false;
          }else{
            this.checked1=false;
            this.ch5=false;
            this.ch6=true;
          }

      }
    }
  }
</script>

<style scoped>
  .example {
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 60px;
  }
  .label {
    font-size: 45px;
    line-height: 60px;
    width: 350px;
    color: #666;
    text-align: right;
    margin-right: 20px;
  }
  .info {
    font-size: 30px;
    line-height: 60px;
    color: #BBB;
    margin-left: 10px;
  }
  .controls {
    margin-top: 80px;
    flex-direction: row;
    justify-content: center;
  }
  .button {
    width: 250px;
    color: #888888;
    text-align: center;
    font-size: 50px;
    padding-top: 16px;
    padding-bottom: 16px;
    border-width: 2px;
    border-style: solid;
    border-color: #D0D0D0;
    background-color: #F8F8F8; 
  }
  
</style>

運行結果: