web端的webSocket 和 uniapp 端的webSocket 实现方式

web端的webSocket

<template>
  <div>
    <!--15  是关闭  255是打开-->
    <el-switch
      v-model="item.devStatus"
      active-color="#ff060c"
      inactive-color="#621214"
      active-text="开机"
      inactive-text="关机"
      @change="updateStatus(item)"
    >
    </el-switch>
  </div>
</template>
<script>
  import { updateDevStatus } from '@/api/food/myFarm/myFarm'
  export default {
    name: 'ControlWebsocket',
    props: {
      item: Object
    },
    watch: {
      item() {
        this.destroy()
        this.init()
      }
    },
    data() {
      return {
        websocket: null,
      }
    },
    created() {
      this.init();
      if(this.item.devStatus === 255) {
        this.item.devStatus = true
      } else if(this.item.devStatus === 15 || this.item.devStatus === 0) {
        this.item.devStatus = false
      }
      console.log('this.item.devStatus', this.item.devStatus)
    },
    destroyed() {
      this.destroy()
    },
    methods: {
      // 更新设备控制状态
      updateStatus(row) {
        console.log('row', row.devStatus)
        updateDevStatus(row.serialNumber, row.address, row.aisle, row.devStatus, row.collectionPointNumber).then(() => {
          this.$message.success('修改控制设备成功！');
        }).catch(() => {
          this.$message.info('修改控制设备失败！');
        })
      },
      destroy() {
        this.websocket.onclose()
        this.websocket = null
      },
      init() {
        this.initWebSocket()
      },
      initWebSocket() { // 初始化weosocket
        // this.websocket = new WebSocket('ws://192.168.0.126:8805/pushDeviceData')
        this.websocket = new WebSocket('ws://39.108.97.199:8805/pushDeviceData')
        this.websocket.onopen = this.wsOnOpen
        this.websocket.onerror = this.wsOnError
        this.websocket.onmessage = this.wsOnMessage
        this.websocket.onclose = this.wsClose
      },
      wsOnOpen() {
        this.wsSend(this.item['serialNumber'] + this.item['collectionPointNumber'] + this.item['address'] + this.item['aisle'])
      },
      wsSend(agentData) { // 数据发送
        this.websocket.send(agentData)
      },
      wsOnError() { // 错误
      },
      wsOnMessage(e) { // 数据接收
        const res = JSON.parse(e.data)
        console.log('res', res.value)
         if(res.value == 255) {
           this.item.devStatus = true
         } else if(res.value == 15 || res.value == 0) {
           this.item.devStatus = false
         }
      },
      wsClose() { // 关闭
      },
    }
  }
</script>

webSocket的四部曲

uni-webSocket

<template>
  <view>
		<view v-if="isShowPicture">
		  <!--0是离线 15是关闭  255是打开  -->
			<block v-if="item.devStatus===0">
				<image style="width: 80rpx;height: 80rpx;margin-left: 180rpx;margin-top: -44rpx;position:absolute;" src="@/static/dmaier/image/equipment/shutDown.png" @tap="showSwitch(item)"></image>			
			</block>
			<block v-else-if="item.devStatus===15">
				<image style="width: 80rpx;height: 80rpx;margin-left: 180rpx;margin-top: -44rpx;position:absolute;" src="@/static/dmaier/image/equipment/offline.png" @tap="showSwitch(item)"></image>			
			</block>
			<block v-else-if="item.devStatus===255">
				<image style="width: 80rpx;height: 80rpx;margin-left: 180rpx;margin-top: -44rpx;position:absolute;" src="@/static/dmaier/image/equipment/bootUp.png" @tap="showSwitch(item)"></image>			
			</block>
		</view>
  	<view v-if="isShowText">
			<view style="position: absolute; right: 0; top: 16rpx; width: 70rpx;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #00aa7f;" v-if="item.devStatus===255">开机</view>
			<view style="position: absolute; right: 0; top: 16rpx; width: 70rpx;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #00aa7f;" v-else-if="item.devStatus===15">关机</view>
			<view style="position: absolute; right: 0; top: 16rpx; width: 70rpx;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #999999;"  v-else-if="item.devStatus===0">离线</view>
		</view>
  </view>
</template>
<script>
  export default {
    name: 'ControlWebsocket',
    props: {
      item: {
				type: Object,
				required: true
			},
			// 显示隐藏控制设备的图片
			isShowPicture: {
				type: Boolean,
				default: false
			},
			// 显示隐藏控制设备的文字
			isShowText: {
				type: Boolean,
				default: false
			}
    },
    watch: {
      item() {
				this.close()
				this.connect()
      }
    },
		onUnload() {
			if (this.socketTask && this.socketTask.close) {
				this.socketTask.close()
			}
		},
    data() {
      return {
        websocket: null,
				socketTask: false,
      }
    },
    created() {
			this.connect()
    },
    destroyed() {
			this.close()
    },
    methods: {
			connect() {
				this.socketTask = uni.connectSocket({
					url: 'ws://'+ this.$params.websocketHost +'/pushDeviceData',
					data() {
						return {}
					},
					// #ifdef MP
					header: {
						'content-type': 'application/json'
					},
					// #endif
					// #ifdef MP-WEIXIN
					method: 'GET',
					// #endif
					success(res) {
						// 这里是接口调用成功的回调，不是连接成功的回调，请注意
					},
					fail(err) {
						// 这里是接口调用失败的回调，不是连接失败的回调，请注意
					}
				})
				this.socketTask.onOpen((res) => {
					this.send(this.item['serialNumber'] + this.item['collectionPointNumber'] + this.item['address'] + this.item['aisle'])
				})
				this.socketTask.onError((err) => {
				})
				this.socketTask.onMessage((res) => {
					if(!JSON.parse(res.data)) return
					const result = JSON.parse(res.data)
					this.item.devStatus = +result.value
				})
				this.socketTask.onClose((res) => {
					this.socketTask = false
				})
			},
			send(agentData) {
				this.socketTask.send({
					data: agentData,
					success(res) {
					},
					fail(err) {
					}
				})
			},
      // 更新设备控制状态
      showSwitch(item){
      	if(item.devStatus==0){
      		item.devStatus = true;
      	}else if(item.devStatus==15){
      		item.devStatus = true;
      	}else if(item.devStatus==255) {
      		item.devStatus = false;
      	}
      	uni.request({
      		url: `${this.$params.localHost}/dmaier-iot/equipment/pushDateToDev?endDevNo=${item.serialNumber}&addr=${item.address}&reg=${item.aisle}&switchV=${item.devStatus}&pointNo=${item.collectionPointNumber}`,
      		method: 'POST',
      		header: {'Blade-Auth' : this.$params.token},
      		sslVerify: false,
      		success: (res) => {
      			 uni.showToast({
      			 	title: '操作成功！',
							duration: 1000,
							icon: "none"
      			 })
      		}
      	})
      }
    }
  }
</script>