vue项目使用socket.io-client

vue项目使用socket.io-client客户端

安装socket.io-client模块
npm install socket.io-client --save

新建一个js文件，配置socket：

import Vue from 'vue';
import io from 'socket.io-client';		//引入socket.io-client

export default new Vue({
	data: {
		hasRealAlarm: false,
		socket: null,
		nInstance: null,
	},
	methods: {
		switchRealAlarm(is) {
			this.hasRealAlarm = is;
		},
		initSocket() {
			const _this = this;
			const socket = io('http://192.168.1.242:8360/');		//路径
			this.socket = socket;
			// console.log('初始化：socket', socket);
			this.socket.on('connect', (data) => {
				console.log('open:', data);
				const userName = {
					userName: this.getuserName(),		//获取登录缓存的用户
				};
				console.log('userName:', userName);
				if (this.getuserName() !== null) {
					socket.emit('addUser', userName);		//推送用户账号给后端socket
				}
			});

			this.socket.on('close', () => {
				console.log('socket连接关闭');
			});

			/* Listeners */
			this.socket.on('alarmToWeb', (data) => {		
				// console.log('后端推送的实时告警信息', data);
				console.log('alarmToWeb：socket', data);
				_this.$emit('newAlarms', data);			//触发当前实例上的事件。data传给监听器回调。
				this.newAlarmsArrive(data);
			});

			this.socket.on('AccessResponseToWeb', (data) => {
				console.log('AccessResponseToWeb：socket', data);
				_this.$emit('AccessResponseToWeb', data);
				this.newDoorArrive(data);
				// this.newAlarmsArrive(data);
				// _this.$on('newAlarms', (data2) => {
				// 	// console.log('alarmToWeb88：socket', data2);
				// 	// console.log('neAlarms告警信息: ', data2);
				// });
				// console.log('实时告警信息到达', data);
			});

			// 试用期使用时长
			this.socket.on('lisenceEndToWeb', (data) => {
				console.log('试用期数据', data);
				this.$notify({
					title: '提示',
					message: `授权码结束时间为：${data.endDate}，剩余天数：${data.remainingDays}`,
					type: 'warning',
					position: 'bottom-right',
				});
			});

			this.socket.on('freshDataToWeb', (data) => {
				// console.log('设备收到的新数据', data);
				// alert(data);
			});

			_this.$on('close', () => {
				console.log('socket-close');
				this.socket.close();
			});
			/* Listeners */
		},

		newAlarmsArrive(data) {
			const _this = this;
			console.log('index-发生告警8：', data);
			//  confirmTitle = '提醒'
			let alarmInfo;
			let alarmType;
			if (data.state === '告警') {
				alarmType = 'error';
				alarmInfo = `${data.areaName}的${data.devName}发生了${data.alarmName}，告警级别为：${data.alarmType}`;
			} else {
				alarmType = 'success';
				alarmInfo = `${data.areaName}的${data.devName}的${data.alarmName}，告警已解除`;
			}
			// console.log('接收到告警信息数据：', alarmInfo);
			// Notification.closeAll();
			if (this.nInstance !== null) {
				this.nInstance.close();
			}
			this.nInstance = this.$notify({
				title: '提醒',
				type: alarmType,
				dangerouslyUseHTMLString: true,
				message: `<strong>${alarmInfo}</strong>`,
				position: 'bottom-right',
				duration: 0,
				onClick() {
					_this.$router.push('/alarm');
					console.log('点击进入告警页面');
					this.close();
					_this.nInstance = null;
				},
				onClose() {
					console.log('刷新设备数据');
					_this.nInstance = null;
				},
			});
		},
		newDoorArrive(data) {
			const _this = this;
			// console.log('index-发生告警8：', data);
			//  confirmTitle = '提醒'
			let alarmInfo;
			let alarmType;
			if(data.opCode == 6) {
				if(data.errCode == 0) {
					alarmType = 'success';
					alarmInfo = `设置${data.devName}设备成功`;
				} else if(data.errCode == 1) {
					alarmType = 'error';
					alarmInfo = `设置${data.devName}设备出错，提示：不支持的命令请求`;
				} else if(data.errCode == 2) {
					alarmType = 'error';
					alarmInfo = `设置${data.devName}设备出错，提示：参数错误`;
				} else if(data.errCode == 3) {
					alarmType = 'error';
					alarmInfo = `设置${data.devName}设备出错，提示：重复操作`;
				} else if(data.errCode == 4) {
					alarmType = 'error';
					alarmInfo = `设置${data.devName}设备出错，提示：资源忙或不足`;
				} else if(data.errCode == 5) {
					alarmType = 'error';
					alarmInfo = `设置${data.devName}设备出错，提示：通讯超时`;
				}
			} else if(data.opCode == 8) {
				if(data.errCode == 0) {
					alarmType = 'success';
					alarmInfo = `添加${data.devName}权限成功`;
				} else if(data.errCode == 1) {
					alarmType = 'error';
					alarmInfo = `添加${data.devName}权限出错，提示：不支持的命令请求`;
				} else if(data.errCode == 2) {
					alarmType = 'error';
					alarmInfo = `添加${data.devName}权限出错，提示：参数错误`;
				} else if(data.errCode == 3) {
					alarmType = 'error';
					alarmInfo = `添加${data.devName}权限出错，提示：重复操作`;
				} else if(data.errCode == 4) {
					alarmType = 'error';
					alarmInfo = `添加${data.devName}权限出错，提示：资源忙或不足`;
				} else if(data.errCode == 5) {
					alarmType = 'error';
					alarmInfo = `添加${data.devName}权限出错，提示：通讯超时`;
				}
			} else if(data.opCode == 9) {
				if(data.errCode == 0) {
					alarmType = 'success';
					alarmInfo = `删除${data.devName}权限成功`;
					this.$message({
						message: '删除成功',
						type: 'success',
					});
				} else if(data.errCode == 1) {
					alarmType = 'error';
					alarmInfo = `删除${data.devName}权限出错，提示：不支持的命令请求`;
				} else if(data.errCode == 2) {
					alarmType = 'error';
					alarmInfo = `删除${data.devName}权限出错，提示：参数错误`;
				} else if(data.errCode == 3) {
					alarmType = 'error';
					alarmInfo = `删除${data.devName}权限出错，提示：重复操作`;
				} else if(data.errCode == 4) {
					alarmType = 'error';
					alarmInfo = `删除${data.devName}权限出错，提示：资源忙或不足`;
				} else if(data.errCode == 5) {
					alarmType = 'error';
					alarmInfo = `删除${data.devName}权限出错，提示：通讯超时`;
				}
			}
			
			// console.log('接收到告警信息数据：', alarmInfo);
			// Notification.closeAll();
			if (this.nInstance !== null) {
				this.nInstance.close();
			}
			this.nInstance = this.$notify({
				title: '提醒',
				type: alarmType,
				dangerouslyUseHTMLString: true,
				message: `<strong>${alarmInfo}</strong>`,
				position: 'bottom-right',
				duration: 0,
				onClose() {
					console.log('刷新设备数据');
					_this.nInstance = null;
				},
			});
		}
	},
});

vue文件如何获取js文件接收到的后端推送过来的数据：

<script>
import EventBus from '../utils/Eventbus';
export default {
	data() {
		return {}
	}
	created() {
		EventBus.$on('newAlarms', (data) => {		//使用vue监听事件
				console.log('newAlarms',data)
		});
	},
}
</script>