uni模拟客服进行聊天

最新推荐文章于 2024-02-19 16:29:02 发布
最新推荐文章于 2024-02-19 16:29:02 发布
阅读量597 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nicehe/article/details/129798690
版权

**

首先说一下思路：

需要用到websocket
作用：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息
第一步：需要和websocket建立连接（由后端提供websocket服务器地址）
第二步：连接成功发送消息
第三步：收到消息并将消息渲染到页面
第四步：监听链接是否成功添加心跳
第五步：链接失败断开连接

**
**

原生的用法在浏览器里面是可以用的，但是打包成例如APP就必须要按照uni的写法来使用，简单举例 原生写法：
从商店进入聊天页面首先发一条商家信息，然后是文字发送

**

initwebsocket() {
				this.status = 'loading';
				//实例化websock
				this.websock = new WebSocket(path)//path是后端提供的
				//监听websock消息
				this.websock.onmessage = this.websocketonmessage
				//监听websock连接
				this.websock.onopen = this.websocketonopen
				//监听websock错误信息
				this.websock.onerror = this.websocketonerror
				//连接关闭
				this.websock.onclose = this.websocketclose
			},
			websocketsend(data) {
				console.log(data)
				console.log(this.websocket)
				if (this.websocket == undefined) {
					console.log(1)
					this.addMessage(data)
				}
				this.websock.send(data)
			},
			websocketonopen() {
				console.log('初始化成功')
				this.websocketsend(JSON.stringify({
					'uid': this.user_id,
					'type': 0
				}))
				uni.setNavigationBarTitle({
					title: this.shopname
				})
				this.load = false
				this.numconnect = 0;
				//心跳
				if (!this.heartbeat) {
					this.load = true
					this.heartbeat = setInterval(() => {
						this.websocketsend(JSON.stringify({
							'type': 'ping'
						}), 1)
					}, 1000 * 50);
				}
				if (this.fa == 1) { //首次进入先发送
					if (this.name != "") { //从商店进入发送商店信息
						this.sendsp()
					}
					this.fa = 2 //只发送一次
				}

			},
			websocketonmessage(e) {
				this.data = JSON.parse(e.data)
				//判断发送消息是接受者还是发送者且获取信息push新数组
				if (this.data.uid == this.user_id && this.data.to_uid == this.touid) {
					let resmsg = {
						isme: true,
						type: this.data.type,
						msg: this.data.msg
					}
					this.chatlist.push(resmsg)
				}
				if (this.data.uid == this.touid && this.data.to_uid == this.user_id) {
					let resmsg = {
						isme: false,
						type: this.data.type,
						msg: this.data.msg
					}
					this.chatlist.push(resmsg)
				}
				this.load = false;
				setTimeout(() => {
					uni.pageScrollTo({
						duration: 0,
						scrollTop: 999999 //滚动高度，单位px，这里也可用选择器属性:selector:选择器
					})
				}, 50)
			},
			websocketonerror() {
				this.initwebsocket()
			},
			websocketclose() {
				this.reconnectsys()
			},
			reconnectsys() {
				if (this.sysconnect > 0) {
					this.sysconnect--;
					this.numconnect++;
					this.load = true
					this.loadingText = '第' + this.numconnect + '次重连'
					setTimeout(() => {
						this.initwebsocket()
					}, 10000);
				} else {
					this.loadingText = '连接超时'
				}

			},
			//发送商店信息
			sendsp() {
				let messagedata = {
					uid: this.user_id,
					to_uid: this.touid,
					type: 6,
					msg: {
						"shopname": this.shopname, //对方聊天的名字
						"shopid": this.touid, //对方聊天的userID
						"shop_id": this.shop_id, //商店ID
						"name": this.name, //商店名称
						"photos": this.photos, //商店图片
						// "shopname": this.name, //对方聊天的名字
					}
				}
				this.websocketsend(JSON.stringify(messagedata))

			},
			//发送文字
			sendtext() {
				if (this.txt.trim() == "") { //清除空格且判断是否为空
					uni.showToast({
						title: "请输入内容",
						icon: "error",
						duration: 2000
					})
				} else {
					let messagedata = {
						uid: this.user_id,
						to_uid: this.touid,
						type: 1,
						msg: this.txt.trim()
					}
					this.websocketsend(JSON.stringify(messagedata))
					setTimeout(() => {
						uni.pageScrollTo({
							scrollTop: 999999,
							duration: 0, // 间隔时间
						})
					})
					this.txt = ""
				}

			},

**

uni写法，可查看uni官方文档

**

iniSys() {
				// 1.建立链接
				this.sys_info.socket = uni.connectSocket({
					url: this.sys_info.path,
					success: (e) => {
						console.log('链接建立成功', e)
					}
				});
				// 2.打开链接
				this.sys_info.socket.onOpen((e) => {
					console.log('链接建立')
					let obj = {
						uid: this.user_info.user_id,
						type: 0
					};
					// 建立映射关系
					this.sendMsg(JSON.stringify(obj));
					// 发送店铺或商品信息卡片
					if (!this.send_info.log) {
						// 为确保信息获取到，延迟发送
						this.sendShopOrGoods();
					}
				});
				// 3.监听错误
				this.sys_info.socket.onError((e) => {
					console.log('链接错误：', e.errMsg);
				});
				// 4.监听WebSocket接受到服务器的消息事件
				this.sys_info.socket.onMessage((e) => {
					let data = JSON.parse(e.data);
					console.log('接收到推送信息',data);
					if ((data.uid == this.user_info.user_id && data.to_uid ==this.to_info.to_uid) || (data.uid ==this.to_info.to_uid && data.to_uid == this.user_info.user_id)) {
						// 处理消息
						this.setMsg(data, 2);
						// 滚动到最底部
						this.setScroll();
					}
				});
				// 5.断线重连
				this.sys_info.socket.onClose((e) => {
					console.log('链接关闭：', e);
					this.reConnect();
				});
				// 6.心跳
				this.heartJump();
			},
			// socket重连
			reConnect() {
				if (this.sys_info.sysconnect > 0) {
					this.sys_info.sysconnect--;
					this.sys_info.numconnect++;
					console.log('第' + this.sys_info.numconnect + '次重连');
					setTimeout(() => {
						this.iniSys();
					}, 10000);
				} else {
					console.log('连接已超时');
				}
			},
			// 心跳
			heartJump() {
				if (!!!this.heartbeat) {
					this.heartbeat = setInterval(() => {
						this.sendMsg(JSON.stringify({
							type: 'ping'
						}))
					}, 1000 * 30)
				}
			},
			// 发送店铺/商品信息
			sendShopOrGoods() {
				if (this.send_info.type == 1) {
					// 发送店铺消息,且没有发送过消息
					let obj = {
						uid: this.user_info.user_id,
						to_uid: this.to_info.to_uid,
						type: 6,
						msg: {
							page_title: this.shop_info.shop_name,
							shop_id: this.shop_info.shop_id,
							name: this.shop_info.shop_name,
							photos: this.shop_info.shop_photo
						}
					};
					this.sendMsg(JSON.stringify(obj));
					this.send_info.log = true;
				}
				if (this.send_info.type == 2) {
					// 发送商品信息
					let obj = {
						uid: this.user_info.user_id,
						to_uid: this.to_info.to_uid,
						type: 5,
						msg: {
							page_title: this.shop_info.shop_name,
							shop_id: this.shop_info.shop_id,
							goods_id: this.goods_info.goods_id,
							title: this.goods_info.goods_name,
							photo: this.goods_info.goods_photo,
							price: this.goods_info.price
						}
					};
					this.sendMsg(JSON.stringify(obj))
					this.send_info.log = true;
				}
			},
			sendMsg(data) {
				if (!!this.sys_info.socket) {
					// 发送消息
					this.sys_info.socket.send({
						data: data,
						success: (e) => {
							console.log('消息推送成功',data)
						},
						fail: (e) => {
							console.log("消息推送失败",data)
						}
					})
				} else {
					// 调接口发送消息
					this.addMsg(data);
				}
			},
			setMsg(data, from = 1) {
				// 处理接受到的消息:from[1聊天记录消息；2推送消息]
				console.log(from==1 ? '处理接收到的信息' : '发送的信息',data)
				console.log('处理消息-发送人信息',this.user_info)
				console.log('处理消息-接收人信息',this.to_info)
				let obj = {};
				obj.type = data.type;
				if(from == 1){
					if (data.user_id == this.user_info.user_id) {
						obj.isme = true;
						obj.nickname = this.user_info.nickname;
						obj.face = this.user_info.face;
					} else {
						obj.isme = false;
						obj.nickname = this.to_info.to_nickname;
						obj.face = this.to_info.to_face;
					}
				}
				if(from == 2){
					if (data.uid == this.user_info.user_id) {
						obj.isme = true;
						obj.nickname = this.user_info.nickname;
						obj.face = this.user_info.face;
					} else {
						obj.isme = false;
						obj.nickname = this.to_info.to_nickname;
						obj.face = this.to_info.to_face;
					}
				}

				if (data.type == 1) {
					// 文字消息
					obj.msg = data.msg;
				}
				if (data.type == 2) {
					// 图片消息
					obj.img_url = data.msg;
				}
				// 音频消息
				// if(data.type == 3){}
				// 文件消息
				// if(data.type == 4){}
				if (data.type == 5) {
					// 商品消息
					obj.goods_id = data.msg.goods_id;
					obj.goods_img = data.msg.photo;
					obj.goods_title = data.msg.title;
					obj.goods_price = data.msg.price;
				}
				if (data.type == 6) {
					// 店铺消息
					obj.shop_id = data.msg.shop_id;
					obj.shop_img = data.msg.photos;
					obj.shop_name = data.msg.name;
				}
				if (from == 1) {
					// 聊天记录往前插入
					this.chatlist.unshift(obj);
				}
				if (from == 2) {
					// 推送消息往后插入
					this.chatlist.push(obj);
				}
			},
			//点击发送按钮
			sendText() {
				if (this.txt.trim() == "") { //清除空格且判断是否为空
					uni.showToast({
						title: "请输入内容",
						icon: "error",
						duration: 1000
					})
				} else {
					let obj = {
						uid: this.user_info.user_id,
						to_uid: this.to_info.to_uid,
						type: 1,
						msg: this.txt.trim()
					}
					this.sendMsg(JSON.stringify(obj));
					this.txt = "";
				}
			},

**

因为uni打包其他不可以直接用原生，所以比较推荐用uni写法，最后附上全部代码

**

<template>
	<view style="height: auto !important;">
		<view class="chat-body">
			<u-loadmore :status="page_info.status" :loadingText="page_info.loadingText" v-show="page_info.load" />
			<view v-for="(item,index) in chatlist" :key="index">
				<view class="chat-one" v-if="!item.isme">
					<image :src="item.face" mode="" />
					<view class="chat-box">
						<view class="chat-sender" style="width: 70px;">
							{{item.nickname}}
						</view>
						<view class="chat-content" v-if="item.type == 1">
							{{item.msg}}
						</view>
						<view class="chat-img" v-if="item.type == 2">
							<image :src="item.img_url" mode="widthFix" />
						</view>
						<view class="chat-goos" v-if="item.type == 5" @click="goodsid(item.goods_id)">
							<view class="left">
								<image :src="item.goods_img" mode=""></image>
							</view>
							<view class="right">
								<text>{{item.goods_title}}</text><br>
								<text style="font-size: 13px;">￥{{item.goods_price}}</text>
							</view>
						</view>
						<view class="chat-goos" v-if="item.type == 6" @click="spid(item.shop_id)">
							<view class="left">
								<image :src="item.shop_img" mode=""></image>
							</view>
							<view class="right">
								<text>{{item.shop_name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="chat-one" style="text-align: right;" v-if="item.isme">
					<view class="chat-box">
						<view class="chat-sender" style="display: inline-block;text-align: right;" v-if="item.isme">
							{{item.nickname}}
						</view>
						<view class="chat-content" v-if="item.type == 1">
							{{item.msg}}
						</view>
						<view class="chat-img" v-if="item.type == 2">
							<image :src="item.img_url" mode="widthFix" />
						</view>
						<view class="chat-goos" v-if="item.type == 5" @click="goodsid(item.goods_id)">
							<view class="left">
								<image :src="item.goods_img" mode=""></image>
							</view>
							<view class="right">
								<text>{{item.goods_title}}</text><br>
								<text style="font-size: 13px;">￥{{item.goods_price}}</text>
							</view>
						</view>
						<view class="chat-goos" v-if="item.type == 6" @click="spid(item.shop_id)">
							<view class="left">
								<image :src="item.shop_img" mode=""></image>
							</view>
							<view class="right">
								<text>{{item.shop_name}}</text>
							</view>
						</view>
					</view>
					<image :src="item.face" mode="" />
				</view>
			</view>
			<view class="send">
				<input type="text" value="" placeholder="请输入聊天内容" v-model="txt" />
				<image src="../../static/xiangce.png" @click="sendImg"></image>
				<button type="default" @click="sendText">发送</button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chatlist: [], //聊天记录
				txt: "", //发送消息
				send_info: {
					type: 0, //0进入页面不发送消息；1发送店家信息；2发送商品信息
					log: false, //true有发送记录；false没有发送记录
				},
				user_info: { //发送消息用户信息
					user_id: uni.getStorageSync("user_id"), //发送消息人uid
					nickname: uni.getStorageSync("nickname"), //发送消息人昵称
					face: uni.getStorageSync("myphoto") //发送消息人头像
				},
				to_info: { //接收消息用户信息
					to_uid: '', //接收消息人uid
					to_nickname: '', //接收消息人昵称
					to_face: '' //接收消息人头像
				},
				shop_info: { //店铺信息
					shop_id: '', //店铺shop_id
					shop_name: '', //店铺名称
					shop_photo: '' //店铺图片
				},
				goods_info: { //商品信息
					goods_id: '', //商品goods_id
					goods_name: '', //商品名称
					goods_photo: '', //商品图片
					price: '', //商品价格易货额
					xj: '' //商品现金
				},
				sys_info: { //websocket配置参数
					path: 'wss://chart.zhilongyihuo.com/wss', //websocket服务器地址
					socket: null, //websocket对象
					sysconnect: 3, //断线重连次数
					numconnect: 0, //重连计数
					heartbeat: null, //心跳对象
				},
				page_info: { //页面配置参数
					load: false, //聊天顶部提示信息控制开关
					loadingText: '正在连接', //聊天顶部提示信息
					status: 'loadmore', //loadmore:加载更多,loading:正在加载,nomore:加载完毕,没有了
					pageindex: 1, //分页当前页码
					count: 0, //聊天记录总数
					nums: 0, //已经获取到的聊天记录数目
				}
			}
		},
		onLoad(options) {
			// 设置配置参数
			this.setConfig(options);
			// 确保用户信息存在
			if (!!!this.user_info.user_id) {
				this.isLogin();
				return;
			}
			// 向上解决问题：把问题解决在源头
			// 获取聊天记录
			setTimeout(()=>{
				this.getchatlist();
			},300)
			// // 链接socket
			setTimeout(()=>{
				this.iniSys();
			},800)
		},
		destroyed() {
			// 生命周期结束关闭socket链接
			uni.closeSocket()
		},
		onShow() {},
		onPullDownRefresh() {
			if (this.page_info.nums < this.page_info.count) {
				this.page_info.status = 'loading';
				this.page_info.pageindex++;
				this.getchatlist();
				console.log("下拉翻页");
			}
		},
		methods: {
			setConfig(options) {
				if (!!options.user_id) {
					// 发送人user_id
					this.user_info.user_id = options.user_id;
					this.getUserInfo(this.user_info.user_id);
				}
				if (!!options.to_user_id) {
					// 接收人user_id
					this.to_info.to_uid = options.to_user_id;
					this.getUserInfo(this.to_info.to_uid, 2)
				}
				if (!!options.shop_id) {
					// 点击店铺进入页面
					this.getShopInfo(options.shop_id);
					this.send_info.type = 1;
				}
				if (!!options.goods_id) {
					// 点击商品进入页面
					this.getGoodsInfo(options.goods_id);
					this.send_info.type = 2;
				}
			},
			// 获取用户信息
			async getUserInfo(user_id, type = 1) {
				const res = await this.$myrequest({
					url: '/app/user/getUserInfo',
					method: 'POST',
					data: {
						user_id: user_id,
					},
				});
				if (res.data.code == 1) {
					let obj = res.data.data;
					if (type == 1) {
						// 发送人信息
						this.user_info.nickname = obj.nickname;
						this.user_info.face = obj.face;
					}
					if (type == 2) {
						// 接收人信息
						this.to_info.to_nickname = obj.nickname;
						this.to_info.to_face = obj.face;
						uni.setNavigationBarTitle({
							'title': obj.shop_name
						})
					}
				}
			},
			// 获取商店信息
			async getShopInfo(shop_id) {
				const res = await this.$myrequest({
					url: '/app/shop/details',
					method: 'POST',
					data: {
						shop_id: shop_id,
					},
				});
				if (res.data.code == 1) {
					let obj = res.data.data;
					this.shop_info.shop_id = obj.shop_id;
					this.shop_info.shop_name = obj.shop_name;
					this.shop_info.shop_photo = obj.photo;
				}
			},
			// 获取商品信息
			async getGoodsInfo(goods_id) {
				const res = await this.$myrequest({
					url: '/app/goods/details',
					method: 'POST',
					data: {
						goods_id: goods_id,
					},
				})
				if (res.data.code == 1) {
					let obj = res.data.data;
					this.shop_info.shop_id = obj.shop_id;
					this.shop_info.shop_name = obj.shop.shop_name;
					this.shop_info.shop_photo = obj.shop.photo;
					this.goods_info.goods_id = obj.goods_id;
					this.goods_info.goods_name = obj.title;
					this.goods_info.goods_photo = obj.photo;
					this.goods_info.price = obj.price;
					this.goods_info.xj = obj.xj;
				}
			},
			// 登录
			isLogin() {
				uni.showModal({
					content: '请先登录',
					success: (e) => {
						if (e.confirm) {
							// 点击确定按钮,跳转登录
							uni.navigateTo({
								url: "/pages/my/login"
							})
						}
						if (e.cancel) {
							// 点击取消按钮，返回上一页
							uni.navigateBack()
						}
					}
				})
				return;
			},
			// 让页面滚动到最底部
			setScroll() {
				setTimeout(() => {
					uni.pageScrollTo({
						duration: 0,
						scrollTop: 999999 //滚动高度，单位px，这里也可用选择器属性:selector:选择器
					})
				}, 50)
			},
			iniSys() {
				// 1.建立链接
				this.sys_info.socket = uni.connectSocket({
					url: this.sys_info.path,
					success: (e) => {
						console.log('链接建立成功', e)
					}
				});
				// 2.打开链接
				this.sys_info.socket.onOpen((e) => {
					console.log('链接建立')
					let obj = {
						uid: this.user_info.user_id,
						type: 0
					};
					// 建立映射关系
					this.sendMsg(JSON.stringify(obj));
					// 发送店铺或商品信息卡片
					if (!this.send_info.log) {
						// 为确保信息获取到，延迟发送
						this.sendShopOrGoods();
					}
				});
				// 3.监听错误
				this.sys_info.socket.onError((e) => {
					console.log('链接错误：', e.errMsg);
				});
				// 4.监听WebSocket接受到服务器的消息事件
				this.sys_info.socket.onMessage((e) => {
					let data = JSON.parse(e.data);
					console.log('接收到推送信息',data);
					if ((data.uid == this.user_info.user_id && data.to_uid == this.to_info.to_uid) || (data.uid ==
							this.to_info.to_uid && data.to_uid == this.user_info.user_id)) {
						// 处理消息
						this.setMsg(data, 2);
						// 滚动到最底部
						this.setScroll();
					}
				});
				// 5.断线重连
				this.sys_info.socket.onClose((e) => {
					console.log('链接关闭：', e);
					this.reConnect();
				});
				// 6.心跳
				this.heartJump();
			},
			// socket重连
			reConnect() {
				if (this.sys_info.sysconnect > 0) {
					this.sys_info.sysconnect--;
					this.sys_info.numconnect++;
					console.log('第' + this.sys_info.numconnect + '次重连');
					setTimeout(() => {
						this.iniSys();
					}, 10000);
				} else {
					console.log('连接已超时');
				}
			},
			// 心跳
			heartJump() {
				if (!!!this.heartbeat) {
					this.heartbeat = setInterval(() => {
						this.sendMsg(JSON.stringify({
							type: 'ping'
						}))
					}, 1000 * 30)
				}
			},
			// 发送店铺/商品信息
			sendShopOrGoods() {
				if (this.send_info.type == 1) {
					// 发送店铺消息,且没有发送过消息
					let obj = {
						uid: this.user_info.user_id,
						to_uid: this.to_info.to_uid,
						type: 6,
						msg: {
							page_title: this.shop_info.shop_name,
							shop_id: this.shop_info.shop_id,
							name: this.shop_info.shop_name,
							photos: this.shop_info.shop_photo
						}
					};
					this.sendMsg(JSON.stringify(obj));
					this.send_info.log = true;
				}
				if (this.send_info.type == 2) {
					// 发送商品信息
					let obj = {
						uid: this.user_info.user_id,
						to_uid: this.to_info.to_uid,
						type: 5,
						msg: {
							page_title: this.shop_info.shop_name,
							shop_id: this.shop_info.shop_id,
							goods_id: this.goods_info.goods_id,
							title: this.goods_info.goods_name,
							photo: this.goods_info.goods_photo,
							price: this.goods_info.price
						}
					};
					this.sendMsg(JSON.stringify(obj))
					this.send_info.log = true;
				}
			},
			sendMsg(data) {
				if (!!this.sys_info.socket) {
					// 发送消息
					this.sys_info.socket.send({
						data: data,
						success: (e) => {
							console.log('消息推送成功',data)
						},
						fail: (e) => {
							console.log("消息推送失败",data)
						}
					})
				} else {
					// 调接口发送消息
					this.addMsg(data);
				}
			},
			setMsg(data, from = 1) {
				// 处理接受到的消息:from[1聊天记录消息；2推送消息]
				console.log(from==1 ? '处理接收到的信息' : '发送的信息',data)
				console.log('处理消息-发送人信息',this.user_info)
				console.log('处理消息-接收人信息',this.to_info)
				let obj = {};
				obj.type = data.type;
				if(from == 1){
					if (data.user_id == this.user_info.user_id) {
						obj.isme = true;
						obj.nickname = this.user_info.nickname;
						obj.face = this.user_info.face;
					} else {
						obj.isme = false;
						obj.nickname = this.to_info.to_nickname;
						obj.face = this.to_info.to_face;
					}
				}
				if(from == 2){
					if (data.uid == this.user_info.user_id) {
						obj.isme = true;
						obj.nickname = this.user_info.nickname;
						obj.face = this.user_info.face;
					} else {
						obj.isme = false;
						obj.nickname = this.to_info.to_nickname;
						obj.face = this.to_info.to_face;
					}
				}

				if (data.type == 1) {
					// 文字消息
					obj.msg = data.msg;
				}
				if (data.type == 2) {
					// 图片消息
					obj.img_url = data.msg;
				}
				// 音频消息
				// if(data.type == 3){}
				// 文件消息
				// if(data.type == 4){}
				if (data.type == 5) {
					// 商品消息
					obj.goods_id = data.msg.goods_id;
					obj.goods_img = data.msg.photo;
					obj.goods_title = data.msg.title;
					obj.goods_price = data.msg.price;
				}
				if (data.type == 6) {
					// 店铺消息
					obj.shop_id = data.msg.shop_id;
					obj.shop_img = data.msg.photos;
					obj.shop_name = data.msg.name;
				}
				if (from == 1) {
					// 聊天记录往前插入
					this.chatlist.unshift(obj);
				}
				if (from == 2) {
					// 推送消息往后插入
					this.chatlist.push(obj);
				}
			},
			// 获取聊天记录
			async getchatlist() {
				this.status = 'loading';
				const res = await this.$myrequest({
					url: '/app/chat/lists?page=' + this.page_info.pageindex,
					method: 'POST',
					header: {
						'token': uni.getStorageSync("token"), //自定义请求头信息
					},
					data: {
						user_id: this.user_info.user_id,
						to_user_id: this.to_info.to_uid
					}
				});
				if (res.data.code == 1) {
					// 聊天记录总数
					this.page_info.count = res.data.data.count;
					// 已获取的聊天记录数目
					this.page_info.nums += res.data.data.list.length;
					if (res.data.data.count < 20) {
						// 加载下一页，<20条没有更多
						this.status = 'nomore';
					}
					if (res.data.data.list.length > 0) {
						res.data.data.list.forEach((e) => {
							this.setMsg(e);
						})
					}
					if (this.page_info.pageindex == 1) {
						// 渲染第一页聊天记录后，定位到页面最底部
						this.setScroll()
					}
				} else {
					this.status = "nomore"
					uni.showToast({
						title: res.data.msg,
						icon: "error",
						duration: 1000
					})
				}
			},
			//点击发送按钮
			sendText() {
				if (this.txt.trim() == "") { //清除空格且判断是否为空
					uni.showToast({
						title: "请输入内容",
						icon: "error",
						duration: 1000
					})
				} else {
					let obj = {
						uid: this.user_info.user_id,
						to_uid: this.to_info.to_uid,
						type: 1,
						msg: this.txt.trim()
					}
					this.sendMsg(JSON.stringify(obj));
					this.txt = "";
				}
			},
			//发送图片
			sendImg() {
				uni.chooseImage({
					count: 1, //选择图片张数
					sizeType: ['original', 'compressed'], //类型：压缩或者原图
					sourceType: ['album', 'camera'], //来源：相册或相机
					success: res => {
						this.uploadFilePromise(res.tempFilePaths[0])
						this.$nextTick(() => {
							uni.pageScrollTo({
								scrollTop: 99999,
								duration: 0
							})
						})
					}
				})
			},
			//上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://www.zhilongyihuo.com/index.php?s=/app/upload/uploadVideo', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							console.log(res.data)
							let obj = {
								uid: this.user_info.user_id,
								to_uid: this.to_info.to_uid,
								type: 2,
								msg: "https://www.zhilongyihuo.com/attachs/" + res.data
							}
							this.sendMsg(JSON.stringify(obj))
						}
					});
				})
			},

			// 发送聊天
			async addMsg(obj) {
				const res = await this.$myrequest({
					url: '/app/chat/addMessage',
					method: 'POST',
					header: {
						'token': uni.getStorageSync("token"), //自定义请求头信息
					},
					data: {
						msg: obj
					}
				});
				if (res.data.code == 1) {
					// 发送成功
					let e = JSON.parse(obj);
					if (e.type != 0 && e.type != 'ping') {
						// 处理消息
						await this.setMsg(e, 2);
						// 滚动到最底部
						this.setScroll();
					}
				} else {
					// 发送失败
					uni.showToast({
						title: res.data.msg,
						icon: "error",
						duration: 1000
					})
				}
			},

			//商品跳转信息
			goodsid(id) {
				uni.navigateTo({
					url: "/pages/goos_detail/goos_detail?id=" + id
				})
			},
			//商店跳转信息
			spid(id) {
				uni.navigateTo({
					url: "/pages/shop_detail/shop_detail?id=" + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.chat-body {
		width: 100%;
		background: #e1e1e1;
		top: 0px;
		padding-bottom: 70px;
		position: absolute;

		.chat-one {
			padding: 1%;

			image {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				display: inline-block;
				vertical-align: top
			}

			.chat-box {
				display: inline-block;
				vertical-align: sub;

				.chat-sender {
					width: 70px;
					background: #dadada;
					color: #888;
				}

				.chat-content {
					background: white;
					padding: 1%;
					border-radius: 5px;
					max-width: 300px;
					text-align: left;
				}

				.chat-goos {
					background: white;
					border-radius: 5px;
					max-width: 300px;
					display: flex;

					.left {
						display: inline-block;

						image {
							width: 100px;
							margin: 5px;
						}
					}

					.right {
						display: flex;
						flex-direction: column;
						justify-content: center;
						margin-right: 10px;
					}
				}

				image {
					border-radius: 0px;
					height: 88px;
					width: 200px;
				}
			}
		}

		.send {
			width: 96%;
			background: #d1d1d1;
			padding: 2%;
			position: fixed;
			bottom: 0;
			z-index: 9;

			input {
				width: 65%;
				height: 40px;
				display: inline-block;
				border-radius: 15px;
				background: white;
				padding-left: 3%;
			}

			image {
				width: 40px;
				height: 40px;
				margin-left: 5px;
			}

			button {
				display: inline-block;
				margin-left: 3%;
				height: 40px;
				background: #368fec;
				color: white;
				line-height: 40px;
				font-size: 15px;
			}
		}
	}
</style>

完结，撒花~欢迎大佬指正

nicehe
关注
uniapp(全端兼容) - 最新详细实现 “在线多端“ 实时聊天通讯功能，电商客服消息聊天列表实时接收发送消息，支持检测对方是否已读/未读、从相册发送图片、录制视频发送、发送本机文件、历史消息等等！
高级前端工程师
07-07 2273
uni-app，在线聊天，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，多端聊天，uni-app聊天页面发表情 发文件 发图片，微信小程序聊天发表情，IM聊天，即时通讯，超详细教程示例源码，IM聊天教程:发送图片/视频/语音/表情，聊天室，vue，仿微信聊天，钉钉聊天，消息列表，淘宝京东拼多多，客服聊天列表及聊天页面，已读，未读，发视频，发文件，IM聊天，实现app聊天页面功能，好用的聊天插件，组件，聊天列表(类似微信的消息列表)、历史聊天
uniapp 移动端 聊天框 获取聊天历史记录
qq_39650950的博客
10-12 3087
做一个类似淘宝客服聊天框的功能在这里插入代码片 <template> <view class="content"> <view class="cul-wrapper"> <view v-if="isOver" class="msg-over">没有更多消息了</view> <block v-for="(item,index) in hisMsgs" :key="item.id"> <view :class
uni-app实现聊天页面功能
qq_52244923的博客
09-22 1235
uni-app实现聊天页面功能
uni-app聊天页面
04-04
uni-app聊天的页面模板，和微信上的聊天页面差不多，可以放心使用。
uniapp 微信小程序使用button调用在线客服聊天功能
yehaocheng520的博客
12-19 1万+
微信客服聊天功能
使用腾讯IM实现uni-app小程序中的客服聊天
xiamoziqian的博客
06-09 3740
使用腾讯IM实现uni-app小程序中的客服聊天
帮忙用uniapp 写一个联系客服的功能
最新发布
qq_33240556的博客
02-19 922
在uni-app中实现联系客服功能，一种常见的做法是通过调用微信小程序的客服消息接口或者打开外部链接（如企业微信、QQ等第三方客服平台）。请注意，上述代码仅为示例，实际开发时你需要按照微信官方文档的要求进行调整和适配，包括但不限于获取openid的方式、向服务器发送请求的细节以及配置客服消息模板等。// 需要用户触发操作后才能调用客服消息接口，并且需要在微信公众平台上配置客服消息模板。如果需要跳转到其他客服平台，比如企业微信、网页版客服聊天窗口，则可以直接使用。'发送客服消息失败：'
uniapp仿客服聊天
qcc0716的博客
01-06 4033
<template> <view class="content"> <view class="cul-wrapper"> <view v-if="isOver" class="msg-over">没有更多消息了</view> <block v-for="(item,index) in hisMsgs" :key="item.id"> <view :class="[item.isme?'msg-me':'m
【uni-app】小程序实现微信在线聊天（私聊/群聊）
热门推荐
weixin_43655896的博客
03-23 4万+
使用小程序uni-app实现实时聊天功能
uni-app 即时聊天
ym深的博客
08-04 2万+
项目介绍 前段时间在B站看到了有一个UP主在讲uni-app即时聊天的项目（逸刻时光），在看了这个视频之后，感觉还是挺有兴趣的，所以在看他的讲解视频之后，就自己动手写了这个即时聊天项目，在样式方面跟（逸刻时光）相比改动的地方还是比较多的，后端的是我使用的是node的koa框架，而（逸刻时光）的up主是使用express，个人觉得还是koa框架用起来比较好用，没有那么多的嵌套，可以使用async和await来解决回调地狱等，另外就是(逸刻时光）的up主更新这个项目是更新的比较慢的，所以前后端的很多问题都得自己
uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息
10-19 5160
基于uniapp + nvue实现的uniapp仿微信界面功能聊天应用 txim 实例项目，实现了以下功能。 1: 聊天会话管理 2: 好友列表 3: 文字、语音、视频、表情、位置等聊天消息收发 4: 一对一语音视频在线通话 先放上效果预览 技术实现 开发环境：HbuilderX + nodejs 技术框架：uniapp + vue2.x + node-sass 状态管理：Vuex 自定义组件：ChatLayout、ChatContactItem、ChatInpu
[每天进步一点点~] uni-app 聊天对话
DarlingYL的博客
02-24 1319
只有页面，功能未完成，使用uView插件 效果图： 代码：chat.vue <template> <view class="content"> <view class="content-box" @touchstart="touchstart" id="content-box" :class="{'content-showfn':...
uniapp 客服功能
qq_43319351的博客
06-20 782
注意：设置buttion的open-type="contact"利用微信的button组件实现客服功能。
uniapp之小程序自带客服功能
Jocelyn_书
08-25 1万+
功能描述：在小程序中点击相关客服按钮就跳转到客服聊天界面 涉及知识点：uniapp的button组件
uni-app项目实现客服、用户聊天
苦涩精灵的博客
11-15 4644
uni-app项目实现客服与用户聊天的api 在微信开放文档中已经明确指出了此接口： 1.添加按钮 <button type="primary" open-type="contact">开始聊天</button> 2.真机调试 3.点击聊天进入聊天窗口 4.在小程序中添加自己为客服 5.在微信中回复客户 ...
uniapp聊天窗口.rar
03-31
uniapp 聊天窗口,仿QQ很不错的聊天插件,VUE聊天插件,用在APP实时聊天项目中,基于VUE的很实用的在线交流插件
uniapp抖音小程序接官方IM客服聊天
qq_38990668的博客
11-16 1149
uniapp抖音小程序接官方IM客服聊天
uni-app实战之社区交友APP（15）聊天功能开发和后端API部署
CUFEECR的博客
03-07 1820
APP版本更新对应数据表为update；序列化进行验证，视图判断是否是最新版本，并i定义路由。聊天模块对应数据表为message；序列化验证字段，视图中进行判断并创建消息，并定义路由。服务器部署接口代码时，需要生成依赖库、导出测试数据，通过宝塔面板将代码和.sql文件上传到服务器，使用Python项目管理器创建项目，并在面板安全栏和云服务控制台安全组中放行相应端口，在settings.py中配置静态资源目录并进行域名映射和Nginx配置，为了安全需要安装SSL；DRF可以自动生成文档，配置并设置路由。
uniapp联系在线客服功能，H5和APP都能使用
qq_39894545的博客
08-18 1万+
开发App的时候遇到一个在线客服的功能，虽然自己也写出了在线联系的功能，但是最后还是使用了第三方插件，因为代码少。而且省事，个人使用的是“网易七鱼”。 1、注册“网易七鱼”账号，复制以下代码替换下方html中的红色部分代码 1、新建一个html文件，路径放在static静态目录下，和图片放在一起 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
uniapp 实现 app 聊天页面功能
M_emory_的博客
06-18 9974
最近在写一个 app ，其中有一个功能是实现简单的聊天界面功能，虽然听起来是一个很简单的功能，但是在开发的时候会遇到各种问题，经过上网查找解决了自己的问题，下面我记录一下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值