uniapp webSocket聊天功能

<template>
	<view class="content">
		<view class="cul-wrapper">
			<block v-for="(item,index) in msgs" :key="index">
				<view class="cul-date">{{formatDate}}</view>
				<view :class="item.isme?'msg-me':'msg-service'" :id="'msg-'+index">
					<view class="msg-text">
						<view class="msg-text-content">
							<text>{{item.msg}}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="operation">
			<input type="text" v-model="msgInfor"/>
			<image src="../../static/image/voice.png" style="width: 48rpx;height: 48rpx;"
			:style="{'margin':msgInfor ? '0 30rpx' : '0 40rpx'}"></image>
			<image v-show="!msgInfor" src="../../static/image/moreOption.png" style="width: 48rpx;height: 48rpx;"></image>
			<button v-show="msgInfor" class="btn" type="default" @click="sendMsg">发送</button>
		</view>
	</view>
</template>

<script>
	import {mapGetters, mapState} from 'vuex';
	export default {
		data() {
			return {
				msgInfor:'',
				msgs: [
					{
						isme:'1',
						msg:'我是客户'
					},
					{
						isme:'',
						msg:'我是客服'
					}
				],//消息列表
				socketOpen:false, //是否连接
				path:"ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5",
				socket:""
			}
		},
		computed: {
		    ...mapGetters({
		        // userCenter: 'mallConfig/getUserCenter',
		        userInfo: 'user/info',
		    }),
		},
		onLoad() {
			//进入这个页面的时候创建websocket连接
			this.sokcet();
		},
		mounted() {
			// this.sokcet();
		},
		methods: {
			//滚动到指定位置
			jumpScroll() {
				this.$nextTick(function() {
					uni.pageScrollTo({
						scrollTop: 999999,
						duration: 0
					});
				})
			},
			//创建websocket连接
			sokcet(){
				var that = this;
				uni.closeSocket();
				this.socketOpen = false;
				try{
					//WebSocket的地址
					var url = 'https://test.bvcrm.cn:3001';
					// 连接
					uni.connectSocket({
						url: url,
					});
					// 监听WebSocket连接已打开
					uni.onSocketOpen(function (res) {
					  console.log(res,'WebSocket连接已打开！');
					  that.socketOpen = true;
					});
					// 监听连接失败
					uni.onSocketError(function (err) {
					    console.log('WebSocket连接打开失败，请检查！',err);
						 // e.code === 1000  表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
						 // e.code !== 1000  表示非正常关闭。
						if(err && err.code!== 1000){
							setTimeout(function() {
							  that.socketOpen = true;
							  uni.connectSocket({
									url: url,
							  });
							}, 5 * 1000)
						}
					   
					   
					});
					// 监听连接关闭
					uni.onSocketClose(function (err) {
						console.log('WebSocket连接关闭！',err);
						if(err && err.code!== 1000){
							setTimeout(function() {
							  that.socketOpen = true;
							  uni.connectSocket({
									url: url,
							  });
							}, 5 * 1000)
						}
					});
					// 监听收到信息
					uni.onSocketMessage(function (res) {
						console.log(res,'WebSocket监听收到信息！',res);
						uni.hideLoading()
						//与后端规定好返回值分别代表什么，写业务逻辑
						// JSON.parse()
						let serverData = res.data; //这是字符串，如果要对象记得转换一下
					})	
				}catch(e){
					console.log(e)
				}
			},
			//向后端发送消息
			sendMsg(res){
				this.msgInfor = ''
				if(this.socketOpen==false){
					return
				}
				let data = JSON.stringify(res);
				try{
					//通过 WebSocket 连接发送数据
					uni.sendSocketMessage({
						data: data
					});
				}catch(e){
					console.log(e,'断线啦')
					uni.closeSocket();
				}
			},
		},
		//监听页面卸载
		onUnload(){
			console.log('退出页面')
			if(this.socketOpen==true){
				uni.closeSocket();
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		margin-bottom: 120rpx;
	}

	.cul-wrapper {
		padding: 0 35rpx;
		box-sizing: border-box;
	}

	.cul-date {
		padding-top: 20rpx;
		color: #999999;
		font-size: 24rpx;
		text-align: center;
	}

	.msg-me,
	.msg-service {
		display: flex;
		align-items: flex-start;
		width: 680rpx;
		margin: 30rpx 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.msg-me {
		justify-content: flex-end;
	}

	.msg-service {
		justify-content: flex-start;
	}

	.msg-text {
		width: 560rpx;
	}

	.msg-me>.msg-text {
		display: flex;
		justify-content: flex-end;
	}

	.msg-text-content {
		line-height: 44rpx;
		display: inline-block;
		box-sizing: border-box;
		padding:14rpx 25rpx;
		font-size: 28rpx;
	}

	.msg-me>.msg-text>.msg-text-content {
		background-color: #fff;
		font-size: 30rpx;
		/* border-top-right-radius: 44rpx;
		border-bottom-left-radius: 44rpx;
		border-top-left-radius: 44rpx; */
		border-radius: 15rpx;
		color: #333333;
	}

	.msg-service>.msg-text>.msg-text-content {
		background-color: #FFFFFF;
		font-size: 30rpx;
		/* border-bottom-left-radius: 44rpx;
		border-bottom-right-radius: 44rpx;
		border-top-right-radius: 44rpx; */
		border-radius: 15rpx;
		color: #333333;
	}

	.operation {
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		align-items: center;
		background: #F8F8F8;
		padding: 10px 35rpx;
		border-top: 1rpx solid rgba(184, 184, 184, 0.1);
		width: 100vw;
	}
	.operation input {
		width: 480rpx;
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
	}
	.btn {
		width: 116rpx;
		height: 58rpx;
		line-height: 58rpx;
		border-radius: 8rpx;
		background-color: #FE564B !important;
		font-size: 28rpx;
		color: #fff !important;
		margin: 0;
	}
</style>