章节13.即时通讯选修课

说明：

我们在上一节已经讲完了本季课程的所有内容，从本节课开始为选修课，非必修课，同学们可根据兴趣选择学习。
本章节内容主要是对我们项目代码的优化，方便后期进行二次开发及便于后端管理。
- 有以下方面的优化：
- 1. 将页面上用到的图片、视频等资源统一放置于配置文件管理，方便后期管理。
- 1. 首页推送消息中的头像更新。
- 1. 搜索加好友功能优化。
- 1. 其它功能

# 一、数据统一在配置文件管理

# 1 消息页初始化数据清空

页面 /pages/xiaoxi/xiaoxi.nvue 中，data中的数据 chatList 设置为 chatList = [];

# 2 聊天页数据处理

在文件 /pages/chat/plusIconAction.js中

chatDataList = []; // 聊天数据清空

    import {requestUrl, uploadfileSaveType, chatPageInit} from '@/common/mixins/configData.js';
    ...
    data(){
		return {
			// 视频封面占位图片
			videoPlaceHolderPoster: chatPageInit.videoPlaceHolderPoster,
			// 按住录音显示的图片
			recorderIcon: chatPageInit.recorderIcon,
			// 表情包数据
			iconMenus: chatPageInit.iconMenus,
			// 加号扩展菜单栏目
			plusMenus: chatPageInit.plusMenus,
			chatDataList: [],
										
		}
	},

将数据定义在 /common/mixins/configData.js
- gif动画表情包，大家可以在网上自行下载你喜欢的，如 https://www.fabiaoqing.com/ (opens new window)，然后放在本地文件static/emoji文件夹下或者放在阿里云oss云存储上，然后就可以引入使用了
- emoji 文字表情包，可以查看这个网站选择你喜欢的 https://www.emojiall.com/zh-hans/all-emojis (opens new window)

...
// 聊天页初始化数据
export const chatPageInit = {
	// 视频封面占位图片
	videoPlaceHolderPoster:'https://docs-51yrc-com.oss-cn-hangzhou.aliyuncs.com/chat/video/video_placeholder.jpg',
	// 按住录音显示的图片
	recorderIcon:'https://docs-51yrc-com.oss-cn-hangzhou.aliyuncs.com/chat/audio/audio-icon/recorder.gif',
	// 表情包数据
	iconMenus:[
		// { name:"微笑", icon:"/static/tabbar/index.png",
		// iconType:"image", eventType:"smile" },
		{ name:"嘿嘿", icon:"😀",
		iconType:"emoji", eventType:"heihei" },
		{ name: "嗯，哼", icon: "https://docs-51yrc-com.oss-cn-hangzhou.aliyuncs.com/chat/iconMenus/en.gif", 
		iconType: "image", eventType: "enheng" },
		{ name:"嘻嘻", icon:"😁",
		iconType:"emoji", eventType:"xixi" },
		{ name:"笑哭了", icon:"😂",
		iconType:"emoji", eventType:"xiaokule" },
		{ name:"哈哈", icon:"😃",
		iconType:"emoji", eventType:"haha" },
		{ name:"大笑", icon:"😄",
		iconType:"emoji", eventType:"daxiao" },
		{ name:"苦笑", icon:"😅",
		iconType:"emoji", eventType:"kuxiao" },
		{ name:"斜眼笑", icon:"😆",
		iconType:"emoji", eventType:"xieyanxiao" },
		{ name:"微笑天使", icon:"😇",
		iconType:"emoji", eventType:"weixiaotianshi" },
		{ name:"眨眼", icon:"😉",
		iconType:"emoji", eventType:"zhayan" },
		{ name:"羞涩微笑", icon:"😊",
		iconType:"emoji", eventType:"xiuseweixiao" },
		{ name:"呵呵", icon:"🙂",
		iconType:"emoji", eventType:"hehe" },
		{ name:"倒脸", icon:"🙃",
		iconType:"emoji", eventType:"daolian" },
		{ name:"笑得满地打滚", icon:"🤣",
		iconType:"emoji", eventType:"xiaodemandidagun" },
	],
	// 加号扩展菜单栏目
	plusMenus:[ 
	    { name:"聊天设置", icon:"setting-fill", iconType:"uview", eventType:"openMore" },
	    // #ifndef H5
	    { name:"相册照片", icon:"photo", iconType:"uview", eventType:"photo" },
	    { name:"拍照片", icon:"\ue62c", iconType:"custom", eventType:"cameraPhoto" },
	    { name:"拍视频", icon:"\ue682", iconType:"custom", eventType:"cameraVideo" },
	    { name:"相册视频", icon:"\ue66d", iconType:"custom", eventType:"video" },
	    // #endif
		// #ifdef H5
		{ name:"照片", icon:"photo", iconType:"uview", eventType:"photo" },
		{ name:"视频", icon:"\ue66d", iconType:"custom", eventType:"video" },
		// #endif
		{ name:"位置", icon:"map", iconType:"uview", eventType:"map" },
	    { name:"我的名片", icon:"\ue69d", iconType:"custom", eventType:"mingpian" },
		
	],
};

# 二、搜索加好友功能优化

关于 首页推送消息中的头像更新 主要是调整一下聊天类文件 /common/js/chatClass.js的代码，大家可以把最新的代码更新到自己的项目中，最新的完整代码查看：eggjs即时通讯：类文件chatClass.js完整代码

# 1. 在页面 `/pages/chat/chat.nvue`

<script>
    ...
	import pageActionJs from '@/pages/chat/pageAction.js';
	export default {
		mixins:[toolJs,plusIconActionJs,pageActionJs],
		...
		onLoad(e) {
			...
			try{
				...
				// 查询聊天内容
				...
				
				// 查一下给对方发消息的条数限制
				if(this.arg && this.arg.chatType == 'single'){
					this.searchChatObjSet();
				}
			}catch{
				...
			}

		},
		...
	}
</script>

# 2. 新建混入文件 `/pages/chat/pageAction.js`

import {requestUrl, UserChatSet} from '@/common/mixins/configData.js';
export default {
	methods:{
		// 单聊时查一下给对方发消息的条数限制和是否是好友情况
		searchChatObjSet(){
			console.log('单聊时查一下给对方发消息的条数限制和是否是好友情况',this.me);
			this.initGetUseraSetInfo().then(SetInfo=>{
				console.log('获取用户设置信息', SetInfo);
				// 如果不是好友
				if(!SetInfo.isgoodfriend){
					if(SetInfo.invite_confirm == 0){
						console.log('如果不是好友，但是加对方为好友，对方又不用审核');
						// 则自动加为好友
						this.autoAddFriendAndAgree().then(res=>{
							console.log('自动加为好友', res.data.data);
						});
					}else{
						console.log('如果不是好友，但是加对方为好友，对方要审核，此时查看聊天条数',SetInfo.userset);
						let userset = null;
						if(!SetInfo.userset){
							userset = UserChatSet;
						}else{
							userset = JSON.parse(SetInfo.userset);
						}
						console.log('最终的用户设置',userset);
						let sendCount = userset.chatset[this.me.role].sendCount;
						if(sendCount == 1){
							// 聊天界面给一个提示 - 不需要存在本地
							let msg = {
								id: 'systemNotice-applyAddfriend',
								from_id: this.me.id,
								from_name: this.me.nickname || this.me.username,
								from_avatar: this.me.avatar,
								to_id: this.arg.id,
								to_name: this.arg.name,
								to_avatar: this.arg.avatar,
								chatType: "single",
								type: "systemNotice",
								data: "您和对方不是好友关系，对方只允许您给他发一条消息",
								chat_time: (new Date()).getTime(),
								redirect:{
									text: '加为好友',
									role: this.me.role == 'visitor' ? '[游客]' : '[平台用户]',
								},
							};
							let _index = this.chatDataList.findIndex(v => v.id == 'systemNotice-applyAddfriend');
							if(_index == -1){
								this.chatDataList.unshift(msg);
							}
						}
					}
				}
			});
		},
		// 获取用户设置信息 - 页面初始化就要执行
		async initGetUseraSetInfo(){
			return new Promise((resolve,reject)=>{
				uni.$u.http.post(requestUrl.http + `/api/chat/getUserSetInfo`,{
					userid: this.arg.id,
				},{
					header:{
						token: this.me.token,
					}
				}).then(res=>{
					let UserSetInfo = res.data.data;
					resolve(UserSetInfo);
				});
			});
		},
		// 自动加对方为好友并同意
		async autoAddFriendAndAgree(){
			return new Promise((resolve,reject)=>{
				// 我的信息
				let meInfo = uni.getStorageSync('chatuser');
				meInfo = meInfo ? JSON.parse(meInfo) : '';
				let nickname = ``;
				if(meInfo){
					nickname = meInfo.nickname || meInfo.username;
					nickname += meInfo.role == 'visitor' ? `[游客]` : `[平台注册用户]`;
					// 交互
					uni.$u.http.post(requestUrl.http + `/api/chat/autoAddFriendAndAgree`,{
						friend_id: this.arg.id,
						nickname: `我是${nickname},系统自动加你为好友的`,
					},{
						header:{
							token: meInfo.token,
						}
					}).then(res=>{
						resolve(res);
					});
				}
			});
		},
		
	}
}

# 3. 数据配置文件定义用户设置信息

在文件 /common/mixins/configData.js

// 用户设置信息
export const UserChatSet = {
	// 聊天相关设置
	chatset: {
		visitor: {
			sendCount:1,
			needFollow:false,
		},
		user:{
			sendCount:1,
			needFollow:false,
		} 
	},
};

# 4. 在文件 `/pages/userinfo/sendMessage.js`

import {requestUrl, UserChatSet} from '@/common/mixins/configData.js';
...
if(!userset){
    // 用户没有进行聊天的设置
    userset = UserChatSet;
}else{
    userset = JSON.parse(userset);
}
...

# 5. 在组件 `/components/chat-item/chat-item.vue`

...
<!-- 进群首条消息提示 -->
<view v-if="item.type == 'systemNotice'"
class="flex flex-column align-center justify-center py-3">
    <text class="font-sm text-light-muted">{{item.data}}</text>
    <view v-if="item.redirect"
    class="flex flex-row align-center justify-center mt-2">
        <text class="font-sm text-primary"
        @click="applyAddFriend">{{item.redirect.text}}</text>
    </view>
</view>
...
// 申请加对方为好友
applyAddFriend(){
    console.log('申请加对方为好友',this.item);
    uni.$u.http.post(requestUrl.http + `/api/chat/applyfriend`,{
        friend_id: this.item.to_id,
        nickname: `我是${this.item.from_name}${this.item.redirect && this.item.redirect.role},申请加你为好友`,
    },{
        header:{
            token: uni.getStorageSync('chatuser_token'),
        }
    }).then(res=>{
        uni.showToast({title: `等待对方同意`, icon:'success'});
    }).catch(err=>{
        uni.showToast({title: err.data.data, icon:'none', duration:5000});
    });
},

# 三、其它功能

H5端，兼容PC端和移动端的客户聊天界面，访问 https://域名/#/pages/case/case;

场景：在你的网站或者公众号使用这个链接，让客户快速和你沟通；

H5端，兼容PC端和移动端的公司客服聊天界面，访问 https://域名/#/pages/owner/owner;

场景：公司客服可在电脑上或者手机上快速和客户聊天（首次使用需登录一次）；

H5端，兼容PC端和移动端的客户聊天界面，可在朋友圈、公众号等发咨询链接，其格式如下：

const website = `http://192.168.2.6:8081`; // 网站地址 域名地址
[
	{
		chatType: 'single',
		name: '睿晨编程客服老师',
		avatar: 'https://thinkphp-eggjs.oss-cn-hangzhou.aliyuncs.com/images/20250924/1758697243774_0e5a2764831b.png',
		desc: '跟课程相关的问题，可以咨询老师',
		path: `${website}/#/pages/setpageInfo/setpageInfo`,
		params: { // 重点是params参数
			action: 'autoAddGroup',
			title: '加用户[睿晨编程客服老师]为好友',
			id: '49',
			chatType: 'single',
			name: '睿晨编程客服老师',
			avatar: 'https://thinkphp-eggjs.oss-cn-hangzhou.aliyuncs.com/images/20250924/1758697243774_0e5a2764831b.png',
			redirect: 'true', // 加上自动跳转
			// ask: '课程有优惠吗', // 带问题的聊天 - 选填
		}
	},
	{
		chatType: 'group',
		name: '第三期第二季课程群',
		avatar: 'https://docs-51yrc-com.oss-cn-hangzhou.aliyuncs.com/docs-imgs/lesson_study_04.jpg',
		desc: '学习第三期第二季课程的同学，可在群里进行问题答疑',
		path: `${website}/#/pages/setpageInfo/setpageInfo`,
		params: {
			action: 'autoAddGroup',
			title: '群介绍',
			id: '41',
			chatType: 'group',
			name: '第三期第二季课程群',
			redirect: 'true'
		}
	},
]

# 一、数据统一在配置文件管理

# 1 消息页初始化数据清空

# 2 聊天页数据处理

# 二、搜索加好友功能优化

# 1. 在页面 /pages/chat/chat.nvue

# 2. 新建混入文件 /pages/chat/pageAction.js

# 3. 数据配置文件定义用户设置信息

# 4. 在文件 /pages/userinfo/sendMessage.js

# 5. 在组件 /components/chat-item/chat-item.vue

# 三、 其它功能

# 1. 在页面 `/pages/chat/chat.nvue`

# 2. 新建混入文件 `/pages/chat/pageAction.js`

# 4. 在文件 `/pages/userinfo/sendMessage.js`

# 5. 在组件 `/components/chat-item/chat-item.vue`

# 三、其它功能