实时通信

App.vue

@@ -1,5 +1,23 @@
 <script>
 	export default {
+		onShow() {
+			// 实时通信
+			const that = this;
+			if (that.$store.state.socketTask == null && that.$store.state.IsOpen == false) {
+				uni.getStorage({
+					key: 'token',
+					success: function(res) {
+						let user = that.$jwt(res.data);
+						if (user._id) {
+							//当websocket收到后端发送的消息时，触发
+							let config = that.$config.wsUrl;
+							// 开启websocket
+							that.$store.dispatch('websocketInit', config + `/${user._id}`);
+						}
+					}
+				})
+			}
+		},
 		onLaunch: function() {
 			const that = this;
 			that.forceUpdate();

components/mobile-frame/index.vue

@@ -8,10 +8,15 @@
 			</scroll-view>
 		</view>
 		<view class="foot" v-if="frameStyle&&frameStyle.useBar||false">
-			<view class="list" v-for="(item,index) in list" :key="index" @tap="toPath(index,item)" v-if="item.is_use=='0'">
-				<image class="image" :src="item.normal.length>0?item.normal[0].url:''" mode="" v-if="active!=index"></image>
-				<image class="image" :src="item.active.length>0?item.active[0].url:''" mode="" v-else></image>
-				<view class="name" :style="{color:active==index?frameStyle.barActive||'#FB1438':''}">{{item.name}}</view>
+			<view class="list" v-for="(item,index) in list" :key="index" @tap="toPath(index,item)"
+				v-if="item.is_use=='0'">
+				<uni-badge :is-dot="true" :text="item.num" absolute="rightTop" size="small">
+					<image class="image" :src="item.normal.length>0?item.normal[0].url:''" mode="" v-if="active!=index">
+					</image>
+					<image class="image" :src="item.active.length>0?item.active[0].url:''" mode="" v-else></image>
+					<view class="name" :style="{color:active==index?frameStyle.barActive||'#FB1438':''}">{{item.name}}
+					</view>
+				</uni-badge>
 			</view>
 		</view>
 	</view>
@@ -34,6 +39,20 @@
 			const that = this;
 			that.search()
 		},
+		computed: {
+			listenWebsocket() {
+				return this.$store.state.websocketData;
+			}
+		},
+		watch: {
+			listenWebsocket: function(newstr) {
+				if (newstr.type == 'chat') {
+					for (let val of this.list) {
+						if (val.route == 'pages/message/index') val.num = 1
+					}
+				}
+			}
+		},
 		methods: {
 			search() {
 				const that = this;
@@ -47,6 +66,9 @@
 							let list = bottom_menu.list.sort((a, b) => {
 								return a.sort - b.sort
 							});
+							for (let val of list) {
+								if (val.route == 'pages/message/index') val.num = 0
+							}
 							that.$set(that, `list`, list);
 							let data = list.find((i) => i.route == currentPage.route);
 							if (data) {
@@ -63,6 +85,11 @@
 			},
 			toPath(index, item) {
 				const that = this;
+				if (item.route == 'pages/message/index') {
+					for (let val of that.list) {
+						if (val.route == 'pages/message/index') val.num = 0
+					}
+				}
 				that.$set(that, `active`, index);
 				that.$emit('toPath', item)
 			}

config.js

@@ -12,6 +12,8 @@ export default {
 	serverUrl: 'https://broadcast.waityou24.cn',
 	// serverUrl: 'http://192.168.223.1:12211',
 	stompUrl: 'broadcast.waityou24.cn',
+	wsUrl: 'ws://broadcast.waityou24.cn/dev/point/chat/v1/api/ws',
+	// wsUrl: 'ws://192.168.1.197:12214/dev/point/chat/v1/api/ws',
 	system: system,
 	wx_projectkey: wx_projectkey,
 	wx_dev: wx_dev,
@@ -194,7 +196,9 @@ export default {
 				},
 				{
 					name: '唐山市',
-					area: ['路南区', '路北区', '古冶区', '开平区', '新  区', '丰润县', '滦  县', '滦南县', '乐亭县', '迁西县', '玉田县', '唐海县', '遵化市', '丰南市', '迁安市'],
+					area: ['路南区', '路北区', '古冶区', '开平区', '新  区', '丰润县', '滦  县', '滦南县', '乐亭县', '迁西县', '玉田县', '唐海县',
+						'遵化市', '丰南市', '迁安市'
+					],
 				},
 				{
 					name: '秦皇岛市',
@@ -302,7 +306,9 @@ export default {
 				},
 				{
 					name: '承德市',
-					area: ['双桥区', '双滦区', '鹰手营子矿区', '承德县', '兴隆县', '平泉县', '滦平县', '隆化县', '丰宁满族自治县', '宽城满族自治县', '围场满族蒙古族自治县'],
+					area: ['双桥区', '双滦区', '鹰手营子矿区', '承德县', '兴隆县', '平泉县', '滦平县', '隆化县', '丰宁满族自治县', '宽城满族自治县',
+						'围场满族蒙古族自治县'
+					],
 				},
 				{
 					name: '沧州市',
@@ -351,7 +357,9 @@ export default {
 				},
 				{
 					name: '长治市',
-					area: ['城  区', '郊  区', '长治县', '襄垣县', '屯留县', '平顺县', '黎城县', '壶关县', '长子县', '武乡县', '沁  县', '沁源县', '潞城市'],
+					area: ['城  区', '郊  区', '长治县', '襄垣县', '屯留县', '平顺县', '黎城县', '壶关县', '长子县', '武乡县', '沁  县',
+						'沁源县', '潞城市'
+					],
 				},
 				{
 					name: '晋城市',
@@ -363,11 +371,15 @@ export default {
 				},
 				{
 					name: '忻州市',
-					area: ['忻府区', '原平市', '定襄县', '五台县', '代  县', '繁峙县', '宁武县', '静乐县', '神池县', '五寨县', '岢岚县', '河曲县', '保德县', '偏关县'],
+					area: ['忻府区', '原平市', '定襄县', '五台县', '代  县', '繁峙县', '宁武县', '静乐县', '神池县', '五寨县', '岢岚县', '河曲县',
+						'保德县', '偏关县'
+					],
 				},
 				{
 					name: '吕梁市',
-					area: ['离石区', '孝义市', '汾阳市', '文水县', '交城县', '兴  县', '临  县', '柳林县', '石楼县', '岚  县', '方山县', '中阳县', '交口县'],
+					area: ['离石区', '孝义市', '汾阳市', '文水县', '交城县', '兴  县', '临  县', '柳林县', '石楼县', '岚  县', '方山县',
+						'中阳县', '交口县'
+					],
 				},
 				{
 					name: '晋中市',
@@ -397,7 +409,9 @@ export default {
 				},
 				{
 					name: '运城市',
-					area: ['运城市', '永济市', '河津市', '芮城县', '临猗县', '万荣县', '新绛县', '稷山县', '闻喜县', '夏  县', '绛  县', '平陆县', '垣曲县'],
+					area: ['运城市', '永济市', '河津市', '芮城县', '临猗县', '万荣县', '新绛县', '稷山县', '闻喜县', '夏  县', '绛  县', '平陆县',
+						'垣曲县'
+					],
 				},
 			],
 		},
@@ -417,7 +431,9 @@ export default {
 				},
 				{
 					name: '赤峰市',
-					area: ['红山区', '元宝山区', '松山区', '阿鲁科尔沁旗', '巴林左旗', '巴林右旗', '林西县', '克什克腾旗', '翁牛特旗', '喀喇沁旗', '宁城县', '敖汉旗'],
+					area: ['红山区', '元宝山区', '松山区', '阿鲁科尔沁旗', '巴林左旗', '巴林右旗', '林西县', '克什克腾旗', '翁牛特旗', '喀喇沁旗',
+						'宁城县', '敖汉旗'
+					],
 				},
 				{
 					name: '呼伦贝尔市',
@@ -447,11 +463,15 @@ export default {
 				},
 				{
 					name: '锡林郭勒盟',
-					area: ['二连浩特市', '锡林浩特市', '阿巴嘎旗', '苏尼特左旗', '苏尼特右旗', '东乌珠穆沁旗', '西乌珠穆沁旗', '太仆寺旗', '镶黄旗', '正镶白旗', '正蓝旗', '多伦县'],
+					area: ['二连浩特市', '锡林浩特市', '阿巴嘎旗', '苏尼特左旗', '苏尼特右旗', '东乌珠穆沁旗', '西乌珠穆沁旗', '太仆寺旗', '镶黄旗',
+						'正镶白旗', '正蓝旗', '多伦县'
+					],
 				},
 				{
 					name: '乌兰察布盟',
-					area: ['集宁市', '丰镇市', '卓资县', '化德县', '商都县', '兴和县', '凉城县', '察哈尔右翼前旗', '察哈尔右翼中旗', '察哈尔右翼后旗', '四子王旗'],
+					area: ['集宁市', '丰镇市', '卓资县', '化德县', '商都县', '兴和县', '凉城县', '察哈尔右翼前旗', '察哈尔右翼中旗', '察哈尔右翼后旗',
+						'四子王旗'
+					],
 				},
 				{
 					name: '伊克昭盟',
@@ -471,7 +491,9 @@ export default {
 			name: '辽宁省',
 			city: [{
 					name: '沈阳市',
-					area: ['沈河区', '皇姑区', '和平区', '大东区', '铁西区', '苏家屯区', '东陵区', '于洪区', '新民市', '法库县', '辽中县', '康平县', '新城子区'],
+					area: ['沈河区', '皇姑区', '和平区', '大东区', '铁西区', '苏家屯区', '东陵区', '于洪区', '新民市', '法库县', '辽中县', '康平县',
+						'新城子区'
+					],
 				},
 				{
 					name: '大连市',
@@ -708,7 +730,9 @@ export default {
 			name: '江苏省',
 			city: [{
 					name: '南京市',
-					area: ['玄武区', '白下区', '秦淮区', '建邺区', '鼓楼区', '下关区', '栖霞区', '雨花台区', '浦口区', '江宁区', '六合区', '溧水县', '高淳县'],
+					area: ['玄武区', '白下区', '秦淮区', '建邺区', '鼓楼区', '下关区', '栖霞区', '雨花台区', '浦口区', '江宁区', '六合区', '溧水县',
+						'高淳县'
+					],
 				},
 				{
 					name: '苏州市',
@@ -764,7 +788,9 @@ export default {
 			name: '浙江省',
 			city: [{
 					name: '杭州市',
-					area: ['拱墅区', '西湖区', '上城区', '下城区', '江干区', '滨江区', '余杭区', '萧山区', '建德市', '富阳市', '临安市', '桐庐县', '淳安县'],
+					area: ['拱墅区', '西湖区', '上城区', '下城区', '江干区', '滨江区', '余杭区', '萧山区', '建德市', '富阳市', '临安市', '桐庐县',
+						'淳安县'
+					],
 				},
 				{
 					name: '宁波市',
@@ -884,7 +910,9 @@ export default {
 			name: '福建省',
 			city: [{
 					name: '福州市',
-					area: ['鼓楼区', '台江区', '仓山区', '马尾区', '晋安区', '福清市', '长乐市', '闽侯县', '闽清县', '永泰县', '连江县', '罗源县', '平潭县'],
+					area: ['鼓楼区', '台江区', '仓山区', '马尾区', '晋安区', '福清市', '长乐市', '闽侯县', '闽清县', '永泰县', '连江县', '罗源县',
+						'平潭县'
+					],
 				},
 				{
 					name: '厦门市',
@@ -971,7 +999,9 @@ export default {
 				},
 				{
 					name: '吉安市',
-					area: ['吉州区', '青原区', '井冈山市', '吉安县', '永丰县', '永新县', '新干县', '泰和县', '峡江县', '遂川县', '安福县', '吉水县', '万安县'],
+					area: ['吉州区', '青原区', '井冈山市', '吉安县', '永丰县', '永新县', '新干县', '泰和县', '峡江县', '遂川县', '安福县', '吉水县',
+						'万安县'
+					],
 				},
 				{
 					name: '宜春市',
@@ -1063,7 +1093,9 @@ export default {
 			name: '河南省',
 			city: [{
 					name: '郑州市',
-					area: ['中原区', '金水区', '二七区', '管城回族区', '上街区', '惠济区', '巩义市', '新郑市', '新密市', '登封市', '荥阳市', '中牟县'],
+					area: ['中原区', '金水区', '二七区', '管城回族区', '上街区', '惠济区', '巩义市', '新郑市', '新密市', '登封市', '荥阳市',
+						'中牟县'
+					],
 				},
 				{
 					name: '开封市',
@@ -1071,7 +1103,9 @@ export default {
 				},
 				{
 					name: '洛阳市',
-					area: ['西工区', '老城区', '涧西区', '瀍河回族区', '洛龙区', '吉利区', '偃师市', '孟津县', '汝阳县', '伊川县', '洛宁县', '嵩县', '宜阳县', '新安县', '栾川县'],
+					area: ['西工区', '老城区', '涧西区', '瀍河回族区', '洛龙区', '吉利区', '偃师市', '孟津县', '汝阳县', '伊川县', '洛宁县', '嵩县',
+						'宜阳县', '新安县', '栾川县'
+					],
 				},
 				{
 					name: '平顶山市',
@@ -1111,7 +1145,9 @@ export default {
 				},
 				{
 					name: '南阳市',
-					area: ['卧龙区', '宛城区', '邓州市', '桐柏县', '方城县', '淅川县', '镇平县', '唐河县', '南召县', '内乡县', '新野县', '社旗县', '西峡县'],
+					area: ['卧龙区', '宛城区', '邓州市', '桐柏县', '方城县', '淅川县', '镇平县', '唐河县', '南召县', '内乡县', '新野县', '社旗县',
+						'西峡县'
+					],
 				},
 				{
 					name: '商丘市',
@@ -1139,7 +1175,9 @@ export default {
 			name: '湖北省',
 			city: [{
 					name: '武汉市',
-					area: ['江岸区', '武昌区', '江汉区', '硚口区', '汉阳区', '青山区', '洪山区', '东西湖区', '汉南区', '蔡甸区', '江夏区', '黄陂区', '新洲区'],
+					area: ['江岸区', '武昌区', '江汉区', '硚口区', '汉阳区', '青山区', '洪山区', '东西湖区', '汉南区', '蔡甸区', '江夏区', '黄陂区',
+						'新洲区'
+					],
 				},
 				{
 					name: '黄石市',
@@ -1155,7 +1193,9 @@ export default {
 				},
 				{
 					name: '宜昌市',
-					area: ['西陵区', '伍家岗区', '点军区', '猇亭区', '夷陵区', '宜都市', '当阳市', '枝江市', '秭归县', '远安县', '兴山县', '五峰土家族自治县', '长阳土家族自治县'],
+					area: ['西陵区', '伍家岗区', '点军区', '猇亭区', '夷陵区', '宜都市', '当阳市', '枝江市', '秭归县', '远安县', '兴山县',
+						'五峰土家族自治县', '长阳土家族自治县'
+					],
 				},
 				{
 					name: '襄樊市',
@@ -1227,7 +1267,9 @@ export default {
 				},
 				{
 					name: '邵阳市',
-					area: ['双清区', '大祥区', '北塔区', '武冈市', '邵东县', '洞口县', '新邵县', '绥宁县', '新宁县', '邵阳县', '隆回县', '城步苗族自治县'],
+					area: ['双清区', '大祥区', '北塔区', '武冈市', '邵东县', '洞口县', '新邵县', '绥宁县', '新宁县', '邵阳县', '隆回县',
+						'城步苗族自治县'
+					],
 				},
 				{
 					name: '岳阳市',
@@ -1426,7 +1468,9 @@ export default {
 				},
 				{
 					name: '百色市',
-					area: ['右江区', '凌云县', '平果县', '西林县', '乐业县', '德保县', '田林县', '田阳县', '靖西县', '田东县', '那坡县', '隆林各族自治县'],
+					area: ['右江区', '凌云县', '平果县', '西林县', '乐业县', '德保县', '田林县', '田阳县', '靖西县', '田东县', '那坡县',
+						'隆林各族自治县'
+					],
 				},
 				{
 					name: '贺州市',
@@ -1434,7 +1478,9 @@ export default {
 				},
 				{
 					name: '河池市',
-					area: ['金城江区', '宜州市', '天峨县', '凤山县', '南丹县', '东兰县', '都安瑶族自治县', '罗城仫佬族自治县', '巴马瑶族自治县', '环江毛南族自治县', '大化瑶族自治县'],
+					area: ['金城江区', '宜州市', '天峨县', '凤山县', '南丹县', '东兰县', '都安瑶族自治县', '罗城仫佬族自治县', '巴马瑶族自治县',
+						'环江毛南族自治县', '大化瑶族自治县'
+					],
 				},
 				{
 					name: '来宾市',
@@ -1630,7 +1676,9 @@ export default {
 				},
 				{
 					name: '乐山市',
-					area: ['市中区', '五通桥区', '沙湾区', '金口河区', '峨眉山市', '夹江县', '井研县', '犍为县', '沐川县', '马边彝族自治县', '峨边彝族自治县'],
+					area: ['市中区', '五通桥区', '沙湾区', '金口河区', '峨眉山市', '夹江县', '井研县', '犍为县', '沐川县', '马边彝族自治县',
+						'峨边彝族自治县'
+					],
 				},
 				{
 					name: '南充',
@@ -1666,7 +1714,9 @@ export default {
 				},
 				{
 					name: '阿坝藏族羌族自治州',
-					area: ['马尔康县', '九寨沟县', '红原县', '汶川县', '阿坝县', '理县', '若尔盖县', '小金县', '黑水县', '金川县', '松潘县', '壤塘县', '茂县'],
+					area: ['马尔康县', '九寨沟县', '红原县', '汶川县', '阿坝县', '理县', '若尔盖县', '小金县', '黑水县', '金川县', '松潘县', '壤塘县',
+						'茂县'
+					],
 				},
 				{
 					name: '甘孜藏族自治州',
@@ -1750,7 +1800,9 @@ export default {
 				},
 				{
 					name: '铜仁地区',
-					area: ['铜仁市', '德江县', '江口县', '思南县', '石阡县', '玉屏侗族自治县', '松桃苗族自治县', '印江土家族苗族自治县', '沿河土家族自治县', '万山特区'],
+					area: ['铜仁市', '德江县', '江口县', '思南县', '石阡县', '玉屏侗族自治县', '松桃苗族自治县', '印江土家族苗族自治县', '沿河土家族自治县',
+						'万山特区'
+					],
 				},
 				{
 					name: '毕节地区',
@@ -1762,11 +1814,15 @@ export default {
 				},
 				{
 					name: '黔东南苗族侗族自治州',
-					area: ['凯里市', '施秉县', '从江县', '锦屏县', '镇远县', '麻江县', '台江县', '天柱县', '黄平县', '榕江县', '剑河县', '三穗县', '雷山县', '黎平县', '岑巩县', '丹寨县'],
+					area: ['凯里市', '施秉县', '从江县', '锦屏县', '镇远县', '麻江县', '台江县', '天柱县', '黄平县', '榕江县', '剑河县', '三穗县',
+						'雷山县', '黎平县', '岑巩县', '丹寨县'
+					],
 				},
 				{
 					name: '黔南布依族苗族自治州',
-					area: ['都匀市', '福泉市', '贵定县', '惠水县', '罗甸县', '瓮安县', '荔波县', '龙里县', '平塘县', '长顺县', '独山县', '三都水族自治县'],
+					area: ['都匀市', '福泉市', '贵定县', '惠水县', '罗甸县', '瓮安县', '荔波县', '龙里县', '平塘县', '长顺县', '独山县',
+						'三都水族自治县'
+					],
 				},
 			],
 		},
@@ -1844,7 +1900,9 @@ export default {
 				},
 				{
 					name: '大理白族自治州',
-					area: ['大理市', '祥云县', '宾川县', '弥渡县', '永平县', '云龙县', '洱源县', '剑川县', '鹤庆县', '漾濞彝族自治县', '南涧彝族自治县', '巍山彝族回族自治县'],
+					area: ['大理市', '祥云县', '宾川县', '弥渡县', '永平县', '云龙县', '洱源县', '剑川县', '鹤庆县', '漾濞彝族自治县', '南涧彝族自治县',
+						'巍山彝族回族自治县'
+					],
 				},
 				{
 					name: '楚雄彝族自治州',
@@ -1852,7 +1910,9 @@ export default {
 				},
 				{
 					name: '红河哈尼族彝族自治州',
-					area: ['蒙自县', '个旧市', '开远市', '绿春县', '建水县', '石屏县', '弥勒县', '泸西县', '元阳县', '红河县', '金平苗族瑶族傣族自治县', '河口瑶族自治县', '屏边苗族自治县'],
+					area: ['蒙自县', '个旧市', '开远市', '绿春县', '建水县', '石屏县', '弥勒县', '泸西县', '元阳县', '红河县', '金平苗族瑶族傣族自治县',
+						'河口瑶族自治县', '屏边苗族自治县'
+					],
 				},
 				{
 					name: '文山壮族苗族自治州',
@@ -1919,7 +1979,9 @@ export default {
 			name: '陕西省',
 			city: [{
 					name: '西安市',
-					area: ['莲湖区', '新城区', '碑林区', '雁塔区', '灞桥区', '未央区', '阎良区', '临潼区', '长安区', '高陵县', '蓝田县', '户县', '周至县'],
+					area: ['莲湖区', '新城区', '碑林区', '雁塔区', '灞桥区', '未央区', '阎良区', '临潼区', '长安区', '高陵县', '蓝田县', '户县',
+						'周至县'
+					],
 				},
 				{
 					name: '铜川市',
@@ -1931,7 +1993,9 @@ export default {
 				},
 				{
 					name: '咸阳市',
-					area: ['秦都区', '渭城区', '杨陵区', '兴平市', '礼泉县', '泾阳县', '永寿县', '三原县', '彬县', '旬邑县', '长武县', '乾县', '武功县', '淳化县'],
+					area: ['秦都区', '渭城区', '杨陵区', '兴平市', '礼泉县', '泾阳县', '永寿县', '三原县', '彬县', '旬邑县', '长武县', '乾县',
+						'武功县', '淳化县'
+					],
 				},
 				{
 					name: '渭南市',
@@ -1939,7 +2003,9 @@ export default {
 				},
 				{
 					name: '延安市',
-					area: ['宝塔区', '安塞县', '洛川县', '子长县', '黄陵县', '延川县', '富县', '延长县', '甘泉县', '宜川县', '志丹县', '黄龙县', '吴起县'],
+					area: ['宝塔区', '安塞县', '洛川县', '子长县', '黄陵县', '延川县', '富县', '延长县', '甘泉县', '宜川县', '志丹县', '黄龙县',
+						'吴起县'
+					],
 				},
 				{
 					name: '汉中市',
@@ -2107,7 +2173,9 @@ export default {
 				},
 				{
 					name: '喀什地区',
-					area: ['喀什市', '巴楚县', '泽普县', '伽师县', '叶城县', '岳普湖县', '疏勒县', '麦盖提县', '英吉沙县', '莎车县', '疏附县', '塔什库尔干塔吉克自治县'],
+					area: ['喀什市', '巴楚县', '泽普县', '伽师县', '叶城县', '岳普湖县', '疏勒县', '麦盖提县', '英吉沙县', '莎车县', '疏附县',
+						'塔什库尔干塔吉克自治县'
+					],
 				},
 				{
 					name: '克孜勒苏柯尔克孜自治州',
@@ -2143,7 +2211,9 @@ export default {
 				},
 				{
 					name: '伊犁哈萨克自治州',
-					area: ['伊宁市', '奎屯市', '伊宁县', '特克斯县', '尼勒克县', '昭苏县', '新源县', '霍城县', '巩留县', '察布查尔锡伯自治县', '塔城地区', '阿勒泰地区'],
+					area: ['伊宁市', '奎屯市', '伊宁县', '特克斯县', '尼勒克县', '昭苏县', '新源县', '霍城县', '巩留县', '察布查尔锡伯自治县', '塔城地区',
+						'阿勒泰地区'
+					],
 				},
 			],
 		},

main.js

@@ -5,7 +5,10 @@ import App from './App';
 import weappJwt from '@/common/weapp-jwt.js';
 Vue.prototype.$jwt = weappJwt;
 // requset请求
-import { requestBase, requestFile } from '@/common/api.js';
+import {
+	requestBase,
+	requestFile
+} from '@/common/api.js';
 Vue.prototype.$api = requestBase;
 Vue.prototype.$apifile = requestFile;
 // 配置文件
@@ -14,6 +17,9 @@ Vue.prototype.$config = config;
 // 全局分享
 import share from "@/common/share.js"
 Vue.mixin(share);
+// 实时通信
+import store from '@/store/websocketStore.js'
+Vue.prototype.$store = store;
 // 主体组件
 import mobileFrame from '@/components/mobile-frame/index.vue';
 Vue.component('mobile-frame', mobileFrame);
@@ -21,18 +27,21 @@ Vue.component('mobile-frame', mobileFrame);
 Vue.config.productionTip = false;
 App.mpType = 'app';
 const app = new Vue({
-  ...App,
+	...App,
+	store
 });
 app.$mount();
 // #endif
 
 // #ifdef VUE3
-import { createSSRApp } from 'vue';
+import {
+	createSSRApp
+} from 'vue';
 export function createApp() {
-  const app = createSSRApp(App);
-  return {
-    app,
-  };
+	const app = createSSRApp(App);
+	return {
+		app,
+	};
 }
 // #endif
 

pages/index/index.vue

@@ -29,7 +29,7 @@
 						key: 'token',
 						success: async (res) => {
 							let arr = await that.$api(`/user/cct`, 'POST');
-							if (arr.errcode == '0'){
+							if (arr.errcode == '0') {
 								uni.setStorage({
 									key: 'token',
 									data: arr.data,

pages/login/index.vue

@@ -456,13 +456,14 @@
 											})
 											let user = that.$jwt(res.data);
 											// 如果是团长，请求刷新
-											if (user.is_leader=='0'){
+											if (user.is_leader == '0') {
 												let pages = getCurrentPages();
 												let prePage = pages[pages.length - 2];
 												let prePage2 = pages[pages.length - 3];
-												if (prePage.route == 'pagesHome/order/detail') prePage.$vm.search()
-												if (prePage2.route == 'pages/home/index'){
-													prePage2.$vm.clearPage(); 
+												if (prePage.route == 'pagesHome/order/detail') prePage.$vm
+													.search()
+												if (prePage2.route == 'pages/home/index') {
+													prePage2.$vm.clearPage();
 													prePage2.$vm.search();
 												}
 											}

pages/message/index.vue

@@ -59,6 +59,19 @@
 			await that.watchlogin();
 			uni.stopPullDownRefresh();
 		},
+		computed: {
+			listenWebsocket() {
+				return this.$store.state.websocketData;
+			}
+		},
+		watch: {
+			listenWebsocket: function(newstr) {
+				if (newstr.type == 'chat') {
+					this.clearPage()
+					this.search();
+				}
+			}
+		},
 		methods: {
 			// 监听用户是否登录
 			watchlogin() {

pagesMessage/message/info.vue

@@ -76,16 +76,11 @@
 				// 判断是否下拉刷新复位
 				triggered: false,
 				scrollToView: '', //滑动最后一条信息
-				isSocketOpen: false, //socket是否打开
-				pingpangTimes: null, //socket心跳计时器
-				timeoutnum: null, //断开 重连倒计时，
-				closeType: 1, //断开判断：0代表不重连，1代表重连
+				ws: null,
 			};
 		},
 		onShow() {
 			const that = this;
-			// that.initWebpack(); //初始化
-			that.closeType = 1 //进入改为1，代表如果断开链接自动重连
 			that.clearPage();
 			if (that.id) that.search()
 		},
@@ -95,11 +90,18 @@
 			that.$set(that, `shop_id`, e.shop);
 			that.watchlogin();
 		},
-		beforeDestroy() {
-			const that = this;
-			that.closeType = 0 //离开页面前改为0，代表离开后断开链接不再重连
-			clearInterval(that.pingpangTimes) //清除socket心跳定时器
-			uni.closeSocket() //关闭socket
+		computed: {
+			listenWebsocket() {
+				return this.$store.state.websocketData;
+			}
+		},
+		watch: {
+			listenWebsocket: function(newstr) {
+				if (newstr && newstr.type == 'chat' && newstr.room == this.id) {
+					this.msgList.push(newstr);
+					this.goBottom();
+				}
+			}
 		},
 		methods: {
 			// 监听用户是否登录
@@ -179,76 +181,6 @@
 				// 如果是下拉刷新聊天记录不跳到最后一条
 				if (that.is_bottom == true) that.goBottom();
 			},
-			// 初始化websocket链接
-			initWebpack() {
-				const that = this;
-				let config = that.$config;
-				let url = `wss://${config.stompUrl}/ws/exchange/t_m_dev_local/635f82e62df39d4755a25a4a`;
-				//创建新的socket连接前确保旧的已关闭
-				uni.closeSocket();
-				//创建一个socket连接
-				uni.connectSocket({
-					url,
-					success: function(res) {
-						console.log(res, 's');
-					},
-					fail: function(err) {
-						console.log(err, 'e');
-					}
-				});
-				//监听socket打开
-				uni.onSocketOpen(() => {
-					that.isSocketOpen = true
-					console.log('WebSocket连接已打开！');
-				})
-				//监听socket关闭
-				uni.onSocketClose(() => {
-					that.isSocketOpen = false
-					//断开链接时判断
-					if (that.closeType == 0) return
-					that.reconnect(); //重连
-					console.log('WebSocket连接已关闭！');
-				})
-				//监听socket错误
-				uni.onSocketError(() => {
-					that.isSocketOpen = false
-					//断开链接时判断
-					if (that.closeType == 0) return
-					that.reconnect(); //重连
-					console.log('WebSocket连接打开失败');
-				})
-				//监听socket消息
-				uni.onSocketMessage((res) => {
-					let info = JSON.parse(res.data)
-					if (info.cadmin != 5) {
-						that.msgList = that.msgList.concat(info) //获取实时聊天内容信息
-					}
-				})
-				//先确保清除了之前的心跳定时器
-				clearInterval(that.pingpangTimes)
-				//每过一段时间发送一次心跳，发送Ping,服务器会反馈pong，这样操作以保持socket一直是连接状态，防止断开连接，心跳停止
-				that.pingpangTimes = setInterval(() => {
-					uni.sendSocketMessage({
-						data: "ping",
-						success: () => {},
-						fail: () => {
-							that.isSocketOpen = false
-						}
-					});
-				}, 60000)
-			},
-			//重新连接
-			reconnect() {
-				const that = this;
-				//防止重复链接
-				if (that.isSocketOpen) return;
-				that.isSocketOpen = true;
-				//没连接上会一直重连，设置延迟避免请求过多
-				that.timeoutnum && clearTimeout(that.timeoutnum);
-				that.timeoutnum = setTimeout(function() {
-					that.initWebpack(); //新连接
-				}, 5000);
-			},
 			// 进行图片的预览
 			previewImg(e) {
 				const that = this;
@@ -259,7 +191,8 @@
 					longPressActions: {
 						itemList: ['发送给朋友', '保存图片', '收藏'],
 						success: function(data) {
-							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) +
+								'张图片');
 						},
 						fail: function(err) {
 							console.log(err.errMsg);
@@ -281,39 +214,18 @@
 						"msg_type": e.type
 					};
 					// 发送给服务器消息
-					// if (that.isSocketOpen) { //socket连接正常
 					if (!that.id) data.shop = that.shop_id
 					let res = await that.$api(`/chatRecord`, `POST`, data, 'chat');
 					if (res.errcode == '0') {
 						that.msgList.push(res.data);
-						// data = JSON.stringify(data) //后端规定的评论数据格式:json转字符串
-						// uni.sendSocketMessage({
-						// 	data,
-						// 	success: () => {
-						// 		uni.showToast({
-						// 			title: '发送成功',
-						// 			icon: 'none'
-						// 		})
-						// 	},
-						// 	fail: () => {
-						// 		uni.showToast({
-						// 			title: '发送失败，请稍后再试或重新进入此页面尝试',
-						// 			icon: 'none'
-						// 		})
-						// 	}
-						// });
+						// 发送websocket
+						that.$store.dispatch('websocketSend', res.data)
 					} else {
 						uni.showToast({
 							title: res.errmsg,
 							icon: 'none'
 						})
 					}
-					// } else { //socket已断开
-					// 	uni.showToast({
-					// 		title: '聊天断开啦，请重新进入此页面尝试 ~',
-					// 		icon: 'none'
-					// 	})
-					// }
 					// 跳转到最后一条数据 与前面的:id进行对照
 					that.goBottom();
 				} else {

store/websocketStore.js

@@ -0,0 +1,103 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+	state: {
+		socketTask: null,
+		websocketData: {}, // 存放从后端接收到的websocket数据
+		// Socket连接状态
+		IsOpen: false,
+	},
+	mutations: {
+		setWebsocketData(state, data) {
+			state.websocketData = data
+		}
+	},
+	actions: {
+		websocketInit({
+			state,
+			dispatch
+		}, url) {
+			// 防止重复连接
+			if (state.IsOpen) return;
+			// 连接
+			state.socketTask = uni.connectSocket({
+				url, // url是websocket连接ip
+				success: () => {
+					state.IsOpen == true
+					console.log('WebSocket连接成功！')
+				},
+				fail: e => {
+					console.log('连接失败' + e)
+				}
+			})
+			state.socketTask.onOpen(() => dispatch('websocketOnOpen'))
+			state.socketTask.onMessage(res => dispatch('websocketOnMessage', res))
+			state.socketTask.onClose(e => dispatch('websocketOnClose'))
+			state.socketTask.onError(e => dispatch('websocketOnError'))
+		},
+		websocketOnOpen({
+			commit
+		}) {
+			console.log('WebSocket连接正常打开中...！')
+		},
+		// 收到数据
+		websocketOnMessage({
+			commit
+		}, res) {
+			let data;
+			try {
+				data = JSON.parse(res.data)
+			} catch {
+				data = {
+					content: res.data
+				}
+			}
+			commit('setWebsocketData', data);
+
+		},
+		websocketOnClose({
+			commit,
+			dispatch
+		}) {
+			console.log('WebSocket连接关闭')
+		},
+		websocketOnError({
+			commit,
+			dispatch
+		}) {
+			console.log('WebSocket连接错误')
+		},
+		websocketClose({
+			state
+		}) {
+			if (!state.socketTask) return
+			state.socketTast.close({
+				success(res) {
+					console.log('关闭成功', res)
+				},
+				fail(err) {
+					console.log('关闭失败', err)
+				}
+			})
+		},
+		// 发送数据
+		websocketSend({
+			state
+		}, data) {
+			uni.sendSocketMessage({
+				data,
+				success: res => {
+					console.log('发送成功', res)
+				},
+				fail: e => {
+					console.log('发送失败', e)
+				}
+			})
+		}
+	}
+
+})
+
+export default store