在称重小程序是使用 GlobalWebsoket 实现获取实时数据

• 前言
• 一、逻辑分析
• 二、实现方式
• • 1.方法整体流转分析 -- 初始化并绑定
  • • 1. onLoad
    • 1. init
    • 2. getDeviceInfo
    • 3. initWebSocket
    • 4. setProperties
  • 2.方法整体流转分析 -- 解除绑定
  • • 1. onBackPress
    • 2. remoeSubscribe
• 三、参数调用分析
• 四、请求查看
• 整体代码

前言

这里使用的 GlobalWebsoket 是封装好的,详细见

GlobalWebsoket.js 封装配置分析

一、逻辑分析

现在小程序的功能需求是当用户点击某个设备,进入到设备详情页,测试需要创建 websoket 的连接,并监听当前设备的实时数据,切换设备之后,解除上次监听的内容,重新绑定新的设备的实时数据监听

实现思路 :
设备页面打开,获取设备信息成功之后,初始化 initwebsoket ,并发送需要监听的数据
在页面离开的时候,接触所有监听,但是并不断掉 websoket 的连接,只是接触绑定的监听
切换设备后,获取设备信息成功之后绑定新的设备需要监听的内容

二、实现方式

1.方法整体流转分析 – 初始化并绑定

当页面打开,执行 onLoad()

1. onLoad

		onLoad(option) {// console.log(option.id)this.init(option.id);this.deviceId = option.idthis.device.id = option.id},

1. init

			init(deviceId) {this.getDeviceInfo(deviceId);},

2. getDeviceInfo

			getDeviceInfo(deviceId) {DeviceApi.getDevice({id: deviceId// id:'2208004'}).then(res => {console.log(res)this.maxCapacity = res.data.maxCapacity// 这里获取企业名称// this.getCustomerNameById(res.data.customerId)this.device = res.data || {}this.initWebSocket();console.log(this.device);})},

3. initWebSocket

			// 初始化 WebSocketinitWebSocket() {const app = this// 这里解除绑定别忘了 !!! 放到了点击返回按钮的时候,也就是回到列表页面// app.remoeSubscribe();// debuggerapp.subsProperties = [];//把当前设备数据里面的metadata(单据,称重...)转成jsonconst metadata = JSON.parse(app.device.metadata);app.deviceStatus = getWebsocket(`instance-editor-info-status-${app.deviceId}`,`/dashboard/device/status/change/realTime`, {deviceId: app.deviceId,},).subscribe(resp => {const {payload} = resp;app.device.state =payload.value.type === 'online' ? {value: 'online',text: '在线'} : {value: 'offline',text: '离线',};if (payload.value.type === 'online') {app.device.onlineTime = payload.timestamp;} else {app.device.offlineTime = payload.timestamp;}app.$set(app.device, 'timeStamp', moment().unix())});console.log(app.deviceStatus)/**这里的 getWebsocket 是引入的import {getWebsocket} from '@/js-sdk/socket/GlobalWebSocket.js'*/app.eventSubs = getWebsocket(`location-info-event-${app.deviceId}-${app.device.productId}`,`/dashboard/device/${app.device.productId}/events/realTime`, {deviceId: app.deviceId,},).subscribe(resp => {const {payload} = resp;}, );// app.propertiesMap = {}if (metadata.propertiesGroup && metadata.propertiesGroup.length > 0) {//获取时间戳(以秒为单位)const timeStamp = moment().unix();metadata.propertiesGroup.map(group => {let points = []let properties = {}// 这里把 properties 存了起来,方法在下面app.setProperties(group);group.properties.map(item => {points.push(item.id)properties[item.id] = item})if (!app.propertiesMap.data) {app.propertiesMap.data = {}}// app.propertiesMap.data[group.id] = properties//"$BELT_DAYBELT_SENSOR.....传递的都是这些里面的数据let str = points.join("-");// debuggerconst mSub = getWebsocket(`instance-info-property-${app.deviceId}-${app.device.productId}-${group.id}-${str}`,`/dashboard/device/${app.device.productId}/properties/realTime`, {deviceId: app.deviceId,groupId: group.id,properties: points,history: 0,},).subscribe(resp => {const {payload} = resp;const property = payload.value.property;const item = app.propertiesMap.data[group.id][property];if (item) {item.next(payload);}}, );app.subsProperties.push(mSub)})app.$set(app.propertiesMap, 'timeStamp', timeStamp)}},

4. setProperties

			setProperties(group) {group.properties.map(item => {item.listener = [];item.onSubscribe = function(callback) {item.listener.push(callback);}item.next = function(data) {item.listener.forEach(element => {element(data);});}return item;})},

2.方法整体流转分析 – 解除绑定

1. onBackPress

离开当前页面的生命周期钩子

		onBackPress(){console.log('页面返回...')// 解除绑定this.remoeSubscribe();},

2. remoeSubscribe

			remoeSubscribe() {console.log("解绑了")const app = thisconsole.log(app.deviceStatus)console.log(app.eventSubs)console.log(app.subsProperties)if (app.deviceStatus) {app.deviceStatus.unsubscribe();}if (app.eventSubs) {app.eventSubs.unsubscribe();}if (app.subsProperties.length > 0) {app.subsProperties.forEach(function(i, index) {i.unsubscribe();});}},

三、参数调用分析

这里记录调用过程中参数的输出,之后 再写

四、请求查看

请求成功后,可以看到绑定了(sub)
当点击返回按钮,可以看到解除了绑定(unsub),以及再次进入,重新绑定(sub)

整体代码

代码如下：