uniapp聊天

在这里插入代码片
<template>
	<view>
		<view class="bgC"></view>
		<view class="content"  >
			<view v-for="(item,index) in message">
				<view class="flex flex-ac mar-T11" :class="item.static?'flex-drr':''">
					<image class="w50h50 mar-20" :src="item.image" mode=""></image>
					<view class="mar-L20 mar-R20 bg-f pad-10 bor-r10">
						<rich-text :key="index" :nodes="item.htmll"></rich-text> 
					</view>
				</view>
			</view>
			
		</view>
		
		
		<view class="fotBtn  flex flex-ac flex-ja">
			<view class="h50 w500  bg-f bor-r5"><input v-model="inputMsg"  class="w01h1 font-30 cor-3" type="text" value="" /></view>
			<view class="w100  h50 flex flex-ac flex-jc bor-r10 bg-fcce77" @click="sendMessage">
				<text class="cor-f">发送</text>
			</view>
		</view>
	</view>
</template>

<script>
	import BASE_URL from "../../API/BASE_URL.js"
	export default {
		data() {
			return {
				BASE_URL,
				message:[],
				inputMsg:'',
				states:false,
				userData:{}
			}
		},
		onLoad(e) {
			this.userData=JSON.parse(e.userData)
			
			this.found()
			this.getHeight()
		},
		methods: {
			//点击发送执行的函数
			sendMessage(){
				/*
				 *htmll为后端返回的文字内容
				 *static来判断是谁发送的消息，true为用户，false为客服，用处就flex-drr动态类是否添加
				 *image为头像图片
				*/
				if(this.inputMsg){
					//给服务器发送信息
					this.sendMsg()
					//自己的数组添加数据
					this.message.push({htmll:`<span>${this.inputMsg}</sapn>`,static:true,image:this.BASE_URL+this.userData.head_img})
					//清空输入框数据
					this.inputMsg=''
				}else{
					/**
					 * 弹框
					 * */
					uni.showToast({
						icon:"none",
						title:"请输入内容，再点击发送"
					})
				}
				this.getHeight()
			},
			//获取content的高
			/**
			 * 获取content的高，使用uni自带的pageScrollTo滑动到最下面
			 * 
			 * */
			getHeight(){
				//利用原生方法获取节点
				let he = document.getElementsByClassName("content")[0]
				//利用getComputedStyle获取节点的高
				let viewH =window.getComputedStyle(he).height
				//删除高单位px，再转成数字
				viewH=viewH.slice(0,viewH.length-2)-0
				uni.pageScrollTo({
				    scrollTop: viewH,
				    duration: 100
				});
			},
			found(){
				/**
				 * 创建一个 WebSocket 连接。
				 * */
				uni.connectSocket({
					url:"xxxxxxxxxxxx",
					success: () => {
						this.openSock()
					}
				})
			},
			openSock(){
				let msg=JSON.stringify({type:"ordertaker_bind",member_id:this.userData.user_id}) 
				// '{"type":"ordertaker_bind","member_id":"5"}'
				// 监听WebSocket连接打开事件。
				uni.onSocketOpen((res) => {
					// 通过 WebSocket 连接发送数据，需要先 uni.connectSocket，并在 uni.onSocketOpen 回调之后才能发送。
					uni.sendSocketMessage({
						data: msg,
					})
				});
				//监听WebSocket接受到服务器的消息事件。
				uni.onSocketMessage( (res) => {
					let getmsg=JSON.parse(res.data)
					// 如果getmsg.type==="ordertaker_bind"为聊天记录，getmsg.type==="send_to_member"为事实的消息
					if(getmsg.type==="ordertaker_bind"){
						getmsg.data.forEach((item)=>{
							this.message.push({htmll:`<span>${item.content}</sapn>`,static:item.type==="3"?true:false,image:item.avatar})
						})
					}else if(getmsg.type==="send_to_member"){
						this.message.push({htmll:`<span>${getmsg.data.content}</sapn>`,static:false,image:getmsg.data.avatar})
					}
					this.getHeight()
				});
				// 定时器，定时给服务器发送 data:'{"type":"ping"}',
				setInterval(()=>{
					uni.sendSocketMessage({
						data:'{"type":"ping"}',
					})
				},9000)
			},
			//每次点击发送执行的函数，可以合在一起写但是我分开了
			sendMsg(){
					uni.sendSocketMessage({
						data:'{"type":"ordertaker_send_message","content":"'+this.inputMsg+'"}',
					})
			},
			
		},
	}
</script>

<style scoped>
	.content{
		padding-bottom: 200rpx;
	}
	.fotBtn{
		background-color: #FAF7FA;
		width: 100%;
		height: 80rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		border-top: 1rpx solid #DDDDDD;
	}
	.h50{
		height: 50rpx;
	}
	.w500{
		width: 500rpx;
	}
	.w100{
		width: 100rpx;
	}
	.bor-r5{
		border-radius: 5rpx;
	}
	.bor-r10{
		border-radius: 10rpx;
	}
	.w50h50{
		min-width: 50rpx;
		min-height: 50rpx;
		max-width: 50rpx;
		max-height: 50rpx;
	}
	.ces{
		display: inline-block;
		height: 80rpx;
		border: 1rpx solid #FF0000;
	}
	.mar-20{
		margin: 20rpx;
	}
	
</style>

原文地址：https://blog.csdn.net/qq_45503103/article/details/108253848