拍照测评使用websocket

为什么拍照测评要使用ws协议来做；

• 因为要实时 返回数据 ， 评测过程中数据能动态展示；
• 比如进度条功能 、教培评测的单字评测实时渲染

拍照测评的流程

1，获取相机和本地相册权限

uni.getSetting({
	success: (res) => {
		// 如果没有相机权限
		if (!res.authSetting["scope.camera"]) {
			uni.authorize({
				scope: 'scope.camera',
				success(res) {
					// 打开相机
					that.showCamera = true;
				},
				fail(){
					uni.showModal({
						content: '检测到您没打开获取相机功能权限，是否去设置打开？',
						confirmText: "确认",
						cancelText: '取消',
						success: (res) => {
						},
						fail(){}
					})
				}
			})
		}
	}
}）

2，页面初始化的时候，初始化websocket；

initWebSocket(){
	let url = this.$apiHub.ws + 'xxxxxxxx'
	// 链接websocket
	uni.connectSocket({
		url: url,
		header: {
			Origin: 'xxxxxxxxxxxxxxx.com'
		},
		success() {
			console.log('webSocket链接成功')
		},
		fail: err => {
			console.log('webSocket链接失败')
		}
	})
	// 打开了websocket
	uni.onSocketOpen(res => {
		this.reconnectCount = 5;
		// 使用定时函数做一个心跳机制每五秒发送一次ping，与此同时返回pong
		this.heartbeat = setInterval(() => {
			this.sendMsg('ping') // 
		}, 5000)
	});
	// websocket链接打开失败
	uni.onSocketError(res => {
		//停止发送心跳
		clearInterval(this.heartbeat)
		//如果不是人为关闭的话，进行重连
		if (!this.socketClose) {
			this.reconnect(url)
		}
	});
	// websocket链接关闭
	uni.onSocketClose(e => {
		clearInterval(this.heartbeat)
		if (!this.socketClose) {
			this.reconnect(url)
		}
	});
	// websocket接受消息，做一些处理
	uni.onSocketMessage(res => {
		if (res.data && res.data !== 'pong') {
			let resd = JSON.parse(res.data);
			if (resd.msg.progressRate) {
				this.precent = resd.msg.progressRate;
			}
		}
	})
}

3，发送消息到websocket

sendMsg(msg) {
	if(msg != 'ping'){
		// msg = JSON.stringify(msg)
	}
	// 发送的消息 msg
	try {
		uni.sendSocketMessage({
			data: msg
		})
	} catch (e) {
		// 发送消息失败-关闭链接
		uni.closeSocket()
	}
},

4，上传完图片的时候调用 sendMsg() 发送消息

let cos = new COS({
	SecretId: 'xxxx',
	SecretKey: 'xxxxx'
})
const that = this;
cos.postObject({
	Bucket: 'ccccc',
	Region: 'ap-ssss',
	Key: 'ssss/aaaaaa/' + Date.parse(new Date()) + '/' + '.png',
	FilePath: this.image
	}, function(err, data) {
		this.sendMsg(JSON.stringify(data))
	}
});