components/mine/Mine.vue

@@ -0,0 +1,209 @@
+<template>
+	<view class="content">
+<!-- 		<cu-custom bgColor="bg-blacks" :isBack="false">
+		    <block slot="right">
+				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image>
+			</block>
+			<block slot="right">	
+					<view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
+						<view class="cu-tag looknumber" style="margin-top: -2%;">
+							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
+						</view>
+					</view>
+			</block>
+			<block slot="right">
+					
+			</block>
+		    <block slot="content">{{address}}</block>
+			<block slot="right">
+				<view class="plus" @tap="showModal" data-target="viewModal">+</view>
+			</block>
+		</cu-custom> -->
+		<!-- 抽屉组件 -->
+		<!-- <div>
+			<drawer ref="drawer"></drawer>
+		</div>
+		<div class="plusDrawer" @tap="hideModal">
+			<plusDrawer ref="plusDrawer"></plusDrawer>
+		</div> -->
+		<view>
+			<button class="cu-btn bg-red lg" @tap="falseLogin" type="" :style="{ 'height': buttonHeight}">注销账号</button>
+		</view> 
+		
+
+		
+	</view>
+	
+	
+	
+	
+</template>
+
+<script>
+	import res from '../../common/data.json';
+	import drawer from '../../components/drawer/threeLineDrawer.vue'
+	import plusDrawer from '../../components/drawer/plusDrawer.vue';
+
+	
+	export default {
+		components: {
+			drawer: drawer,
+			plusDrawer: plusDrawer,
+
+		},
+		data:function(){
+			return{
+				toggleid:13,//12聊天通讯，13我的主页，默认13
+				badge: 22,
+				inconList:["form","favor","question","edit"],
+				modalName:null,
+				leftNavigationtitle:'我的功能分组',
+				buttonHeight:'',
+				address: '',
+				drawerList: [],
+				plusDrawerList: [],
+				
+			}
+		},created: function() {
+			this.viewUserid();
+			this.monitoringAuthority();
+			this.address = this.dataprocessing.getWindPowerStationName();
+			this.FDC=this.dataprocessing.getWindPowerStationId();
+			this.windPowerStationId =this.dataprocessing.getWindPowerStationId();
+		},
+		onHide() {
+			this.$refs.drawer.closeDrawer();
+			this.hideModal();
+		},
+		onShow(){
+			this.viewUserid();
+			this.monitoringAuthority();
+			this.address = this.dataprocessing.getWindPowerStationName();
+			this.FDC=this.dataprocessing.getWindPowerStationId();
+			this.windPowerStationId =this.dataprocessing.getWindPowerStationId();
+		},
+		methods:{
+			openDrawer:function(){
+				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList,this.leftNavigationtitle);
+			},
+			closeDrawer:function(){
+				this.drawerIsShow=false;
+			},viewUserid: function() {
+				this.plusDrawerList=uni.getStorageSync('plusList');
+			},
+			monitoringAuthority: function() {
+				this.drawerList=uni.getStorageSync('leftlist5');
+			},
+			pushWindPowerStationNameToSessionStorage(windpowerstationName) {
+				uni.setStorageSync('windpowerstationName', windpowerstationName);
+				//sessionStorage.setItem('windpowerstationName', windpowerstationName);
+				//alert("v"+ sessionStorage.getItem("windpowerstationName"));
+				//this.common.goback('/pages/index/Index');
+			},
+			getWindPowerStationNameToSessionStorage() {
+				uni.getStorageSync('windpowerstationName');
+				return uni.getStorageSync('windpowerstationName');
+			},
+			showModal(e) {
+				this.modalName = e.currentTarget.dataset.target;
+				this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
+			},
+			hideModal() {
+				this.modalName = null;
+				this.$refs.plusDrawer.hideModal(this.modalName);
+			},
+			falseLogin: function() {
+				this.removeUsernamePassword();
+				uni.navigateTo({
+				    url: '/components/login/Login'
+				});
+			},
+			removeUsernamePassword: function() {
+				uni.removeStorageSync('gyeeusername');
+				uni.removeStorageSync('gyeepassword');
+			},
+		}
+	};
+</script>
+
+<style>
+	body {
+		font-family: '方正兰亭细黑_GBK';
+		font-size: 20px;
+		color: silver;
+		background: #000;
+	}
+	
+	@font-face {
+		font-family: '方正兰亭细黑_GBK';
+		src: url(../../static/fzltxh.TTF);
+	}
+	
+	page {
+		background-color: #1f1f1f;
+		font-family: '方正兰亭细黑_GBK';
+		overflow-x: hidden;
+	}
+
+	.top {
+		width: 100%;
+		height: 130upx;
+		padding-top: 5upx;
+		background-color: #1f1f1f;
+		position: fixed;
+		top: 0px;
+		left: 0px;
+		z-index: 100;
+	}
+
+	.threeLine {
+		width: 50px;
+		height: 45px;
+		float: left;
+	}
+
+	.text {
+		width: calc(100% - 100px);
+		height: 45px;
+		float: left;
+		user-select: text;
+		-webkit-user-select: text;
+		-moz-user-select: text;
+		-ms-user-select: text;
+		color: silver;
+		line-height: 45px;
+		margin-top: 11px;
+		font-size: 18px;
+	}
+
+	.notice {
+		width: 50px;
+		height: 45px;
+		float: left;
+	}
+
+	.plus {
+		width: 30px;
+		height: 45px;
+		float: right;
+		color: white;
+		font-size: 35px;
+		line-height: 45px;
+		text-align: right;
+		margin-right: 2.5%;
+	}
+	
+	.textWindpowerstation{
+		width: 180px;
+		height: 45px;
+		float: left;
+		text-align: center;
+		margin-left: 18px;
+	}
+	.cu-btn {
+		width: 80%;
+		height: 40px;
+		margin-left: 10%;
+		margin-top: 25px;
+	}
+</style>

components/mine/chat/Chatindex.vue

@@ -0,0 +1,983 @@
+<template>
+	
+		<!-- 抽屉组件 -->
+		
+		<!-- 地图组件 -->
+		
+
+    <view>
+        <web-view :webview-styles="webviewStyles" src="https://192.168.1.105:4397/websocket/usercontroller/view?userid=admin"></web-view>
+    </view>
+		<!-- <view class="DrawerClose" :class="modalName == 'viewModal' ? 'show' : ''" @tap="hideModal"><text class="cuIcon-pullright"></text></view> -->
+	</view>
+</template>
+
+<script>
+import res from '../../../common/data.json';
+
+var _self;
+export default {
+	components: {
+       
+	},
+	data: function() {
+		return {
+			
+			conflict:false,
+			kg:true,
+			leftNavigationtitle:'预测功能分组',
+			leftbarkg:false,
+			bs_computed:'',
+			xtpl_computed:'',
+			ssxy_computed:'',
+			szxy_computed:'',
+			pld_computed:'',
+			xynd_computed:'',
+			WeatherProphethomepagebool:true,
+			toggleSwitch:false,
+			menuKey:1,
+			pointKey: 'MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0087',
+			socketTask_bracelet: '',
+			socketTask_close_bracelet: '',
+			deviceName: 'Y1-A0BC',
+			deviceNamePld: 'Y1-A0BC_PLD',
+			deviceNameBs: 'Y1-A0BC_BS',
+			deviceNameSsxy: 'Y1-A0BC_SSXY',
+			deviceNameXtpl: 'Y1-A0BC_XTPL',
+			deviceNameXynd: 'Y1-A0BC_XYND',
+			deviceNameSzxy: 'Y1-A0BC_SZXY',
+			deviceNameLng: 'Y1-A0BC_LNG',
+			deviceNameLat: 'Y1-A0BC_LAT',
+			bracelet: {
+				deviceName: '',
+				deviceNamePld: '',
+				deviceNameBs: '',
+				deviceNameSsxy: '',
+				deviceNameXtpl: '',
+				deviceNameXynd: '',
+				deviceNameSzxy: '',
+			},
+			braceletCurve: {},
+			mapBegin_1:'',
+			mapEnd_1:'',
+			mapBegin_2:'',
+			mapEnd_2:'',
+			points:[
+				{
+					latitude:'',
+					longitude:''
+				},
+				{
+					latitude:'',
+					longitude:''
+				}
+			],
+			list:{},
+			braceletCurve_SSXY: [],
+			braceletCurve_PLD: [],
+			braceletCurve_SZXY: [],
+			braceletCurve_XTPL: [],
+			braceletCurve_BS: [],
+			braceletCurve_XYND: [],
+			braceletCurve_LNG: [],
+			braceletCurve_LAT: [],
+			/* targetdetail_visable: { targetdetail_target: true, targetdetail_curve: true, targetdetail_histogram: true},
+				targetdetail: { targetdetail_target: '', targetdetail_curve: '', targetdetail_histogram: ''}, */
+			targetName: '日发电量',
+			targetUnit: '万kwh',
+			
+			bool:true,
+			pld: '',
+			ssxy: '',
+			lng: '',
+			szxy: '',
+			lat: '',
+			xtpl: '',
+			bs: '',
+			xynd: '',
+			device_nam: '',
+			title: 'map',
+			latitude: 39.907,//定位中心
+			longitude: 116.39742,//
+			covers: [
+				{
+					
+					latitude:39.909 , //纬度坐标点
+					longitude:116.39742 , //经度
+					iconPath: '../../static/picture/forcast/DingWei.png', //显示的图标
+					title: '阿打算', //标注点名
+					label: {
+						//为标记点旁边增加标签
+						content: '', //文本1
+						color: '#F76350', //文本颜色
+						anchorX: 0, //label的坐标，原点是 marker 对应的经纬度
+						anchorY: -80, //label的坐标，原点是 marker 对应的经纬度
+						// 					    x:39.909,//这个组件微信在1.2.0以后就废弃了
+						// 					    y:116.39742,
+						bgColor: '#fff', //背景色
+						padding: 5, //文本边缘留白
+						borderWidth: 1, //边框宽度
+						borderColor: '#D84C29', //边框颜色
+						textAlign: 'right' //文本对齐方式。
+					},
+					callout: {
+						//自定义标记点上方的气泡窗口 点击有效
+						content: '地点1',
+						color: '#F76350',
+						fontSize: 12,
+						borderRadius: 5
+					}
+					// 					 anchor:{//经纬度在标注图标的锚点，默认底边中点
+					// 						 x:5,
+					// 						 y:1,
+					// 					  }
+				} , {
+								    latitude:39.90   ,//最后点
+								    longitude: 116.399,//
+								    iconPath: '../../static/picture/forcast/DingWei.png',
+									title:'阿迪达斯',
+									x:'',//
+									y: '',//116.399
+									label:{
+									        content:'',
+									        color:'#F76350',
+									        bgColor:'#fff',
+									        padding:5,
+									        borderRadius:4,
+									 },
+									 callout:{
+									        content:'地点2',
+									        color:'#F76350',
+									        fontSize:12
+									 }
+								} 
+			],
+			scale: 15, //地图层级
+			controls: [
+				{
+					//在地图上显示控件，控件不随着地图移动
+					id: 1, //控件id
+					/* iconPath: '../../static/picture/forcast/DingWei.png', *///显示的图标
+					position: {
+						//控件在地图的位置
+						left: 15,
+						top: 15,
+						width: 40,
+						height: 40
+					}
+				}
+			],
+			circles: [
+				{
+					//在地图上显示圆
+					latitude: 39.9,
+					longitude: 116.39,
+					fillColor: '#FFC41F', //填充颜色
+					color: '#12A1DD', //描边的颜色
+					radius: 0, //半径
+					strokeWidth: 2 //描边的宽度
+				}
+			],
+			polyline: [
+				{    /* .polyline[0].points */
+					points:[{}],
+					//指定一系列坐标点，从数组第一项连线至最后一项
+					/* points: [{ latitude:this.mapBegin_1, longitude:this.mapBegin_2 }, { latitude: this.mapEnd_1, longitude:this.mapEnd_2 }], */
+					/* points: [{ latitude: 0, longitude: 0 }, { latitude: 0, longitude: 0 }], */
+					color: '#0000AA', //线的颜色
+					width: 2, //线的宽度
+					dottedLine: true, //是否虚线
+					arrowLine: true //带箭头的线 开发者工具暂不支持该属性
+				}
+			],
+
+			badge: 22,
+			inconList: ['form', 'favor', 'question', 'edit'],
+			modalName: null,
+			address: '',
+			drawerList: [],
+			plusDrawerList: [],
+			permissionsInformation:[]
+		};
+	},
+	mounted() {
+		//document.querySelector('body').setAttribute('style', 'background-color:#000000');
+	},created: function() {
+		// this.pushWindPowerStationNameToSessionStorage("麻黄山");
+		this.viewUserid();
+		this.monitoringAuthority();
+		
+		this.address = this.dataprocessing.getWindPowerStationName();
+		this.FDC=this.dataprocessing.getWindPowerStationId();
+		this.windPowerStationId =this.dataprocessing.getWindPowerStationId();
+		
+
+		this.$nextTick(function() {
+			//this.getWeatherDataToday();
+			//this.getWeatherData7();
+		});
+		this.cWidth = uni.upx2px(2000);
+		this.cHeight = uni.upx2px(350);
+		this.cWidth40 = uni.upx2px(5000);
+		this.cHeight40 = uni.upx2px(350);
+		
+		
+
+		this.windStation =this.dataprocessing.getWindPowerStationNameByNames(this.address);
+		this.windStationName = this.windStation[0].replace('风电场', '');
+		
+		
+		
+	},
+	
+	onLoad(pointKey) {
+		let _this = this;
+		this.pointKey = pointKey.pointKey;
+		this.targetName = pointKey.callTargetName;
+		this.targetUnit = pointKey.callTargetUnit;
+		this.braceletData();
+		/* console.log(_this.bracelet[_this.deviceName]);
+			console.log(_this.bracelet[_this.deviceName][_this.targetName_pld][0]); */
+		/* uni.getLocation({//获取当前的位置坐标
+							type: 'wgs84',
+							success: function (res) {
+								console.log('当前位置的经度：' + res.longitude);
+								console.log('当前位置的纬度：' + res.latitude);
+							}
+						}); */
+	},
+	onReady() {},
+
+	computed: {
+		
+		targetName_xtpl: function() {
+			return this.deviceName + '_XTPL';
+		},
+		targetName_xtpl_size: function() {
+			return this.bracelet[this.deviceName][this.targetName_xtpl].length - 1;
+		},
+		targetName_pld: function() {
+			return this.deviceName + '_PLD';
+		},
+		targetName_pld_size: function() {
+			return this.bracelet[this.deviceName][this.targetName_pld].length - 1;
+		},
+
+		targetName_bs: function() {
+			return this.deviceName + '_BS';
+		},
+		targetName_bs_size: function() {
+			return this.bracelet[this.deviceName][this.targetName_bs].length - 1;
+		},
+
+		targetName_ssxy: function() {
+			return this.deviceName + '_SSXY';
+		},
+		targetName_ssxy_size: function() {
+			return this.bracelet[this.deviceName][this.targetName_ssxy].length - 1;
+		},
+
+		targetName_szxy: function() {
+			return this.deviceName + '_SZXY';
+		},
+		targetName_szxy_size: function() {
+			return this.bracelet[this.deviceName][this.targetName_szxy].length - 1;
+		},
+
+		targetName_xynd: function() {
+			return this.deviceName + '_XYND';
+		},
+		targetName_xynd_size: function() {
+			return this.bracelet[this.deviceName][this.targetName_xynd].length - 1;
+		},
+
+		backStageIp: function() {
+			return this.$store.state.wholeSituationBackStageIp;
+		},
+		backStagePort: function() {
+			return this.$store.state.wholeSituationBackStagePort;
+		},
+		windpowerstationNameToId: function() {
+			return this.$store.state.windpowerstationNameToId;
+		}
+	},
+	
+	methods: {
+		viewUserid: function() {
+			this.plusDrawerList=uni.getStorageSync('plusList');
+		},
+		monitoringAuthority: function() {
+			this.drawerList=uni.getStorageSync('leftlist3');
+		},
+		mapdelete(){
+			//#ifdef H5
+			
+			   if(this.bool){
+			   	
+			   	this.$delete(this.polyline[0],'points');
+			   	this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
+			   	this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
+			   	
+			   	this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
+			   	this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
+			   	this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
+			   	this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value;
+			   	for(let val of this.polyline){
+			   	
+			   		this.$set(val,'points',this.points);					
+			   		this.bool = false;
+			   		console.log("true");
+			   	
+			   }
+			   	/* 定义地图经纬度中心 */
+			   	 var lat= parseFloat(this.mapBegin_2)+parseFloat(this.mapEnd_2);
+			   	 var lng=  parseFloat(this.mapBegin_1)+parseFloat(this.mapEnd_1);
+			   	 
+			   	 this.latitude = lat/2;
+			   	 this.longitude = lng/2;
+			   }else{
+			   	/* this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
+			   	this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
+			   	
+			   	this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
+			   	this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
+			   	this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
+			   	this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value;
+			   	 */
+			   	
+			   		/* this.$replace(this.polyline[0],'points'); */
+			   		
+			   	  /* this.latitude = this.mapBegin_2+this.mapEnd_2/2;
+			   	   this.longitude = this.mapBegin_1+this.mapEnd_1/2; */
+			   	   
+			   		console.log("false");
+			   		/* 还原定位中心位置 */
+			   		this.latitude = this.mapBegin_2;
+			   		this.longitude = this.mapBegin_1;	
+			   			
+			   		this.bool = true;
+			   }
+			   this.$forceUpdate();
+			
+			//#endif
+			
+			//#ifdef APP-PLUS
+			  if(this.bool){
+			  	
+			  	this.$delete(this.polyline[0],'points');
+			  	this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
+			  	this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
+			  	
+			  	this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
+			  	this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
+			  	this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
+			  	this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value;
+			  	for(let val of this.polyline){
+			  	
+			  		this.$set(val,'points',this.points);					
+			  		this.bool = false;
+			  		console.log("true");
+			  	
+			  }
+			  	/* 定义地图经纬度中心 */
+			  	 var lat= parseFloat(this.mapBegin_2)+parseFloat(this.mapEnd_2);
+			  	 var lng=  parseFloat(this.mapBegin_1)+parseFloat(this.mapEnd_1);
+			  	 
+			  	 this.latitude = lat/2;
+			  	 this.longitude = lng/2;
+			  }else{
+			  	/* this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
+			  	this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
+			  	
+			  	this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
+			  	this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
+			  	this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
+			  	this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value;
+			  	 */
+			  	
+			  		this.$delete(this.polyline[0],'points');
+			  		
+			  	  /* this.latitude = this.mapBegin_2+this.mapEnd_2/2;
+			  	   this.longitude = this.mapBegin_1+this.mapEnd_1/2; */
+			  	   
+			  		console.log("false");
+			  		/* 还原定位中心位置 */
+			  		this.latitude = this.mapBegin_2;
+			  		this.longitude = this.mapBegin_1;	
+			  			
+			  		this.bool = true;
+			  }
+			  this.$forceUpdate();
+			//#endif
+		},
+		mapDate(){
+			
+		
+			
+			
+				
+			},
+		openDrawer: function() {
+			this.monitoringAuthority();
+			this.kg=false;
+			if(this.$refs.drawer != undefined){
+				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList,this.leftNavigationtitle);
+			}else{
+				console.log('雷霆嘎巴');
+			}
+		},
+		closeDrawer: function() {
+			
+			this.drawerIsShow = false;
+			
+		},
+		
+		pushWindPowerStationNameToSessionStorage(windpowerstationName) {
+			uni.setStorageSync('windpowerstationName', windpowerstationName);
+			//sessionStorage.setItem('windpowerstationName', windpowerstationName);
+			//alert("v"+ sessionStorage.getItem("windpowerstationName"));
+			//this.common.goback('/pages/index/Index');
+		},
+		getWindPowerStationNameToSessionStorage() {
+			uni.getStorageSync('windpowerstationName');
+			return uni.getStorageSync('windpowerstationName');
+		},
+		leftbar(){
+			
+				this.kg=true;
+			
+			
+		},
+		onHide() {
+			
+			this.$refs.drawer.closeDrawer();
+			this.hideModal();
+		},
+		onShow: function() {
+			this.leftbar();
+			this.windPowerStationId = uni.getStorageSync('windPowerStationId');
+			this.address = this.getWindPowerStationNameToSessionStorage();
+			
+			this.viewUserid();
+			this.monitoringAuthority();
+		},
+		showModal(e) {
+			this.conflict = true;
+			this.viewUserid();
+			this.kg=false;
+			this.modalName = e.currentTarget.dataset.target;
+			this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
+		},
+		hideModal() {
+			this.conflict = false;
+			this.leftbar();
+			this.modalName = null;
+			//this.$refs.plusDrawer.hideModal(this.modalName);
+			
+		},
+		braceletData() {
+			let _this = this;
+			let ip;
+			
+			
+			
+			uni.request({
+				url: 'http://' + _this.backStageIp + ':' + _this.backStagePort + '/bracelet/bracelet?beginDate=2020-04-20%2009:26:27&&endDate=2020-04-25%2009:26:29',
+				success: res => {
+					ip = res.data;
+				}
+			});
+
+			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
+			this.socketTask_bracelet = uni.connectSocket({
+				/* 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】 */
+				url: 'ws://' + _this.backStageIp + ':' + _this.backStagePort + '/websocket/pageNumber_9/functionNumber_1/all',
+				success(data) {
+					console.log('websocket连接成功');
+				}
+			});
+
+			// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
+			this.socketTask_bracelet.onOpen(res => {
+				console.log('WebSocket连接正常打开中...！');
+				_this.is_open_socket = true;
+
+				// 注：只有连接正常打开中 ，才能正常收到消息
+				_this.socketTask_bracelet.onMessage(res => {
+					//console.log("收到服务器内容：" + res.data);
+
+					_this.bracelet = JSON.parse(res.data)[ip];
+					_this.braceletCurve = JSON.stringify(_this.bracelet[_this.deviceName]);
+					/* 获取起始经纬度 */
+					_this.braceletCurve_LNG = _this.bracelet[_this.deviceName][_this.deviceNameLng];
+					_this.braceletCurve_LAT = _this.bracelet[_this.deviceName][_this.deviceNameLat];
+					_this.mapBegin_1 = (_this.bracelet[_this.deviceName][_this.deviceNameLng][0].value);
+					_this.mapBegin_2 = (_this.bracelet[_this.deviceName][_this.deviceNameLat][0].value);
+					_this.mapEnd_1 = (_this.bracelet[_this.deviceName][_this.deviceNameLng][_this.braceletCurve_LNG.length-1].value);
+					_this.mapEnd_2 = (_this.bracelet[_this.deviceName][_this.deviceNameLat][_this.braceletCurve_LAT.length-1].value);
+					
+						
+					
+					_this.latitude = _this.mapBegin_2;
+					_this.longitude = _this.mapBegin_1;
+					
+					_this.covers[0].latitude = _this.mapBegin_2;
+					_this.covers[0].longitude = _this.mapBegin_1;
+					_this.covers[1].latitude = _this.mapEnd_2;
+					_this.covers[1].longitude = _this.mapEnd_1;
+					
+					_this.bs_computed = _this.bracelet[_this.deviceName][_this.targetName_bs][_this.targetName_bs_size].value;
+					_this.xtpl_computed = _this.bracelet[_this.deviceName][_this.targetName_xtpl][_this.targetName_xtpl_size].value;
+					_this.ssxy_computed = _this.bracelet[_this.deviceName][_this.targetName_ssxy][_this.targetName_ssxy_size].value;
+					_this.szxy_computed = _this.bracelet[_this.deviceName][_this.targetName_szxy][_this.targetName_szxy_size].value;
+					_this.pld_computed = _this.bracelet[_this.deviceName][_this.targetName_pld][_this.targetName_pld_size].value;
+					_this.xynd_computed = _this.bracelet[_this.deviceName][_this.targetName_xynd][_this.targetName_xynd_size].value;
+					/* this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
+					this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
+					
+					this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
+					this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
+					this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
+					this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value; */
+					/* _this.mapDate(); */
+					/* _this.polyline[0].points[0].latitude=_this.mapBegin_2;
+					_this.polyline[0].points[0].longitude=_this.mapBegin_1;
+					_this.polyline[0].points[1].latitude=_this.mapEnd_2;
+					_this.polyline[0].points[1].longitude=_this.mapEnd_1; */
+					/* _this.braceletCurve_SSXY = _this.bracelet[_this.deviceName][_this.deviceNameSsxy];
+						_this.braceletCurve_SZXY = _this.bracelet[_this.deviceName][_this.deviceNameSzxy];
+						_this.braceletCurve_XYND = _this.bracelet[_this.deviceName][_this.deviceNameXynd];
+						_this.braceletCurve_XTPL = _this.bracelet[_this.deviceName][_this.deviceNameXtpl];
+						_this.braceletCurve_BS = _this.bracelet[_this.deviceName][_this.deviceNameBs];
+						console.log(_this.braceletCurve_BS[0].value); */
+				});
+			});
+			// 这里仅是事件监听【如果socket关闭了会执行】
+			this.socketTask_bracelet.onClose(() => {
+				uni.request({
+					url: 'http://' + _this.backStageIp + ':' + _this.backStagePort + '/bracelet/close_bracelet?pointKey=' + _this.pointKey,
+					success: res => {}
+				});
+			});
+		}
+	}
+};
+</script>
+
+<style>
+body {
+	font-family: '方正兰亭细黑_GBK';
+	font-size: 15px;
+	color: silver;
+	background: #000;
+}
+
+@font-face {
+	font-family: '方正兰亭细黑_GBK';
+	src: url(../../../static/fzltxh.TTF);
+}
+.content{
+	//background-color: #000000;
+}
+page {
+	background-color: #1f1f1f;
+	font-family: '方正兰亭细黑_GBK';
+	overflow-x: hidden;
+}
+.top {
+	width: 100%;
+	height: 130upx;
+	padding-top: 5upx;
+	background-color: #1f1f1f;
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	z-index: 100;
+}
+
+.threeLine {
+	width: 50px;
+	height: 45px;
+	float: left;
+}
+
+.text {
+	width: calc(100% - 100px);
+	height: 45px;
+	float: left;
+	user-select: text;
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	color: silver;
+	line-height: 45px;
+	margin-top: 11px;
+	font-size: 18px;
+}
+
+.notice {
+	width: 50px;
+	height: 45px;
+	float: left;
+}
+
+.plus {
+	width: 30px;
+	height: 45px;
+	float: right;
+	color: white;
+	font-size: 35px;
+	line-height: 45px;
+	text-align: right;
+	margin-right: 2.5%;
+}
+
+.textWindpowerstation {
+	width: 180px;
+	height: 45px;
+	float: left;
+	text-align: center;
+	margin-left: 18px;
+}
+.InformationCard {
+	position: absolute;
+	top: 50px;
+	left: 0px;
+	margin-top: 0px;
+	width: 50%;
+	height: 8%;
+	background: rgba(0, 0, 0, 0);
+	float: left;
+}
+.informationCardAll {
+	width: 95%;
+	margin-left: 2.5%;
+	margin-top: 10px;
+	height: 60px;
+	float: left;
+}
+.informationCardTextOne {
+	width: 100%;
+	height: 35px;
+	float: left;
+	margin-top: -10px;
+}
+.informationCardText {
+	/* margin-left: 2%; */
+	width: 65px;
+	height: 35px;
+	line-height: 35px;
+	user-select: text;
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	color: silver;
+	font-size: 10px;
+	transform: scale(0.975);
+	float: left;
+	font-weight: 1000;
+}
+.textSilver {
+	user-select: text;
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	color: black;
+	float: left;
+}
+.textWhite {
+	color: black;
+	float: right;
+	width: 24px;
+	font-size: 10px;
+	margin-right: 13%;
+	transform: scale(0.975);
+	/* text-align: right; */
+}
+.Personal_information_W {
+	position: relative;
+	/* margin-top: 3%; */
+	width: 90%;
+	height: 80px;/* 
+	background-color: #242424; */
+	border-bottom: #BDBDBD solid 0.5px;
+	transform: translateX(-50%);
+	left: 50%;
+	color: #B8B7B7;
+}
+
+.name{
+	position: absolute;
+	height: 30px;
+	width: 130px;
+	left: 3%;
+	/* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
+	text-align: left;
+	line-height: 30px;
+	margin-top: 1%;
+	font-weight: 1000;
+	
+}
+.history {
+	position: absolute;
+	margin-top: 6%;
+	right: 3%;
+	height: 30px;
+	height: 20px;
+	text-align: center;
+	line-height: 30px;
+}
+
+.skills {
+	position: absolute;
+	top: 56%;
+	left: 3%;
+	height: 25px;
+	width: 180px;/* 
+	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
+	text-align: left;
+	line-height: 30px;
+}
+.curve{
+	position: relative;
+	width: 90%;
+	transform: translateX(-50%);
+	left: 50%;
+	height: 30px;
+	margin-top: 3%;
+	color: #B8B7B7;
+	font-weight: 1000;
+}
+.curve_l{
+	position: absolute;
+	left: 3%;
+}
+.curve_r{
+	position: absolute;
+	right: 3%;
+}
+.healthy {
+	margin-left: 3%;
+	height: 180px;
+	width: 95%;
+	margin-bottom: 100px;
+	text-align: center;
+	color: #B8B7B7;
+	font-size: 12px;
+	line-height:65px ;
+	font-weight: 1000;
+	
+}
+.healthy_H,
+.healthy_N,
+.healthy_W {
+	background-color:#242424;
+	position: relative;
+	width: 100%;
+	height: 42%;
+	text-align: center;
+	/* padding-bottom: 1%; */
+}
+
+
+.details_z {
+	position: absolute;
+	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);	
+	width: 30%;	
+	left:3%;
+	height: 60px;
+	top: 3%;
+	margin-top: 2%;
+}
+.details_m {
+	position: absolute;
+	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);	
+	width: 30%;
+	left: 35.5%;
+	height: 60px;
+	top: 3%;
+	margin-top: 2%;
+}
+.details_y {
+	position: absolute;
+	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
+	width: 30%;
+	left: 68%;
+	height: 60px;
+	top: 3%;
+	margin-top: 2%;
+	/* margin-bottom: 0.6%;
+	margin-top: 0.6%;
+	float: right;
+	margin-left: 0.2%;
+	margin-right: 1.2%;
+	width: 31%;
+	height: 100%;
+	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
+		color: silver;
+		 text-align: center;
+		padding-top: 10px;
+	background-color: #ffffff;
+	font-size: 12px;
+	padding-bottom: 4px;
+	line-height: 13px;
+
+	border-radius: 5px;
+	padding-top: 8px; */
+}
+
+.navigation::after {
+	content: url(../../../static/picture/forcast/position.png);
+}
+	/* .greater {
+	           position: relative;
+	            width: 249px;
+	            height: 35px;
+	            border: 1px solid #000;
+	        } */
+    .greater{
+		float: right;
+            content: "";
+			margin-top: 0.8%;
+			margin-right: 0.8%;
+           /* position: absolute; */
+            /* top: 8px;
+            right: 15px; */
+            width: 8px;
+            height: 8px;
+            border-right: 2px solid #fff;
+            border-bottom: 2px solid #fff;
+            transform: rotate(-45deg);
+			
+        }
+		.windStationNameAndChoice {
+					clear: both;
+					width: 100%;
+					height: 30px;
+					margin-top: 1%;
+					color: silver;
+					/* border: 1px solid red; */
+				}
+				
+				.windStationName {
+					width: 50%;
+					height: 100%;
+					float: left;
+					line-height: 30px;
+					font-size: 14px;
+					margin-left: 9.5%;
+				}
+				
+				.windStationChoice {
+					width: 20%;
+					height: 100%;
+					float: right;
+					text-align: right;
+					line-height: 30px;
+					font-size: 14px;
+					margin-right: 5%;
+				}
+				
+				.s-popup-wrapper {
+					width: 500rpx;
+					background-color: #f0f0f0;
+				
+				}
+				
+				.s-popup-title {
+					width: 100%;
+					height: 50px;
+					background-color: #211E21;
+				}
+				
+				.s-popup-word {
+					width: calc(100% - 65px);
+					height: 50px;
+					font-size: 14px;
+					color: white;
+					line-height: 50px;
+					float: left;
+					margin-left: 25px;
+				}
+				
+				.s-popup-cha {
+					width: 40px;
+					height: 50px;
+					text-align: center;
+					line-height: 50px;
+					float: right;
+					font-size: 24px;
+				}
+				
+				.windStationItemContainer {
+					width: 100%;
+				}
+				
+				.windStationItemContainerBlack {
+					width: 100%;
+					background-color: grey;
+					color: white;
+				}
+				
+				.windStationItem {
+					width: 80%;
+					height: 50px;
+					border-bottom: 1px solid #c8c8c8;
+					text-align: left;
+					line-height: 50px;
+					margin-left: 10%;
+					color: #333333;
+				}
+				.DrawerPage {
+					position: fixed;
+					width: 100vw;
+					height: 100vh;
+					left: 0vw;
+					background-color: #1f1f1f;
+					transition: all 0.4s;
+				}
+				
+				.DrawerPage.show {
+					transform: scale(0.9, 0.9);
+					left: 85vw;
+					box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
+					transform-origin: 0;
+				}
+				.DrawerPage .cu-bar.tabbar .action button.cuIcon {
+					width: 64upx;
+					height: 64upx;
+					line-height: 64upx;
+					margin: 0;
+					display: inline-block;
+				}
+				
+				.DrawerPage .cu-bar.tabbar .action .cu-avatar {
+					margin: 0;
+				}
+				
+				.DrawerPage .nav {
+					flex: 1;
+				}
+				
+				.DrawerPage .nav .cu-item.cur {
+					border-bottom: 0;
+					position: relative;
+				}
+				
+				.DrawerPage .nav .cu-item.cur::after {
+					content: '';
+					width: 10upx;
+					height: 10upx;
+					background-color: currentColor;
+					position: absolute;
+					bottom: 10upx;
+					border-radius: 10upx;
+					left: 0;
+					right: 0;
+					margin: auto;
+				}
+				
+				.DrawerPage .cu-bar.tabbar .action {
+					flex: initial;
+				}
+</style>

components/mine/chat/css_v1.1/chat.css

@@ -0,0 +1,82 @@
+.bubbleDiv{  
+    width: 100%;
+    height: 500px;
+    margin: 0px;
+    padding: 0px;
+}  
+.bubbleItem{  
+    width: 100%;  
+    list-style:none;
+    margin: 0px;
+    padding: 5px;
+}  
+.bubble{  
+    position: relative;  
+    line-height: 30px;  
+    border-radius: 7px;  
+    display: inline-block;  
+    padding-left: 10px;
+    padding-right: 10px;
+}  
+.leftBubble{  
+    position: relative;  
+    margin-left: 15px;  
+    border: 1px solid #00b6b6;  
+    background-color: #f8fdfc;  
+}  
+.leftBubble .bottomLevel{  
+    position: absolute;  
+    top: 10px;  
+    left: -10px;  
+    border-top: 10px solid #00b6b6;  
+    border-left: 10px solid transparent;  
+}  
+.leftBubble .topLevel{  
+    position: absolute;  
+    top: 11px;  
+    left: -8px;  
+    border-top: 10px solid #f8fdfc;  
+    border-left: 10px solid transparent;  
+    z-index: 100;  
+}
+.rightBubble{  
+    position: relative;
+    float: right;
+    margin-right:15px;
+    border: 1px solid #00b6b6;  
+    background-color: #f8fdfc;  
+}  
+.rightBubble .bottomLevel{  
+    position: absolute;  
+    top: 10px;  
+    right: -10px;  
+    border-top: 10px solid #00b6b6;  
+    border-right: 10px solid transparent;  
+}  
+.rightBubble .topLevel{  
+    position: absolute;  
+    top: 11px;  
+    right: -8px;  
+    border-top: 10px solid #f8fdfc;  
+    border-right: 10px solid transparent;  
+    z-index: 100;  
+}
+.clearfix:after {  
+    visibility: hidden;  
+    display: block;  
+    font-size: 0;  
+    content: " ";  
+    clear: both;  
+    height: 0;  
+}
+.overflow-3::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
+}
+
+.overflow-3::-webkit-scrollbar {
+   width: 6px;
+}
+.overflow-3::-webkit-scrollbar-thumb {
+   background-color:skyblue;
+   border-radius   : 10px;
+}

components/mine/chat/index.html

@@ -0,0 +1,29 @@
+<html>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-Type" content="application/json; charset=UTF-8">
+
+    <body>
+        <p>1.先把websocket这个源码下载下来，使用maven打包后直接运行jar包,怎么使用maven自行查资料,启动信令服务器</p>
+        <p>2.点击右上角,提示未连接,直接点一下就会连接到信令服务器上</p>
+        <p>3.复制这个页面地址,再开一个浏览器窗口,打开这个页面,再点击连接,这时候就会看见对方。</p>
+        <p>4.有较小的几率在webrtc的连接建立不起来。</p>
+        <p>5.只能在同一个局域网中使用,如果在互联网中涉及到p2p穿透问题,这个以后有时间弄好了再更新上来</p>
+        <p>6.如果是部署在外网服务器上,比如阿里云,腾讯云,则必须要将域名配置成https协议,推荐使用nginx配置,大家都这么玩。</p>
+        <p>7.如果想在局域网使用,直接打开html文件是不现实的,可以将前端部署在nginx中,这个可以自行查资料,非常简单。</p>
+        <p>8.总之webrtc只能在本地使用时可以http协议,如果是外网使用必须https协议,因为涉及到安全问题。</p>
+        
+    </body>
+
+    <!--下面是视频聊天需要引用的-->
+    <script>
+        //如果部署了https协议的信令服务器用wss:开通而不是ws:开头
+        var websocketPath = "ws://localhost:4397/websocket/webrtc";
+    </script>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <script type="text/javascript" src="js_v1.1/util.js" charset="utf-8"></script>
+    <link href="css_v1.1/chat.css" rel="stylesheet">
+    <script charset="utf-8" src="js_v1.1/websocket.js"></script>
+    <script charset="utf-8" src="js_v1.1/webrtc.js"></script>
+    <script charset="utf-8" src="js_v1.1/chat.js"></script>
+
+</html>

components/mine/chat/js_v1.1/chat.js

@@ -0,0 +1,510 @@
+//在页面添加在线聊天功能入口,因为这是一个单独功能,所以使用动态代码,以后不要这个功能了直接去除掉chat.js引用就行
+$("html").append('<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">');
+$("html").append('<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>');
+$("html").append('<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>');
+$("body").append(
+    '<div class="btn-group pull-right" style="position: absolute;right: 20px;top:20px;">'+
+        '<button type="button" class="btn dropdown-toggle btn-sm " data-toggle="dropdown" style="opacity:0.6;">'+
+            '在线视频聊天(最好使用谷歌浏览器) <span class="glyphicon glyphicon-align-justify"></span>'+
+        '</button>'+
+        '<ul class="dropdown-menu" id="chat_socketCon" role="menu" id="chat_users">'+
+            '<li id="rct_con"><a href="javascript:void(0)">未连接(点击连接获取用户列表)</a></li>'+
+            '<li class="divider"></li>'+
+        '</ul>'+
+    '</div>'
+);
+$("body").append(
+    '<div class="modal fade" id="chat_dialog" tabindex="-1" role="dialog" data-keyboard="false" aria-hidden="true" data-backdrop="static" aria-labelledby="myModalLabel">'+
+        '<div class="modal-dialog">'+
+            '<div class="modal-content">'+
+                '<div class="modal-header">'+
+                    '<h4 class="modal-title">消息</h4>'+
+                '</div>'+
+                '<div class="modal-body"><span id="chat_ready_id" data-uid=""></span>,与你发起对话申请,你是否同意</div>'+
+                '<div class="modal-footer">'+
+                    '<button type="button" class="btn btn-default" onclick="chat_ready(0)">关闭</button>'+
+                    '<button type="button" class="btn btn-primary" onclick="chat_ready(1)">确定</button>'+
+                '</div>'+
+            '</div>'+
+        '</div>'+
+    '</div>'
+);
+$("body").append(
+    '<div class="modal fade" id="chat_name_modal" tabindex="-1" role="dialog" data-keyboard="true" data-backdrop="static" aria-labelledby="myModalLabel">'+
+        '<div class="modal-dialog">'+
+            '<div class="modal-content">'+
+                '<div class="modal-header">'+
+                    '<h4 class="modal-title">提示</h4>'+
+                '</div>'+
+                '<div class="modal-body"><input type="text" id="chat_name" class="form-control" placeholder="请输入你昵称"></div>'+
+                '<div class="modal-footer">'+
+                    '<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>'+
+                    '<button type="button" class="btn btn-primary" onclick="chat_setName()">确定</button>'+
+                '</div>'+
+            '</div>'+
+        '</div>'+
+    '</div>'
+);
+$("body").append(
+    '<div class="modal fade" id="chat_dialogForOne" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" style="overflow:auto;">' +
+    '<div class="modal-dialog" style="width: 904px;">' +
+        '<div class="modal-content">' +
+            '<div class="modal-header">' +
+                '<h4 class="modal-title">你正在与［<label name="name"></label>］对话</h4>' +
+            '</div>' +
+            '<!-- 聊天框 -->' +
+            '<div class="modal-body" style="margin: 0px;padding: 0px;">' +
+                '<div style="height: 647px;">' +
+                    '<!-- 聊天信息展示 -->' +
+                    '<div style="width: 600px;height: 647px;float: left;">' +
+                        '<div style="overflow-y:auto;height: 500px;" class="overflow-3">' +
+                            '<!-- 每一条聊天记录都加在 li里面 -->' +
+                            '<ul class="bubbleDiv overflow-3" name="bubbleDiv"></ul>' +
+                        '</div>' +
+                        '<!-- 聊天输入 -->' +
+                        '<div style="height: 166px;">' +
+                            '<!-- 功能框 -->' +
+                            '<div style="height: 25px;">' +
+                                '<!-- 发送附件功能 -->' +
+                                '<div style="margin-left: 5px;">' +
+                                    '<label for="chat_fileMsgForOne">' +
+                                        '<span><!--<i class="glyphicon glyphicon-link"></i>--></span>' +
+                                    '</label>' +
+                                    '<!--<form><input type="file" id="chat_fileMsgForOne" style="position:absolute;clip:rect(0 0 0 0);"></form>-->' +
+                                '</div>' +
+                            '</div>' +
+                            '<!-- 输入框 -->' +
+                            '<div style="height: 142px;width: 100%;">' +
+                                '<textarea class="overflow-3" name = "message" style="width: 100%;height: 100%;resize:none;border: 0px;background-color: #EEEEEE;" placeholder="请输入需要发送的内容"></textarea>' +
+                            '</div>' +
+                        '</div>' +
+                    '</div>' +
+                    '<!-- 右侧视频语音聊天展示 -->' +
+                    '<div style="width: 300px;height: 647px;float: left;">' +
+                        '<!-- 本地视频框 -->' +
+                        '<div class="panel panel-default" style="margin: 0px;padding: 0px;">' +
+                            '<div class="panel-body">' +
+                               '<video style="height:250px;width:250px;margin: 0px;padding: 0px;" name="video" autoplay>' +'</video>' +
+                            '</div>' +
+                            '<div class="panel-footer" align="center">' +
+                                '<button type="button" class="btn btn-default btn-lg btn-xs" name="openVideo" data-use="false"><i class="glyphicon glyphicon-facetime-video"></i><span>开始视频</span></button>' +
+                                '<button type="button" class="btn btn-default btn-lg btn-xs" name="openAudio" data-use="false"><i class="glyphicon glyphicon-earphone"></i><span>开始语音</span></button>' +
+                            '</div>' +
+                        '</div>' +
+                        '<!-- 远端视频框 -->' +
+                        '<div class="panel panel-default" style="margin: 0px;padding: 0px;">' +
+                            '<div class="panel-body">' +
+                                '<video style="height:250px;width:250px;" name="remote" autoplay></video>' +
+                            '</div>' +
+                            '<div class="panel-footer" align="center">好友视频展示</div>' +
+                        '</div>' +
+                    '</div>' +
+                '</div>' +
+            '</div>' +
+            '<div class="modal-footer">' +
+                '<button type="button" class="btn btn-default" data-dismiss="modal">关闭对话</button>' +
+                '<button type="button" class="btn btn-success" id="chat_sendString">发送消息[Enter]</button>' +
+            '</div>' +
+        '</div>' +
+    '</div>'
+);
+var chat_socket = null;
+var rtc = null;
+var chat_name = null;
+
+/**
+ * 起名
+ */
+var chat_setName = function(){
+    var name = $("#chat_name").val();
+    if(name){
+        chat_name = name;
+        chat_socketCon();//并不是每次都创建
+        chat_sendMsg(1,"");//请求获取其他在线用户的信息,排除掉自己
+        $("#chat_name_modal").modal('hide');
+    }
+}
+/**
+ * 创建websocket
+ */
+var chat_socketCon = function(){
+    if(chat_socket != null){
+        return;
+    }
+    chat_socket = 0;//相当于暂时锁住,防止点击太快创建两次socket
+    var t_socket = createWebSocket("webrtc",websocketPath,
+    function(){//连接成功,向服务端发送身份
+        chat_socket = t_socket;
+        chat_sendMsg(0,chat_name);
+    },function(){//连接关闭
+        chat_socket = null;
+        $("#chat_socketCon li a").eq(0).html("未连接(点击连接获取用户列表)");
+        var u = $("#chat_socketCon");
+        var li = u.find("li");
+        for(var i = 2;i < li.length; i++){
+            li[i].remove();
+        }
+        $("#chat_ready_id").html("");
+        $("#chat_ready_id").data("uid","");
+        $("#chat_dialog").modal('hide');
+        $("#chat_dialogForOne").modal("hide");
+    },function(){//连接异常
+        chat_socket = null;
+        $("#chat_socketCon li a").eq(0).html("未连接(点击连接获取用户列表)");
+        var u = $("#chat_socketCon");
+        var li = u.find("li");
+        for(var i = 2;i < li.length; i++){
+            li[i].remove();
+        }
+    },function(msg){//收到消息
+        var data = JSON.parse(msg);
+        chat_response(data.type,data.message);
+    });
+}
+
+/**
+ * 处理服务端响应的消息
+ * 定义请求或响应类型,如果是发出,则是发送该类型的请求,如果是响应,则是收到了该类型的请求
+ * type
+ * 0(向服务端上报身份,或者收到服务端返回的身份id)
+ * 1(向服务端请求获取其他在线用户id数组,或者收到服务端返回的在线用户数组)
+ * 2(发起与一个用户的对话准备,或收到一个用户的准备)
+ * 3(类型2发起的用户是否准备的响应结果)
+ * 4(取消准备并且给对方发送取消准备,或者接受对方取消准备的消息)
+ * @param {*} type 
+ * @param {*} msg 
+ */
+var chat_response = function(type,msg){
+    if(type == "0"){//收到服务端响应的身份id
+        $("#chat_socketCon li a").eq(0).html("已连接(<span id='uid'>"+msg+"</span>)再次点击刷新");
+        chat_sendMsg(1,"");//请求获取其他在线用户的信息,排除掉自己
+    }else if(type == "1"){//收到服务端响应的其他在线用户信息
+        if(msg.length != 0){
+            var users = JSON.parse(msg);
+            var u = $("#chat_socketCon");
+            var li = u.find("li");
+            for(var i = 2;i < li.length; i++){
+                li[i].remove();
+            }
+            if(users.length == 0){//没有一个其他用户
+                u.append('<li><a href="javascript:void(0)">暂未有其他用户连接</a></li>');
+                u.append('<li><a href="javascript:void(0)">可以开两个浏览器模拟使用(暂时只支持谷歌)</a></li>');
+                u.append('<li><a href="javascript:void(0)">不是第一次访问,请先清除浏览器文件缓存</a></li>');
+                return;
+            }
+            for(var i in users){
+                var uid = users[i]["sessionId"];
+                var name = users[i]["name"];
+                var status = users[i]["status"];
+                var ready = users[i]["callId"] == uid ? 2 : 1;//2正在与自己对话,1正在与别人对话
+                u.append("<li name='chat_user'><a href=\"javascript:void(0)\"><span class='glyphicon glyphicon-user'></span>&nbsp;&nbsp;"+name+"&nbsp;&nbsp;<button data-userid='"+uid+"' type='button' class='btn "+(status == 0 ? "btn-success" : ready == 2 ? "btn-primary" : "btn-warning")+" btn-xs' id='u"+uid+"'>"+(status == 0 ? "申请对话" : ready == 2 ? "取消对话" : "正在对话")+"</button></a></li>");
+            }
+            /**
+             * 给每个用户号绑定发起访问请求的事件
+             */
+            $("#chat_socketCon li[name='chat_user']").on("click",function(e){
+                e.stopPropagation();
+            });
+            $("#chat_socketCon button").off("click").on("click",function(e){
+                e.stopPropagation();
+                var userid = $(this).data("userid");
+                if(userid){
+                    var status = $(this).html();
+                    if(status == "申请对话"){
+                        //检查是否正在跟其他人对话
+                        var bts = $("#chat_socketCon button");
+                        for(var i = 0;i < bts.length; i++){
+                            if($(bts[i]).html() == "取消对话"){
+                                return;
+                            }
+                        }
+                        chat_sendMsg(2,userid);//发起对话准备
+                        $(this).html("取消对话");
+                        $(this).toggleClass("btn-success");
+                        $(this).toggleClass("btn-primary");
+                    }else if(status == "取消对话"){
+                        chat_sendMsg(4,"");//向服务端发起取消对话
+                    }
+                }
+            });
+        }
+    }else if(type == "2"){//收到了一个用户的准备
+        if(msg.length != 0){
+            var users = JSON.parse(msg);
+            $("#chat_ready_id").html(users.name);
+            $("#chat_ready_id").data("uid",users.sessionId);
+            $("#chat_dialog").modal('show');
+        }
+    }else if(type == "3"){//响应一个用户的准备
+        if(msg.length != 0){
+            var users = JSON.parse(msg);
+            var ready = users.ready;
+            var uid = users.sessionId;
+            if(ready == "1"){//对方同意对话,发起webrtc信令,建立webrtc连接
+                var dialogfor = $("#chat_dialogForOne");
+                var dialogforname = dialogfor.find("label[name='name']");
+                rtc = rtc_getTool(onmessage,onaddstream,function(){
+                    dialogfor.modal("hide");
+                },function(){
+                    dialogforname.html(users.name);
+                    dialogfor.modal("show");
+                });
+                rtc.createPeerConnection();
+                rtc.sendOffer();
+            }else if(ready == "0"){
+                var bt = $("#u" + uid);
+                bt.html("申请对话");
+                bt.removeClass("btn-primary");
+                bt.addClass("btn-success");
+            }
+        }
+    }else if(type == "4"){//收到服务端发过来的取消对话,或者关闭对话
+        if(msg.length != 0){
+            $("#chat_dialog").modal('hide');
+            $("#chat_dialogForOne").modal("hide");
+            var u = $("#u" + msg);
+            u.html("申请对话");
+            u.removeClass("btn-primary");
+            u.addClass("btn-success");
+            $("#chat_ready_id").html("");
+            $("#chat_ready_id").data("uid","");
+            if(rtc != null){
+                rtc.close();
+            }
+        }
+    }else if(type == "6"){//收到服务端发过来的 offer信令
+        if(msg.length != 0){
+            var json = JSON.parse(msg);
+            rtc.signallingHandle(json);
+        }
+    }else if(type == "7"){//收到服务端发过来的 answer信令
+        if(msg.length != 0){
+            var json = JSON.parse(msg);
+            rtc.signallingHandle(json);
+        }
+    }else if(type == "8"){//收到服务端发过来的 候选信令
+        if(msg.length != 0){
+            var json = JSON.parse(msg);
+            rtc.signallingHandle(json);
+        }
+    }
+}
+
+/**
+ * 点击连接websocket,或者刷新其他用户
+ */
+$("#rct_con").on("click",function(e){
+    e.stopPropagation();
+    if(chat_socket == null){
+        //先起名
+        $("#chat_name_modal").modal('show');
+    }else{
+        chat_sendMsg(1,"");//请求获取其他在线用户的信息,排除掉自己
+    }
+    
+});
+
+var chat_sendClick = function(){
+    var value = $("#chat_dialogForOne textarea[name='message']").val();
+    var msg = {"data":value,"type":"text","id":$("#uid").html()};
+    showMessage("chat_dialogForOne",msg,"right");
+    rtc.send(JSON.stringify(msg));
+}
+/**
+ * 发送字符串内容
+ */
+$("#chat_sendString").on("click",function(e){
+    chat_sendClick();
+});
+/**
+ * 按回车发送
+ */
+$("#chat_dialogForOne textarea[name='message']").on("keydown",function(e){
+    if(e.keyCode == 13 && e.ctrlKey){
+        $(this).val($(this).val() + "\n");
+    }else if(e.keyCode == 13){
+        e.preventDefault();
+        chat_sendClick();
+    }
+});
+
+/**
+ * 发送文件
+ */
+$("#chat_fileMsgForOne").on("change",function(){
+	//todo 现在不实现
+});
+
+/**
+ * 接收webrtc通道发过来的数据回调
+ * @param {*} event 
+ */
+var filequeue = {};//文件队列,可以应对多个文件同时传送
+var onmessage = function(event){
+    var msg = JSON.parse(event.data);
+    if(msg.type == "text"){//文字内容
+        showMessage("chat_dialogForOne",msg,"left");
+    }else if(msg.type == "file"){//文件,
+        //todo 现在不实现
+    }
+}
+
+/**
+ * 接收webrtc通道发过来的视频,语音流
+ * @param {*} event 
+ */
+var onaddstream = function(remoteStream){
+    var video = $("#chat_dialogForOne video[name='remote']")[0];
+    video.srcObject = remoteStream;
+    video.onloadedmetadata = function(e) {
+        video.play();
+    };
+}
+
+/**
+ * 重置视频,语音按钮状态
+ */
+var resetVideoButton = function(){
+	var openVideo = $("#chat_dialogForOne button[name='openVideo']");
+	var openAudio = $("#chat_dialogForOne button[name='openAudio']");
+	openVideo.find(" > span").html("开始视频");
+	openAudio.show();
+	openAudio.find(" > span").html("开始语音");
+	openVideo.show();
+	openVideo.removeClass("active");
+    openAudio.removeClass("active");
+    openAudio.data("use",false);
+    openVideo.data("use",false);
+}
+/**
+ * 打开,关闭视频聊天按钮
+ */
+$("#chat_dialogForOne button[name='openVideo']").on("click",function(){
+	$(this).toggleClass("active");
+    if(!$(this).data("use")){//开启视频语音聊天
+        $(this).data("use",true);
+        rtc.openVideoAudioLocal(function(localStream){//创建本地视频流,绑定到控件上
+            var video = $("#chat_dialogForOne video[name='video']")[0]; //获取到展现视频的标签
+            video.srcObject=localStream;
+            video.onloadedmetadata = function(e) {
+                video.play();
+            };
+            rtc.sendAddStream(localStream);
+        },true,true);//为了防止自己能听到自己发出的声音,可以只启动视频,不启动音频,然后再创建一个新的开启语音,视频的对象发给远程
+		$(this).find(" > span").html("结束视频");
+        $("#chat_dialogForOne button[name='openAudio']").hide();
+    }else{//关闭视频语音聊天
+        rtc.closeStream();
+        resetVideoButton();
+	}
+});
+
+/**
+ * 打开,关闭语音聊天按钮
+ */
+$("#chat_dialogForOne button[name='openAudio']").on("click",function(){
+	$(this).toggleClass("active");
+	$(this).data("use",$(this).data("use") ? false : true);
+	if($(this).data("use")){//开启语音聊天
+		rtc.openVideoAudioLocal(function(localStream){//创建本地视频流,绑定到控件上
+            var video = $("#chat_dialogForOne video[name='video']")[0]; //获取到展现视频的标签
+            video.srcObject=localStream;
+            video.onloadedmetadata = function(e) {
+                video.play();
+            };
+            rtc.sendAddStream(localStream);
+        },false,true);//为了防止自己能听到自己发出的声音,可以启动音频后不添加到本地,只发给远程
+		$(this).find(" > span").html("结束语音");
+		$("#chat_dialogForOne button[name='openVideo']").hide();
+	}else{//关闭语音聊天
+		rtc.closeStream();
+        resetVideoButton();
+	}
+});
+
+/**
+ * 关闭对话框
+ */
+$("#chat_dialogForOne").on("hidden.bs.modal",function(e){
+    resetVideoButton();
+    if(rtc != null){
+        rtc.close();
+        rtc = null;
+        chat_sendMsg(4,"");//向服务端发起取消对话
+    }
+    //清除聊天记录 chat_dialogForOne  bubbleDiv
+    var lis = $(this).find("ul[name='bubbleDiv'] > li");
+    for (var i = 0 ; i < lis.length; i++){
+        $(lis[i]).remove();
+    }
+});
+
+
+/**
+ * 像服务端发送数据,返回是否发送成功
+ * @param {Int} type ,发送数据类型,
+ * type=0发送身份标识,
+ * @param {string} msg 
+ */
+var chat_sendMsg = function(type,msg){
+    if(chat_socket == null || chat_socket == 0){
+        return false;
+    }
+    chat_socket.send(type,msg);
+    return true;
+}
+
+/**
+ * 是否同意对话  i  1是 0 否
+ * @param {*} i 
+ */
+var chat_ready = function(i){
+    chat_sendMsg("3",i);//回复对方
+    if(i == 1){//同意
+        var uid = $("#chat_ready_id").data("uid");
+        var dialogfor = $("#chat_dialogForOne");
+        var dialogforname = dialogfor.find("label[name='name']");
+        rtc = rtc_getTool(onmessage,onaddstream,function(){
+            dialogfor.modal("hide");
+        },function(){
+            dialogforname.html($("#chat_ready_id").html());
+            dialogfor.modal("show");
+        });
+        rtc.createPeerConnection();
+        var bt = $("#u" + uid);
+        bt.html("取消对话");
+        bt.removeClass("btn-success");
+        bt.addClass("btn-primary");
+    }
+    $("#chat_dialog").modal('hide');
+}
+
+/**
+ * 添加好友发送的内容到聊天面板
+ * @param {*} showId 聊天框id
+ * @param {*} message 消息json对象
+ * @param {*} is_i right or left代表别人说的话
+ */
+var showMessage = function(showId,message,is_i){
+    if(message.data.length != 0){
+        var li = $('<li class="bubbleItem clearfix">');
+        var img = $('<img src="https://tse4-mm.cn.bing.net/th?id=OIP.hfxD_t92dafBqI_1EADiHAHaFG&p=0&o=5&pid=1.1" height="35px;" style="float: '+is_i+';">');
+        var span = $('<span class="bubble '+is_i+'Bubble">');
+        var you_msg = $('<span>');
+        you_msg.html(message.data);
+        span.append(you_msg);
+        var bottomLevel = $('<span class="bottomLevel">');
+        span.append(bottomLevel);
+        var bottomLevel = $('<span class="topLevel">');
+        span.append(bottomLevel);
+        li.append(img);
+        var div = $("<div style='float:"+is_i+";max-width: 60%;'>");
+        var name = $('<label style="font-size:12px;float:'+is_i+';margin-'+is_i+':10px;">昵称['+message.id+']</label>');
+        div.append(name);
+        div.append($('<br/>'));
+        div.append(span);
+        li.append(div);
+        $("#"+showId+" ul[name='bubbleDiv']").append(li);
+        $("#"+showId + " textarea[name='message']").val("");
+    }
+}

components/mine/chat/js_v1.1/util.js

@@ -0,0 +1,63 @@
+/**
+ * 将时间戳转换成日期格式
+ * @param {long,时间戳} timestamp 
+ */
+function timeToYYYY_MM_DD_HH_mm_ss(timestamp) {
+        if(("" + timestamp).length == 10){
+            timestamp = timestamp * 1000;
+        }
+        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
+        var Y = date.getFullYear() + '-';
+        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
+        var D = date.getDate() < 10 ?  '0'+date.getDate()+ ' ' : date.getDate()+ ' ';
+        var h = date.getHours() < 10 ? '0'+date.getHours()+ ':' : date.getHours()+ ':';
+        var m = date.getMinutes() < 10 ? '0'+date.getMinutes()+ ':' : date.getMinutes()+ ':';
+        var s = date.getSeconds()< 10 ? '0'+date.getSeconds() : date.getSeconds();
+        return Y+M+D+h+m+s;
+}
+
+/**
+ * ArrayBuffer转为字符串，参数为ArrayBuffer对象
+ * @param {ArrayBuffer} buf 
+ */
+function ab16str(buf) {
+    return String.fromCharCode.apply(null, new Uint16Array(buf));
+}
+  
+/**
+ * 字符串转为ArrayBuffer对象，参数为字符串
+ * @param {string} str 
+ */
+function str16ab(str) {
+  var buf = new ArrayBuffer(str.length * 2); // 每个字符占用2个字节
+  var bufView = new Uint16Array(buf);
+  for (var i = 0, strLen = str.length; i < strLen; i++) {
+    bufView[i] = str.charCodeAt(i);
+  }
+  return buf;
+}
+
+/**
+ * 字符编码数值对应的存储长度：
+ * UCS-2编码(16进制) UTF-8 字节流(二进制)
+ * 0000 - 007F       0xxxxxxx （1字节）
+ * 0080 - 07FF       110xxxxx 10xxxxxx （2字节）
+ * 0800 - FFFF       1110xxxx 10xxxxxx 10xxxxxx （3字节）
+ */
+String.prototype.getBytesLength = function() {
+  var totalLength = 0;
+  var charCode;
+  for (var i = 0; i < this.length; i++) {
+    charCode = this.charCodeAt(i);
+    if (charCode < 0x007f)  {
+        totalLength++;
+    } else if ((0x0080 <= charCode) && (charCode <= 0x07ff))  {
+        totalLength += 2;
+    } else if ((0x0800 <= charCode) && (charCode <= 0xffff))  {
+        totalLength += 3;
+    } else{
+        totalLength += 4;
+    }
+  }
+  return totalLength;
+}

components/mine/chat/js_v1.1/webrtc.js

@@ -0,0 +1,171 @@
+var rtc_getTool = function(onmessage,onaddstream,onclose,onopen){
+    //兼容不同浏览器客户端之间的连接,使用官方的兼用库 <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script><!--webrtc 兼容库-->
+    var PeerConnection = RTCPeerConnection;
+    //兼容不同浏览器获取到用户媒体对象
+    var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.mediaDevices.getUserMedia);
+    //兼容不同浏览器
+    var SessionDescription = (window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription);
+    var pc = null;//本地peerConnection对象
+    var oppositeChannel = null;//远端的数据通道
+    var localStream = null;//本地摄像头视频流
+    var createPeerConnection = function(){
+        //创建PeerConnection实例
+        pc = new PeerConnection();
+        pc.localChannel = pc.createDataChannel({
+            ordered: false,
+            maxRetransmitTime: 3000,
+        });//本地通道,本地通道接收由远程通道发送过来的数据
+        pc.localChannel.onerror = function (error) {
+            console.log("数据传输通道建立异常:", error);
+      	};
+        pc.localChannel.onopen = function () {
+            console.log("本地数据通道建立成功");
+            onopen();
+      	};
+        pc.localChannel.onclose = function () {
+            console.log("关闭数据传输通道");
+            onclose();
+            close();
+            pc = null;
+        };
+        pc.localChannel.onmessage = function(event){
+            onmessage(event);
+        };
+        pc.ondatachannel = function(event) {
+            //对方的通道,发送数据使用这个通道,则发到对方的本地通道的onmessage回调,反之使用本地通道发送数据则oppositeChannel通道的onmessage接收到数据
+            oppositeChannel = event.channel;
+        };
+        pc.onaddstream = function(event){//如果检测到媒体流连接到本地，将其绑定到一个video标签上输出
+            onaddstream(event.stream);
+        };
+        pc.onicecandidate = function(event){//发送候选到其他客户端
+            if (event.candidate !== null) {
+                var candidate = {"candidate":event.candidate,"type":"_candidate"};
+                chat_sendMsg(8,JSON.stringify(candidate));
+            }
+        };
+    }
+
+    /**
+     * 发送发起信令
+     */
+    var sendOffer = function(){
+        pc.createOffer(function(desc){
+            pc.setLocalDescription(desc);
+            chat_sendMsg(6,JSON.stringify({"sdp":desc,"type":"_offer"}));
+        }, function (error) {
+            console.log("发起信令失败:" + error);
+        });
+    }
+
+    /**
+     * 发送响应信令
+     */
+    var sendAnswer = function(){
+        pc.createAnswer(function(desc){
+            pc.setLocalDescription(desc);
+            chat_sendMsg(7,JSON.stringify({"sdp":desc,"type":"_answer"}));
+        }, function (error) {
+            console.log("响应信令失败:" + error);
+        });
+    }
+
+    /**
+     * 处理发送过来的信令  temp 在群组的时候代表 回复给指定的人
+     * @param {jsonObject} json 收到的消息,json对象
+     */
+    var signallingHandle = function(json){
+        //如果是一个ICE的候选，则将其加入到PeerConnection中，否则设定对方的session描述为传递过来的描述
+        if(json.type === "_candidate" ){
+            pc.addIceCandidate(new RTCIceCandidate(json.candidate));
+        }else{
+            pc.setRemoteDescription(new SessionDescription(json.sdp),
+                function(){
+                    // 如果是一个offer，那么需要回复一个answer
+                    if(json.type === "_offer") {
+                        sendAnswer();
+                    }
+                }
+            );
+        }
+    }
+
+    /**
+     * 通过建立的webrtc本地通道发送数据给对方
+     * 传入的参数不会经过任何处理,直接发送过去
+     * @param {object} msg 
+     */
+    var send = function(msg){
+        oppositeChannel.send(msg);
+    }
+    
+    /**
+     * 调用摄像头创建视频,音频对象,将对象流传入到回调中
+     * @param {*} callbackLocalVideo 回调
+     * @param {*} video 是否启动视频
+     * @param {*} audio 是否启动音频
+     */
+    var openVideoAudioLocal = function(callbackLocalVideo,video,audio){
+        getUserMedia.call(navigator, {
+            video: video,//启动视频
+            audio: audio//启动音频
+        },function(localMediaStream) {//获取流成功的回调函数
+            callbackLocalVideo(localMediaStream);
+        },function(error){
+            console.log("创建本地媒体对象失败:" + error);
+        });
+    }
+
+    /**
+     * 将打开的视频流发送给对方,同时发送offer信令通知
+     * @param {视频流} stream 
+     */
+    var sendAddStream = function(stream){
+        localStream = stream;
+        pc.addStream(localStream);
+        sendOffer();
+    }
+
+    /**
+     * 关闭webrtc通道
+     */
+    var close = function(){
+        if(pc != null){
+            closeStream();
+            pc.localChannel.close();
+            pc.close();
+            pc = null;
+            oppositeChannel = null;
+            chat_sendMsg(4,"");//给对方发送关闭通道消息
+        }
+    }
+
+    /**
+     * 关闭本地视频流
+     */
+    var closeStream = function(){
+        if(localStream != null){
+            if(localStream.getVideoTracks()[0]){
+                localStream.getVideoTracks()[0].stop();
+            }
+            if(localStream.getAudioTracks()[0]){
+                localStream.getAudioTracks()[0].stop();
+            }
+            if(localStream.getTracks()[0]){
+                localStream.getTracks()[0].stop();
+            }
+            localStream = null;
+        }
+    }
+
+    return {
+        "closeStream":closeStream,
+        "sendAddStream":sendAddStream,
+        "openVideoAudioLocal":openVideoAudioLocal,
+        "close":close,
+        "signallingHandle":signallingHandle,
+        "sendOffer":sendOffer,
+        "sendAnswer":sendAnswer,
+        "createPeerConnection":createPeerConnection,
+        "send":send};
+}

components/mine/chat/js_v1.1/websocket.js

@@ -0,0 +1,44 @@
+/**
+ * 创建websocket对象,并传入对应事件的回调函数
+ * @param {*} name 
+ * @param {*} ws 
+ * @param {*} onopen 
+ * @param {*} onclose 
+ * @param {*} onerror 
+ * @param {*} onmessage 
+ */
+var createWebSocket = function(name,ws,onopen,onclose,onerror,onmessage){
+    var socket = new WebSocket(ws);
+    var int = null;
+    socket.onopen = function(){
+        console.log("WebSocket,建立连接成功,[" + name +"]");
+        if(onopen){
+            onopen();
+        }
+        int = setInterval(function(){
+            send("a","");
+        },30000);//三十秒心跳一次,防止nginx代理超时,没有用nginx可以去掉
+    }; 
+    socket.onclose = function(event){
+        console.log("WebSocket,已关闭,[" + name +"]");
+        if(onclose){
+            onclose();
+        }
+        window.clearInterval(int);//关闭定时器
+    }; 
+    socket.onerror = function(event){
+        console.log("WebSocket,异常,[" + name +"]");
+        if(onerror){
+            onerror();
+        }
+    };
+    socket.onmessage = function(event){
+        if(onmessage){
+            onmessage(event.data);
+        }
+    };
+    var send = function(type,msg){
+        socket.send(JSON.stringify({"type":type,"message":msg}));
+    }
+    return {"send":send};
+}