使用uniapp的WebSocket建立聊天框

在APP.vue文件

<script>
	export default {
		globalData:{
			connectUrl:"ws://*******************.com:8282",//url
		},
		onLaunch: function() {
			this.createConnect();
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods:{
			createConnect(){
				let _this = this;
				uni.connectSocket({
					url:_this.globalData.connectUrl,
					complete:res=>{
						console.log(res)
					}
				});
				uni.onSocketOpen(function (res) {
				  _this.sendMessage("keep connected");
				  if(uni.getStorageSync("jzToken")){
					  _this.sendMessage({"contacts":2});
				  }
				  
				  setInterval(()=>{
					  _this.sendMessage("keep connected");
				  },30000)
				});
				uni.onSocketMessage(function (res) {
					console.log(res)
				  let data = JSON.parse(res.data);
					console.log(data.num);
				  if (data.state == 2 && data.num>0){
						uni.setTabBarBadge({
						  index: 3,
						  text: data.num.toString()
						});
					}else if(data.state == 2 && data.num == 0){
						uni.hideTabBarRedDot({
							index:3
						})
					}
				});
				uni.onSocketError(function (res) {
				  console.log('WebSocket连接打开失败，请检查！');
				});
				uni.onSocketClose(function(res){
					console.log(res)
					// uni.connectSocket({url:_this.globalData.connectUrl,complete:res=>{console.log(res)}});
				})
				
			},
			sendMessage(data){
				if(data != "keep connected"){
					data.token = uni.getStorageSync("jzToken");
					data = JSON.stringify(data);
				}
				console.log(data)
				uni.sendSocketMessage({
					data
				})
			},
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "uview-ui/index.scss";
	
</style>

2.聊天框所在的文件，如news.vue

<template>
	<view class="ChatBox" :style="{'padding-top':appInfo.statusBarHeight+'px'}">
		<!-- #ifdef APP-PLUS -->
		<view class="titleWrap" :style="{'padding-top':appInfo.statusBarHeight+'px'}">
			<view>
				聊天框
				<image src="../../static/index/release/back.png" @click="back"></image>
			</view>
		</view>
		<view style="width: 100%;height: 88upx;"></view>
		<!-- #endif -->
		<scroll-view :scroll-y="true" :scroll-top="scrollTop" :class="['ChatContent',isMenuItem?'active':'']" :style="{'padding-top':appInfo.statusBarHeight+'px'}">
			<view style="display: flex;flex-direction: column-reverse;">
				<view class="ChatItem" v-for="(item,index) in list" :key="index">
					<view class="ChatTime" v-if="item.timeShow">{
  {item.create_time}}</view>
					<view class="ChatList">
						<view class="ChatList_L" v-if="item.mainUser.id != userId">
							<view class="ChatImage">
								<image :src="getImage(item.mainUser.image)" mode="" style="border-radius: 50%;"></image>
							</view>
							<view class="contentBox" v-if="item.type==1">
								<view class="content">
									{
  {item.news}}
								</view