2023.02.20 - webscoket基础用法

实例创建

// 创建实例，通过状态管理动态设置IP
import store from '../store';
let evaIp = store.getters.evaIp;
const websocket = new WebSocket(`${ 'http://www.baidu.com' }${evaIp?`?ip=${evaIp}`:''}`);

// 心跳机制
setInterval(() => {
	websocket.send(
		JSON.stringify({
			func: 'heartbeat'
		})
	);
}, 30000);

export default websocket;

发送逻辑

websocket.send(
		JSON.stringify({
			func: 'faceValidate',
			data: {
				...store.state.faceParams
				// faceData: uploadPic.value
			}
		})
	);

接收逻辑

// vue挂载勾子
onMounted(() => {
	websocket.addEventListener('message', (event) => {
		try {
			const data = JSON.parse(event.data);
			console.log('websocket数据', data);
			if (data.func === 'sendUserInfo') {
				// 接收用户相关信息
				store.commit('SET_USER_INFO', { ...data.data });
			} else if (data.func === 'openEvaluator') {
				// 接收评价器
				store.commit('SET_EVALUATE_PARAMS', { ...data.data });
				router.push({ path: '/evaluator' });
			} else if (data.func === 'openFaceValidate') {
				// 开始人脸核验
				store.commit('SET_FACE_PARAMS', { ...data.data });
				router.push({ path: '/verify', query: { action: true } });
			}
		} catch (error) {}
	});
});