/pages/chat/chat/chat.vue
<template>
<view>
<!-- 导航栏 -->
<free-nav-bar :title="detail.name" :noreadnum="totalNoreadnum" showBack>
<free-icon-button slot="right" @click="openChatSet"><text class="iconfont font-lg"></text>
</free-icon-button>
</free-nav-bar>
<!-- 聊天内容区域 -->
<scroll-view scroll-y class="bg-light position-fixed left-0 right-0 px-3"
style="bottom: 105rpx;box-sizing: border-box;" :style="chatBodyBottom" :show-scrollbar="false"
:scroll-into-view="scrollIntoView" :scroll-with-animation="true" @click="clickPage">
<!-- 聊天信息列表组件 -->
<view v-for="(item,index) in list" :key="index" :id="'chatItem_'+index">
<free-chat-item :item="item" :index="index" ref="chatItem"
:pretime=" index > 0 ? list[index-1].create_time : 0" @long="long" @preview="previewImage"
:shownickname="currentChatItem.shownickname"></free-chat-item>
</view>
</scroll-view>
<!-- #ifdef APP-PLUS-NVUE -->
<div v-if="mode === 'action' || mode === 'emoticon'" class="position-fixed top-0 right-0 left-0"
:style="'bottom:'+maskBottom+'px;'" @click="clickPage"></div>
<!-- #endif -->
<!-- 底部输入框 -->
<view class="position-fixed left-0 right-0 border-top flex align-center"
style="background-color: #F7F7F6;height: 105rpx;" :style="'bottom:'+KeyboardHeight+'px;'">
<free-icon-button v-if="mode === 'audio'" @click="changeVoiceOrText"><text
class="iconfont font-lg"></text></free-icon-button>
<free-icon-button v-else @click="changeVoiceOrText"><text class="iconfont font-lg"></text>
</free-icon-button>
<view class="flex-1">
<view v-if="mode === 'audio'" class="rounded flex align-center justify-center" style="height: 80rpx;"
:class="isRecording?'bg-hover-light':'bg-white'" @touchstart="voiceTouchStart"
@touchend="voiceTouchEnd" @touchcancel="voiceTouchCancel" @touchmove="voiceTouchMove">
<text class="font">{{isRecording ? '松开 结束':'按住 说话'}}</text>
</view>
<textarea v-else fixed class="bg-white rounded p-2 font-md" style="height: 50rpx;max-width: 450rpx;"
:adjust-position="false" v-model="text" @focus="mode = 'text'" />
</view>
<!-- 表情 -->
<free-icon-button @click="openActionOrEmoticon('emoticon')"><text class="iconfont font-lg"></text>
</free-icon-button>
<template v-if="text.length === 0">
<!-- 扩展菜单 -->
<free-icon-button @click="openActionOrEmoticon('action')"><text class="iconfont font-lg"></text>
</free-icon-button>
</template>
<view v-else class="flex-shrink">
<!-- 发送按钮 -->
<free-main-button name="发送" @click="send('text')"></free-main-button>
</view>
</view>
<!-- 扩展菜单 -->
<free-popup ref="action" bottom transformOrigin="center bottom" @hide="KeyboardHeight = 0" :mask="false">
<view style="height: 580rpx;" class="border-top border-light-secondary bg-light">
<swiper :indicator-dots="emoticonOrActionList.length > 1" style="height: 510rpx;">
<swiper-item class="row" v-for="(item,index) in emoticonOrActionList" :key="index">
<view class="col-3 flex flex-column align-center justify-center" style="height: 255rpx;"
v-for="(item2,index2) in item" :key="index2" @click="actionEvent(item2)">
<image :src="item2.icon" mode="widthFix" style="width: 100rpx;height: 100rpx;"></image>
<text class="font-sm text-muted mt-2">{{item2.name}}</text>
</view>
</swiper-item>
</swiper>
</view>
</free-popup>
<!-- 弹出层 -->
<free-popup ref="extend" :bodyWidth="240" :bodyHeight="450" :tabbarHeight="105">
<view class="flex flex-column" style="width: 240rpx;" :style="getMenusStyle">
<view class="flex-1 flex align-center" hover-class="bg-light" v-for="(item,index) in menusList"
:key="index" @click="clickEvent(item.event)">
<text class="font-md pl-3">{{item.name}}</text>
</view>
</view>
</free-popup>
<!-- 录音提示 -->
<view v-if="isRecording" class="position-fixed top-0 left-0 right-0 flex align-center justify-center"
style="bottom: 105rpx;">
<view style="width: 360rpx;height: 360rpx;background-color: rgba(0,0,0,0.5);"
class="rounded flex flex-column align-center justify-center">
<image src="/static/images/audio/audio/recording.gif" style="width: 150rpx;height: 150rpx;"></image>
<text class="font text-white mt-3">{{unRecord ? '松开手指，取消发送':'手指上滑，取消发送'}}</text>
</view>
</view>
</view>
</template>
<script>
// #ifdef APP-PLUS-NVUE
const dom = weex.requireModule('dom')
// #endif
import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
import freeIconButton from "@/components/free-ui/free-icon-button.vue"
import freeChatItem from '@/components/free-ui/free-chat-item.vue';
import freePopup from "@/components/free-ui/free-popup.vue"
import freeMainButton from '@/components/free-ui/free-main-button.vue';
import {
mapState,
mapMutations
} from 'vuex'
import auth from '@/common/mixin/auth.js';
import $U from '@/common/free-lib/util.js';
import $H from '@/common/free-lib/request.js';
import $C from '@/common/free-lib/config.js';
export default {
mixins: [auth],
components: {
freeNavBar,
freeIconButton,
freeChatItem,
freePopup,
freeMainButton
},
data() {
return {
scrollIntoView: "",
// 模式 text输入文字，emoticon表情，action操作，audio音频
mode: "text",
// 扩展菜单列表
actionList: [
[{
name: "相册",
icon: "/static/images/extends/pic.png",
event: "uploadImage"
}, {
name: "拍摄",
icon: "/static/images/extends/video.png",
event: "uploadVideo"
}, {
name: "收藏",
icon: "/static/images/extends/shoucan.png",
event: "openFava"
}, {
name: "名片",
icon: "/static/images/extends/man.png",
event: "sendCard"
}, {
name: "语音通话",
icon: "/static/images/extends/phone.png",
event: ""
}, {
name: "位置",
icon: "/static/images/extends/path.png",
event: ""
}]
],
emoticonList: [],
// 键盘高度
KeyboardHeight: 0,
menusList: [],
navBarHeight: 0,
list: [],
// 当前操作的气泡索引
propIndex: -1,
// 输入文字
text: "",
// 音频录制状态
isRecording: false,
RecordingStartY: 0,
// 取消录音
unRecord: false,
detail: {
id: 0,
name: "",
avatar: "",
chat_type: "user"
}
}
},
mounted() {
var statusBarHeight = 0
// #ifdef APP-PLUS-NVUE
statusBarHeight = plus.navigator.getStatusbarHeight()
// #endif
this.navBarHeight = statusBarHeight + uni.upx2px(90)
// 监听键盘高度变化
uni.onKeyboardHeightChange(res => {
if (this.mode !== 'action' && this.mode !== 'emoticon') {
this.KeyboardHeight = res.height
}
if (this.KeyboardHeight > 0) {
this.pageToBottom()
}
})
// 注册发送音频事件
this.regSendVoiceEvent((url) => {
if (!this.unRecord) {
this.send('audio', url, {
time: this.RecordTime
})
}
})
this.pageToBottom()
},
computed: {
...mapState({
chatList: state => state.user.chatList,
RECORD: state => state.audio.RECORD,
RecordTime: state => state.audio.RecordTime,
chat: state => state.user.chat,
totalNoreadnum: state => state.user.totalNoreadnum,
user: state => state.user.user
}),
// 当前会话配置信息
currentChatItem() {
let index = this.chatList.findIndex(item => item.id === this.detail.id && item.chat_type === this.detail
.chat_type)
if (index !== -1) {
return this.chatList[index]
}
return {}
},
// 获取蒙版的位置
maskBottom() {
return this.KeyboardHeight + uni.upx2px(105)
},
// 动态获取菜单高度
getMenusHeight() {
let H = 100
return this.menusList.length * H
},
// 获取菜单的样式
getMenusStyle() {
return `height: ${this.getMenusHeight}rpx;`
},
// 判断是否操作本人信息
isdoSelf() {
// 获取本人id（假设拿到了）
let id = 1
let user_id = this.propIndex > -1 ? this.list[this.propIndex].user_id : 0
return user_id === id
},
// 聊天区域bottom
chatBodyBottom() {
return `bottom:${uni.upx2px(105) + this.KeyboardHeight}px;top:${this.navBarHeight}px;`
},
// 获取操作或者表情列表
emoticonOrActionList() {
return (this.mode === 'emoticon' || this.mode === 'action') ? this[this.mode + 'List'] : []
},
// 所有信息的图片地址
imageList() {
let arr = []
this.list.forEach((item) => {
if (item.type === 'emoticon' || item.type === 'image') {
arr.push(item.data)
}
})
return arr
}
},
watch: {
mode(newValue,) {
if (newValue !== 'action' && newValue !== 'emoticon') {
this.$refs.action.hide()
}
if (newValue !== 'text') {
uni.hideKeyboard()
}
}
},
onLoad(e) {
if (!e.params) {
return this.backToast()
}
this.detail = JSON.parse(decodeURIComponent(e.params))
console.log(this.detail);
// 初始化
this.__init()
// 创建聊天对象
this.chat.createChatObject(this.detail)
// 获取历史记录
this.list = this.chat.getChatDetail()
// 监听接收聊天信息
uni.$on('onMessage', this.onMessage)
uni.$on('updateHistory', this.updateHistory)
// 监听发送收藏和名片
uni.$on('sendItem', this.onSendItem)
},
destroyed() {
// 销毁聊天对象
this.chat.destoryChatObject()
// 销毁监听接收聊天消息
uni.$off('onMessage', this.onMessage)
uni.$off('updateHistory', this.updateHistory)
uni.$off('sendItem', this.onSendItem)
},
methods: {
...mapMutations(['regSendVoiceEvent']),
onSendItem(e) {
if (e.sendType === 'fava' || e.sendType === 'card') {
this.send(e.type, e.data, e.options)
}
},
updateHistory(isclear = true) {
if (isclear) {
this.list = []
} else {
this.list = this.chat.getChatDetail()
}
},
onMessage(message) {
console.log('[聊天页] 监听接收聊天信息', message);
if ((message.from_id === this.detail.id && message.chat_type === 'user') || (message.chat_type ===
'group' && message.to_id === this.detail.id)) {
if (message.isremove !== 1) {
this.list.push(message)
// 置于底部
return this.pageToBottom()
}
// 撤回消息
let index = this.list.findIndex(item => item.id === message.id)
if (index !== -1) {
this.list[index].isremove = 1
}
}
},
__init() {
var total = 24;
var page = Math.ceil(total / 8);
var arr = [];
for (var i = 0; i < page; i++) {
var start = i * 8;
arr[i] = [];
for (var j = 0; j <= 8; j++) {
arr[i].push({
name: '表情' + (start + j),
icon: '/static/images/emoticon/5497/' + (start + j) + '.gif',
event: 'sendEmoticon'
})
}
}
this.emoticonList = arr;
// var total = 20
// var page = Math.ceil(total/8)
// var arr = []
// for (var i = 0; i < page; i++) {
// var start = i*8
// arr[i] = []
// for (var j = 0; j < 8; j++) {
// var no = start + j
// if ((no+1) > total) {
// continue;
// }
// arr[i].push({
// name:"表情"+no,
// icon: $C.emoticonUrl + no +'.gif',
// event:"sendEmoticon"
// })
// }
// }
// this.emoticonList = arr
// 初始化会话列表
this.chat.initChatListItem({
chat_type: this.detail.chat_type,
to_id: this.detail.id,
to_name: this.detail.name,
to_avatar: this.detail.avatar,
data: this.detail.chat_type === 'user' ? '你们已经是好友，可以开始聊天了' : '你已经加入群聊，可以开始聊天了'
})
},
// 打开扩展菜单或者表情包
openActionOrEmoticon(mode = 'action') {
this.mode = mode
this.$refs.action.show()
uni.hideKeyboard()
this.KeyboardHeight = uni.upx2px(580)
},
// 发送
send(type, data = '', options = {}) {
// 组织数据格式
switch (type) {
case 'text':
data = data || this.text
break;
}
let message = this.chat.formatSendData({
type,
data,
options
})
// 渲染到页面
let index = this.list.length
this.list.push(message)
// 监听上传进度
let onProgress = false
if (message.type !== 'text' && message.type !== 'emoticon' && message.type !== 'card' && !message.data
.startsWith('http')) {
onProgress = (progress) => {
console.log('上传进度：', progress);
}
}
// 发送到服务端
this.chat.send(message, onProgress).then(res => {
console.log(res);
// 发送成功
this.list[index].id = res.id
this.list[index].data = res.data;
this.list[index].sendStatus = 'success'
}).catch(err => {
// 发送失败
this.list[index].sendStatus = 'fail'
console.log(err);
})
// 发送文字成功，清空输入框
if (type === 'text') {
this.text = ''
}
// 置于底部
this.pageToBottom()
},
// 回到底部
pageToBottom() {
// #ifdef APP-PLUS-NVUE
let chatItem = this.$refs.chatItem
let lastIndex = chatItem.length > 0 ? chatItem.length - 1 : 0
if (chatItem[lastIndex]) {
dom.scrollToElement(chatItem[lastIndex], {})
}
// #endif
// #ifndef APP-NVUE
setTimeout(() => {
let lastIndex = this.list.length - 1
this.scrollIntoView = 'chatItem_' + lastIndex
}, 300)
// #endif
},
// 长按消息气泡
long({
x,
y,
index
}) {
// 初始化 索引
this.propIndex = index
// 组装菜单
let menus = [{
name: "发送给朋友",
event: 'sendToChatItem'
}, {
name: "收藏",
event: 'fava'
}, {
name: "删除",
event: 'delete'
}]
let item = this.list[this.propIndex]
let isSelf = this.user.id === item.from_id
if (isSelf) {
menus.push({
name: "撤回",
event: 'removeChatItem'
})
}
// #ifndef H5
if (item.type === 'text') {
menus.unshift({
name: "复制",
event: 'copy',
})
}
// #endif
this.menusList = menus
// 显示扩展菜单
this.$refs.extend.show(x, y)
},
// 操作菜单方法分发
clickEvent(event) {
let item = this.list[this.propIndex]
let isSelf = this.user.id === item.from_id
switch (event) {
case 'removeChatItem': // 撤回消息
// 拿到当前被操作的信息
this.chat.recall(item).then(res => {
item.isremove = 1
})
break;
case 'sendToChatItem':
uni.navigateTo({
url: '../chat-list/chat-list?params=' + encodeURIComponent(JSON.stringify(item)),
});
break;
case 'copy': // 复制
uni.setClipboardData({
data: item.data,
success: () => {
uni.showToast({
title: '复制成功',
icon: 'none'
});
}
});
break;
case 'delete':
uni.showModal({
content: '是否要删除该记录？',
success: (res) => {
if (!res.confirm) return;
this.chat.deleteChatDetailItem(item, isSelf)
this.list.splice(this.propIndex, 1)
// 删除最后一条消息
if (this.list.length === this.propIndex) {
this.chat.updateChatItem({
id: this.detail.id,
chat_type: this.detail.chat_type
}, (v) => {
let o = this.list[this.propIndex - 1]
let data = ''
if (o) {
data = this.chat.formatChatItemData(o, isSelf)
}
v.data = data
return v
})
}
}
});
break;
case 'fava': // 加入收藏
uni.showModal({
content: '是否要加入收藏？',
success: (res) => {
if (res.confirm) {
$H.post('/fava/create', {
type: item.type,
data: item.data,
options: JSON.stringify(item.options)
}).then(res => {
uni.showToast({
title: '加入收藏成功',
icon: 'none'
});
})
}
}
});
break;
}
// 关闭菜单
this.$refs.extend.hide()
},
// 扩展菜单
actionEvent(e) {
switch (e.event) {
case 'uploadImage': // 选择相册
uni.chooseImage({
count: 9,
success: (res) => {
// 发送到服务器
// 渲染到页面
res.tempFilePaths.forEach((item) => {
this.send('image', item)
})
}
})
break;
case 'uploadVideo': // 发送短视频
uni.chooseVideo({
maxDuration: 10,
success: (res) => {
this.send('video', res.tempFilePath)
// 渲染页面
// 发送到服务端（获取视频封面，返回url）
// 修改本地的发送状态
}
})
break;
case 'sendEmoticon': // 发送表情包
this.send('emoticon', e.icon)
break;
case 'openFava': // 发送收藏
uni.navigateTo({
url: '../../my/fava/fava?type=send',
});
break;
case 'sendCard': // 发送名片
uni.navigateTo({
url: '../../mail/mail/mail?type=sendCard&limit=1',
});
break;
}
},
// 点击页面
clickPage() {
this.mode = ''
},
// 预览图片
previewImage(url) {
uni.previewImage({
current: url,
urls: this.imageList,
indicator: "default"
})
},
// 切换音频录制和文本输入
changeVoiceOrText() {
this.mode = this.mode !== 'audio' ? 'audio' : 'text'
},
// 录音相关
// 录音开始
voiceTouchStart(e) {
// 初始化
this.isRecording = true
this.RecordingStartY = e.changedTouches[0].screenY
this.unRecord = false
// 开始录音
this.RECORD.start({
format: "mp3"
})
},
// 录音结束
voiceTouchEnd() {
this.isRecording = false
// 停止录音
this.RECORD.stop()
},
// 录音被打断
voiceTouchCancel() {
this.isRecording = false
this.unRecord = true
// 停止录音
this.RECORD.stop()
},
voiceTouchMove(e) {
let Y = Math.abs(e.changedTouches[0].screenY - this.RecordingStartY)
this.unRecord = (Y >= 50)
},
// 打开聊天信息设置
openChatSet() {
uni.navigateTo({
url: '../chat-set/chat-set?params=' + JSON.stringify({
id: this.detail.id,
chat_type: this.detail.chat_type
}),
});
}
}
}
</script>
<style>
</style>
/common/free-lib/chat.js
import $U from "./util.js";
import $H from './request.js';
import $store from '@/store/index.js';
class chat {
constructor(arg) {
this.url = arg.url
this.isOnline = false
this.socket = null
// 获取当前用户相关信息
let user = $U.getStorage('user');
this.user = user ? JSON.parse(user) : {},
// 初始化聊天对象
this.TO = false;
// 连接和监听
if (this.user.token) {
this.connectSocket()
}
}
// 连接socket
connectSocket() {
console.log(this.user);
this.socket = uni.connectSocket({
url: this.url + '?token=' + this.user.token,
complete: () => {}
})
// 监听连接成功
this.socket.onOpen(() => this.onOpen())
// 监听接收信息
this.socket.onMessage((res) => this.onMessage(res))
// 监听断开
this.socket.onClose(() => this.onClose())
// 监听错误
this.socket.onError(() => this.onError())
}
// 监听打开
onOpen() {
// 用户状态上线
this.isOnline = true;
console.log('socket连接成功');
// 获取用户离线消息
this.getMessage();
}
// 获取离线消息
getMessage() {
$H.post('/chat/getmessage');
}
// 获取聊天记录
getChatDetail(key = false) {
key = key ? key : `chatDetail_${this.user.id}_${this.TO.chat_type}_${this.TO.id}`
return this.getStorage(key)
}
// 监听关闭
onClose() {
// 用户下线
this.isOnline = false;
this.socket = null;
console.log('socket连接关闭');
}
// 监听消息
onMessage(data) {
console.log('监听消息', data);
let res = JSON.parse(data.data)
// 错误
switch (res.msg) {
case 'fail':
return uni.showToast({
title: res.data,
icon: 'none'
});
break;
case 'recall': // 撤回消息
this.handleOnRecall(res.data)
break;
case 'updateApplyList': // 新的好友申请
$store.dispatch('getApply');
break;
case 'moment': // 朋友圈更新
this.handleMoment(res.data)
break;
default:
// 处理消息
this.handleOnMessage(res.data)
break;
}
}
// 获取本地存储中的朋友圈动态通知
getNotice(){
let notice = $U.getStorage('moment_'+this.user.id);
return notice ? JSON.parse(notice) : {
avatar:'',
user_id:0,
num:0
}
}
// 处理朋友圈通知
async handleMoment(message){
let notice = this.getNotice();
switch(message.type){
case 'new':
if(message.user_id !== this.user.id){
notice.avatar = message.avatar;
notice.user_id = message.user_id;
uni.showTabBarRedDot({
index:2
})
}
break;
default:
if(message.user_id !== this.user.id){
notice.avatar = message.avatar
notice.user_id = message.user_id
notice.num += 1
}
if(notice.num > 0){
uni.setTabBarBadge({
index:2,
text:notice.num > 99 ? '99+' : notice.num.toString()
})
}else{
uni.removeTabBarBadge({
index:2
})
}
break;
}
uni.$emit('momentNotice',notice);
$U.setStorage('moment_'+this.user.id,JSON.stringify(notice));
}
// 读取朋友圈动态
async readMoments(){
let notice = {
avatar:'',
user_id:0,
num:0
};
$U.setStorage('moment_'+this.user.id,JSON.stringify(notice));
uni.hideTabBarRedDot({
index:2
})
uni.removeTabBarBadge({
index:2
})
uni.$emit('momentNotice',notice);
}
// 监听撤回消息处理
async handleOnRecall(message) {
// 通知聊天页撤回消息
uni.$emit('onMessage', {
...message,
isremove: 1
})
// 修改聊天记录
let id = message.chat_type === 'group' ? message.to_id : message.from_id
// key值：chatDetail_当前用户id_会话类型_接收人/群id
let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`
// 获取原来的聊天记录
let list = this.getChatDetail(key)
// 根据k查找对应聊天记录
let index = list.findIndex(item => item.id === message.id)
if (index === -1) return;
list[index].isremove = 1
// 存储
this.setStorage(key, list)
// 当前会话最后一条消息的显示
this.updateChatItem({
id,
chat_type: message.chat_type
}, (item) => {
item.data = '对方撤回了一条消息'
item.update_time = (new Date()).getTime()
return item
})
}
// 处理消息
async handleOnMessage(message) {
// 添加消息记录到本地存储中
let {
data
} = this.addChatDetail(message, false)
// 更新会话列表
this.updateChatList(data, false)
// 全局通知
uni.$emit('onMessage', data)
// 消息提示
// this.messageNotice()
}
// 监听连接错误
onError() {
// 用户下线
this.isOnline = false;
this.socket = null;
console.log('socket连接错误');
}
// 关闭连接
close() {
this.socket.close()
}
// 创建聊天对象
createChatObject(detail) {
this.TO = detail;
console.log('创建聊天对象', this.TO)
}
// 销毁聊天对象
destoryChatObject() {
this.TO = false
}
// 组织发送信息格式
formatSendData(params) {
return {
id: 0, // 唯一id，后端生成，用于撤回指定消息
from_avatar: this.user.avatar, // 发送者头像
from_name: this.user.nickname || this.user.username, // 发送者昵称
from_id: this.user.id, // 发送者id
to_id: params.to_id || this.TO.id, // 接收人/群 id
to_name: params.to_name || this.TO.name, // 接收人/群 名称
to_avatar: params.to_avatar || this.TO.avatar, // 接收人/群 头像
chat_type: params.chat_type || this.TO.chat_type, // 接收类型
type: params.type, // 消息类型
data: params.data, // 消息内容
options: params.options ? params.options : {}, // 其他参数
create_time: (new Date()).getTime(), // 创建时间
isremove: 0, // 是否撤回
sendStatus: params.sendStatus ? params.sendStatus : "pending" // 发送状态，success发送成功,fail发送失败,pending发送中
}
}
// 发送信息
send(message, onProgress = false) {
return new Promise(async (result,) => {
// 添加消息历史记录
// this.addChatDetail();
let {
k
} = this.addChatDetail(message);
// 更新会话列表
this.updateChatList(message);
// 验证是否上线
if (!this.checkOnLine()) return reject('未上线');
// 上传文件
let isUpload = (message.type !== 'text' && message.type !== 'emoticon' && message.type !==
'card' && !message.data.startsWith('http://akyan.oss-cn-beijing.aliyuncs.com/'))
let uploadResult = ''
if (isUpload) {
uploadResult = await $H.upload('/upload', {
filePath: message.data
}, onProgress);
}
// 提交到后端
let data = isUpload ? uploadResult : message.data;
$H.post('/chat/send', {
to_id: this.TO.id,
type: message.type,
chat_type: this.TO.chat_type,
data,
options: JSON.stringify(message.options)
}).then(res => {
// 发送成功
console.log('chat.js发送成功');
message.id = res.id
message.sendStatus = 'success';
if (message.type === 'video') {
message.data = res.data;
message.options = res.options;
}
// 更新指定历史记录
console.log('更新指定历史记录',message);
this.updateChatDetail(message, k);
result(res);
}).catch(err => {
// 发送失败
console.log('chat.js发送失败');
message.sendStatus = 'fail';
// 更新指定历史记录
this.updateChatDetail(message, k);
// 断线重连提示
result(err);
});
})
}
// 验证是否上线
checkOnLine() {
if (!this.isOnline) {
// 断线重连提示
this.reconnectConfirm();
return false;
}
return true;
}
// 断线重连提示
reconnectConfirm() {
uni.showModal({
title: '你已经断线，是否重新连接？',
content: '重新连接',
success: res => {
if (res.confirm) {
this.connectSocket();
}
},
});
}
// 添加聊天记录
addChatDetail(message, isSend = true) {
console.log('添加到聊天记录');
// 获取对方id
let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
if (!id) {
return {
data: {},
k: 0
}
}
// key值：chatDetail_当前用户id_会话类型_接收人/群id
let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
console.log(key);
// 获取原来的聊天记录
let list = this.getChatdetail(key)
console.log('获取原来的聊天记录', list);
// 标识
message.k = 'k' + list.length
list.push(message)
// 加入存储
console.log('加入存储', message);
this.setStorage(key, list);
// 返回
return {
data: message,
k: message.k
}
}
// 删除指定聊天记录
async deleteChatDetailItem(message,isSend = true){
// 获取对方id
let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
// key值：chatDetail_当前用户id_会话类型_接收人/群id
let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
// 获取原来的聊天记录
let list = this.getChatdetail(key);
// 根据k查找对应聊天记录
let index = list.findIndex(item => item.k === message.k || item.id === message.id);
if (index === -1) return;
list.splice(index,1);
// 存储
this.setStorage(key, list);
}
// 更新指定历史记录
async updateChatDetail(message, k, isSend = true) {
// 获取对方id
let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
// key值：chatDetail_当前用户id_会话类型_接收人/群id
let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
// 获取原来的聊天记录
let list = this.getChatdetail(key);
// 根据k查找对应聊天记录
let index = list.findIndex(item => item.k === k);
if (index === -1) return;
list[index] = message;
// 存储
this.setStorage(key, list);
}
// 获取聊天记录
getChatdetail(key = false) {
key = key ? key : `chatDetail_${this.user.id}_${this.TO.chat_type}_${this.TO.id}`;
return this.getStorage(key);
}
// 格式化会话最后一条消息显示
formatChatItemData(message,) {
let data = message.data.length > 18 ? message.data.slice(0, 17) + '...' : message.data;
switch (message.type) {
case 'emoticon':
data = '[表情]'
break;
case 'image':
data = '[图片]'
break;
case 'audio':
data = '[语音]'
break;
case 'video':
data = '[视频]'
break;
case 'card':
data = '[名片]'
break;
}
data = isSend ? data : `${message.from_name}: ${data}`
return data
}
// 更新会话列表
updateChatList(message, isSend = true) {
// 获取本地存储会话列表
let list = this.getChatList()
// 是否处于当前聊天中
let isCurrentChat = false
// 接收人/群 id/头像/昵称
let id = 0
let avatar = ''
let name = ''
// 判断私聊还是群聊
if (message.chat_type === 'user') { // 私聊
// 聊天对象是否存在
isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : this.TO.id === message.from_id) :
false
id = isSend ? message.to_id : message.from_id
avatar = isSend ? message.to_avatar : message.from_avatar
name = isSend ? message.to_name : message.from_name
} else { // 群聊
isCurrentChat = this.TO && (this.TO.id === message.to_id)
id = message.to_id
avatar = message.to_avatar
name = message.to_name
}
// 会话是否存在
let index = list.findIndex(item => {
return item.chat_type === message.chat_type && item.id === id
})
// 最后一条消息展现形式
// let data = isSend ? message.data : `${message.from_name}: ${message.data}`
let data = this.formatChatItemData(message, isSend)
// 会话不存在，创建会话
// 未读数是否 + 1
let noreadnum = (isSend || isCurrentChat) ? 0 : 1
if (index === -1) {
let chatItem = {
id, // 接收人/群 id
chat_type: message.chat_type, // 接收类型 user单聊 group群聊
avatar, // 接收人/群 头像
name, // 接收人/群 昵称
update_time: (new Date()).getTime(), // 最后一条消息的时间戳
data, // 最后一条消息内容
type: message.type, // 最后一条消息类型
noreadnum, // 未读数
istop: false, // 是否置顶
shownickname: false, // 是否显示昵称
nowarn: false, // 消息免打扰
strongwarn: false, // 是否开启强提醒
}
// 群聊
if (message.chat_type === 'group' && message.group) {
chatItem.shownickname = true
chatItem.name = message.to_name
chatItem = {
...chatItem,
user_id: message.group.user_id, // 群管理员id
remark: "", // 群公告
invite_confirm: 1, // 邀请确认
}
}
list.unshift(chatItem)
} else { // 存在，更新会话
// 拿到当前会话
let item = list[index]
// 更新该会话最后一条消息时间，内容，类型
item.update_time = (new Date()).getTime()
item.name = message.to_name
item.data = data
item.type = message.type
// 未读数更新
item.noreadnum += noreadnum
// 置顶会话
list = this.listToFirst(list, index)
}
// 存储
let key = `chatlist_${this.user.id}`
this.setStorage(key, list)
// 更新未读数
this.updateBadge(list)
// 通知更新vuex中的聊天会话列表
uni.$emit('onUpdateChatList', list)
return list
}
// 获取聊天记录
getChatList() {
let key = `chatlist_${this.user.id}`
return this.getStorage(key)
}
getChatList_old(message, isSend = true) {
// 获取本地存储会话列表
let list = this.getChatList();
// 是否处在当前聊天中
let isCurrentChat = false
// 接收人/群 id/头像/昵称
let id = 0;
let avatar = '';
let name = '';
// 判断私聊还是群聊
if (message.chat_type === 'user') {
// 私聊
isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : message.from_id) : false;
id = isSend ? message.to_id : message.from_id;
avatar = isSend ? message.to_avatar : message.from_avatar
name = isSend ? message.to_name : message.from_name
} else {
// 群聊
}
// 会话是否存在
let index = list.findIndex(item => {
return item.chat_type === message.chat_type && item.id === id;
})
// 最后一条消息展现形式
let data = isSend ? message.data : `${message.from_name}:${message.data}`;
// 未读数是否 +1
let noreadnum = (isSend || isCurrentChat) ? 0 : 1;
// 会话不存在 创建会话
if (index === -1) {
let chatItem = {
id, // 接收人/群 id
chat_type: message.chat_type, // 接收类型 user 单聊 group群聊
name, // 接收人/群 昵称
avatar, // 接收人/群 头像
update_time: (new Date()).getTime(), // 最后发送的时间
data, // 最后一条消息的内容
type: message.type,
noreadnum: 1, // 未读数
istop: false, // 是否置顶
shownickname: false, // 是否显示昵称
nowarn: false, // 是否免打扰
strongwarn: false, // 是否强提醒
}
if (message.chat_type === 'group') {
chatItem = {
...chatItem,
user_id: 0, // 管理员id
remark: '', // 群公告
invite_confirm: 0 // 邀请确认
}
}
list.unshift(chatItem)
} else {
// 存在，更新会话
// 拿到当前会话
let item = list[index]
// 更新改会话最后一条消息时间，内容，类型
item.update_time = (new Date()).getTime();
item.data = data;
item.type = message.type;
// 未读数更新
item.noreadnum += noreadnum
// 置顶会话
list = this.listToFirst(list, index);
}
// 存储
let key = `chatlist_${this.user.id}`;
this.setStorage(key, list);
// 更新未读数
this.updateBadge(list);
// 更新vuex中的聊天会话列表
uni.$emit('onUpdateChatList', list);
console.log('获取到的会话列表：', list)
return list;
/**
* {
id:1, // 接收人/群 id
chat_type:'user', // 接收类型 user 单聊 group群聊
name:'昵称', // 接收人/群 昵称
avatar:"/static/images/demo/demo6.jpg", // 接收人/群 头像
type:'',// 最后一条消息类型
update_time:1628069958, // 最后发送的时间
data:"你好啊，哈哈哈", // 最后一条消息的内容
noreadnum:1, // 未读数
istop:false, // 是否置顶
shownickname:0, // 是否显示昵称
nowarn:0, // 是否免打扰
strongwarn:0, // 是否强提醒
user_id://管理员id，
remark:'公告', // 群公告
invite_confirm:0, // 邀请确认
},
**/
}
// 获取本地存储会话列表
getChatList() {
let key = `chatlist_${this.user.id}`;
return this.getStorage(key);
}
// 更新指定会话
async updateChatItem(where,) {
// 获取所有会话列表
let list = this.getChatList();
// 找到当前会话
let index = list.findIndex(item => item.id === where.id && item.chat_type === where.chat_type);
if (index === -1) return;
// 更新数据
if(typeof data === 'function'){
list[index] = data(list[index])
}else{
list[index] = data
}
let key = `chatlist_${this.user.id}`;
this.setStorage(key, list);
// 更新会话列表状态
uni.$emit('onUpdateChatList', list);
}
// 读取指定会话
async readChatItem(id,) {
// 获取所有会话列表
let list = this.getChatList();
// 找到当前会话
let index = list.findIndex(item => item.id === id && item.chat_type === chat_type);
if (index !== -1) {
list[index].noreadnum = 0;
let key = `chatlist_${this.user.id}`;
this.setStorage(key, list);
// 重新获取未读数
this.updateBadge();
// 更新会话列表状态
uni.$emit('onUpdateChatList', list);
}
}
// 删除指定会话
async removeChatItem(id,) {
// 获取所有会话列表
let list = this.getChatList();
// 找到当前会话
let index = list.findIndex(item => item.id === id && item.chat_type === chat_type);
if (index !== -1) {
list.splice(index, 1);
let key = `chatlist_${this.user.id}`;
this.setStorage(key, list);
// 重新获取未读数
this.updateBadge();
// 更新会话列表状态
uni.$emit('onUpdateChatList', list);
}
}
// 清空聊天记录
async clearChatDetail(id,) {
let key = `chatDetail_${this.user.id}_${chat_type}_${id}`;
$U.removeStorage(key);
// 获取所有会话列表
let list = this.getChatList();
// 找到当前会话
let index = list.findIndex(item => item.id === id && item.chat_type === chat_type);
if (index !== -1) {
list[index].data = '';
let key = `chatlist_${this.user.id}`;
this.setStorage(key, list);
// 更新会话列表状态
uni.$emit('onUpdateChatList', list);
}
}
/**
{
id:1, // 接收人/群 id
chat_type:'user', // 接收类型 user单聊 group群聊
avatar:'', // 接收人/群 头像
name:'昵称', // 接收人/群 昵称
update_time:(new Date()).getTime(), // 最后一条消息的时间戳
data:"最后一条消息内容", // 最后一条消息内容
type:'text', // 最后一条消息类型
noreadnum:0, // 未读数
istop:false, // 是否置顶
shownickname:0, // 是否显示昵称
nowarn:0, // 消息免打扰
strongwarn:0, // 是否开启强提醒
user_id:0, // 群管理员id
remark:"公告", // 群公告
invite_confirm:0, // 邀请确认
}
* **/
// 初始化会话
initChatListItem(message) {
// 获取本地存储会话列表
let list = this.getChatList()
// 会话是否存在
let index = list.findIndex(item => {
return item.chat_type === message.chat_type && item.id === message.to_id
})
// 最后一条消息展现形式
let data = this.formatChatItemData(message, true)
// 会话不存在，创建会话
if (index === -1) {
let chatItem = {
id: message.to_id, // 接收人/群 id
chat_type: message.chat_type, // 接收类型 user单聊 group群聊
avatar: message.to_avatar, // 接收人/群 头像
name: message.to_name, // 接收人/群 昵称
update_time: (new Date()).getTime(), // 最后一条消息的时间戳
data: message.data, // 最后一条消息内容
type: 'system', // 最后一条消息类型
noreadnum: 0, // 未读数
istop: false, // 是否置顶
shownickname: false, // 是否显示昵称
nowarn: false, // 消息免打扰
strongwarn: false, // 是否开启强提醒
}
// 群聊
if (message.chat_type === 'group' && message.group) {
chatItem = {
...chatItem,
user_id: message.group.user_id, // 群管理员id
remark: '', // 群公告
invite_confirm: message.group.invite_confirm, // 邀请确认
}
}
list.unshift(chatItem)
// 存储
let key = `chatlist_${this.user.id}`
this.setStorage(key, list)
// 通知更新vuex中的聊天会话列表
uni.$emit('onUpdateChatList', list)
}
}
// 获取指定会话
getChatListItem(id,) {
// 获取所有会话列表
let list = this.getChatList()
// 找到当前会话
let index = list.findIndex(item => item.id === id && item.chat_type === chat_type)
if (index !== -1) {
return list[index]
}
return false
}
// 更新未读数
async updateBadge(list = false) {
// 获取所有会话列表
list = list ? list : this.getChatList()
// 统计所有未读数
let total = 0
list.forEach(item => {
total += item.noreadnum
})
// 设置底部导航栏角标
if (total > 0) {
uni.setTabBarBadge({
index: 0,
text: total <= 99 ? total.toString() : '99+'
})
} else {
uni.removeTabBarBadge({
index: 0
})
}
uni.$emit('totalNoreadnum', total)
}
// 获取存储
getStorage(key) {
let list = $U.getStorage(key);
return list ? JSON.parse(list) : [];
}
// 设置存储
setStorage(key,) {
return $U.setStorage(key, JSON.stringify(value));
}
// 数组置顶
listToFirst(arr,) {
if (index != 0) {
arr.unshift(arr.splice(index, 1)[0]);
}
return arr;
}
// 撤回消息
recall(message) {
return new Promise((result,) => {
$H.post('/chat/recall', {
to_id: message.to_id,
chat_type: message.chat_type,
id: message.id,
}).then(res => {
// key值：chatDetail_当前用户id_会话类型_接收人/群id
let key = `chatDetail_${this.user.id}_${message.chat_type}_${message.to_id}`
// 获取原来的聊天记录
let list = this.getChatDetail(key)
// 根据k查找对应聊天记录
let index = list.findIndex(item => item.id === message.id)
if (index === -1) return;
list[index].isremove = 1
// 存储
this.setStorage(key, list)
result(res)
// 更新会话最后一条消息显示
this.updateChatItem({
id: message.to_id,
chat_type: message.chat_type
}, (item) => {
item.data = '你撤回了一条消息'
item.update_time = (new Date()).getTime()
return item
})
}).catch(err => {
reject(err)
})
})
}
}
export default
/pages/chat/chat-set/chat-set.vue
<template>
<view style="background-color: #EDEDED;">
<!-- 导航栏 -->
<free-nav-bar title="聊天信息" showBack :showRight="false"></free-nav-bar>
<view class="flex flex-wrap py-3 bg-white">
<!-- 私聊 -->
<view v-if="detail.chat_type === 'user'" class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;">
<free-avatar :src="detail.avatar || '/static/images/userpic.png'" size="110"></free-avatar>
<text class="font text-muted mt-1" >{{detail.name}}</text>
</view>
<!-- 群聊 -->
<view v-else class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;" v-for="(item,index) in list" :key='index'>
<free-avatar :src="item.avatar || '/static/images/userpic.png'" size="110"></free-avatar>
<text class="font text-muted mt-1" >{{item.name}}</text>
</view>
<view class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;" @click="openMail">
<view class="flex align-center justify-center border" hover-class="bg-light" style="width: 120rpx;height: 120rpx;">
<text class="text-light-muted" style="font-size: 100rpx;" >+</text>
</view>
</view>
</view>
<free-divider></free-divider>
<view v-if="detail.chat_type==='group'">
<free-list-item title="群聊名称" showRight :showLeftIcon="false" @click="updateName()">
<text slot="right" class="font text-muted">{{detail.name}}</text>
</free-list-item>
<free-list-item title="群二维码" showRight :showLeftIcon="false" @click="openCode">
<text slot="right" class="iconfont font-md text-light-muted"></text>
</free-list-item>
<free-list-item title="群公告" showRight :showLeftIcon="false" @click="openGroupRemark"></free-list-item>
</view>
<free-divider></free-divider>
<free-list-item title="查找聊天记录" showRight :showLeftIcon="false"></free-list-item>
<free-divider></free-divider>
<free-list-item title="消息免打扰" showRight :showLeftIcon="false" :showRightIcon="false">
<switch slot="right" :checked="detail.nowarn" @change="updateChatItem($event,'nowarn')" color="#08C060" />
</free-list-item>
<free-list-item title="置顶聊天" showRight :showLeftIcon="false" :showRightIcon="false">
<switch slot="right" :checked="detail.istop" @change="updateChatItem($event,'istop')" color="#08C060"/>
</free-list-item>
<free-list-item title="强提醒" showRight :showLeftIcon="false" :showRightIcon="false">
<switch slot="right" :checked="detail.strongwarn" @change="updateChatItem($event,'strongwarn')" color="#08C060"/>
</free-list-item>
<free-divider></free-divider>
<free-list-item title="清空聊天记录" showRight :showLeftIcon="false" @click="clear"></free-list-item>
<free-divider></free-divider>
<view v-if="detail.chat_type==='group'">
<free-divider></free-divider>
<free-list-item title="我在本群的昵称" showRight :showLeftIcon="false" @click="updatenickName">
<text slot="right" class="font text-muted">{{nickname}}</text>
</free-list-item>
<free-list-item title="显示群成员昵称" showRight :showLeftIcon="false" :showRightIcon="false">
<switch slot="right" :checked="detail.shownickname" @change="updateChatItem($event,'shownickname')" color="#08C060"/>
</free-list-item>
</view>
<free-divider></free-divider>
<free-list-item title="投诉" showRight :showLeftIcon="false"></free-list-item>
<free-divider></free-divider>
<view v-if="detail.chat_type === 'group'" class="py-3 flex align-center justify-center bg-white" hover-class="bg-light" @click="quit">
<text class="font-md text-danger">删除并退出</text>
</view>
<free-confirm :title="'修改'+confirmTitle" ref="confirm">
<input type="text" class="border-bottom font-md" :placeholder="confirmTitle" v-model="confirmText"/>
</free-confirm>
<view style="height: 200rpx;"></view>
</view>
</template>
<script>
import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
import freeAvatar from '@/components/free-ui/free-avatar.vue';
import freeDivider from '@/components/free-ui/free-divider.vue';
import freeListItem from '@/components/free-ui/free-list-item.vue';
import freeConfirm from '@/components/free-ui/free-confirm.vue';
import auth from '@/common/mixin/auth.js';
import { mapState } from 'vuex';
import $H from '@/common/free-lib/request.js';
export default {
mixins:[auth],
components:{
freeNavBar,
freeAvatar,
freeDivider,
freeListItem,
freeConfirm
},
computed:{
...mapState({
chat:state=>state.user.chat,
user:state=>state.user.user
}),
confirmTitle(){
return this.confirmType === 'name' ? '群名称' : '昵称';
}
},
data() {
return {
list:[],
confirmText:'',
nickname:'',
detail:{
id:0, // 接收人/群 id
chat_type:'user', // 接收类型 user 单聊 group群聊
name:'', // 接收人/群 昵称
avatar:"", // 接收人/群 头像
type:'',// 最后一条消息类型
istop:false, // 是否置顶
shownickname:false, // 是否显示昵称
nowarn:false, // 是否免打扰
strongwarn:false, // 是否强提醒
user_id:0,//管理员id，
remark:'', // 群公告
invite_confirm:0, // 邀请确认
}
}
},
methods: {
clear(){
uni.showModal({
content:'是否要清空聊天记录？',
success:(res)=>{
if(res.confirm){
this.chat.clearChatDetail(this.detail.id,this.detail.chat_type);
uni.showToast({
title:'清除成功',
icon:'none'
})
uni.$emit('updateHistory');
}
}
})
},
openCode(){
uni.navigateTo({
url:'../../my/code/code?params='+encodeURIComponent(JSON.stringify({
id:this.detail.id,
name:this.detail.name,
avatar:this.detail.avatar
}))+'&type=group',
})
},
updateChatItem(e,k){
console.log(e.detail.value,k);
this.detail[k] = e.detail.value;
this.chat.updateChatItem({
id:this.detail.id,
chat_type:this.detail.chat_type
},this.detail);
},
quit(){
uni.showModal({
content:'是否要删除或退出群聊？',
success: (res) => {
if(res.cancel) return;
$H.post('/group/quit',{
id:this.detail.id
}).then(res=>{
uni.showToast({
title: '操作成功',
icon:'none'
});
uni.navigateBack({
delta:1
})
})
}
})
},
updatenickName(){
this.confirmType = 'nickname';
this.confirmText = this.nickname
this.$refs.confirm.show((close)=>{
if(this.confirmText == ''){
return uni.showToast({
title:'昵称不能为空',
icon:'none'
})
}
$H.post('/group/nickname',{
id:this.detail.id,
nickname:this.confirmText
}).then(res=>{
uni.showToast({
title:'修改成功',
icon:'none'
});
this.nickname = this.confirmText;
close();
})
});
},
openGroupRemark(){
uni.navigateTo({
url: '../group-remark/group-remark?params='+encodeURIComponent(JSON.stringify({
id:this.detail.id,
remark:this.detail.remark
}))
});
},
openMail(){
uni.navigateTo({
url:'/pages/mail/mail/mail?type=createGroup'
})
},
updateName(){
this.confirmText = this.detail.name
this.$refs.confirm.show((close)=>{
if(this.confirmText == ''){
return uni.showToast({
title:'群名称不能为空',
icon:'none'
})
}
$H.post('/group/rename',{
id:this.detail.id,
name:this.confirmText
}).then(res=>{
uni.showToast({
title:'修改成功',
icon:'none'
});
this.detail.name = this.confirmText;
close();
})
});
}
},
onLoad(e) {
if(!e.params){
return this.backToast();
}
let detail = JSON.parse(e.params);
// 获取当前会话的详细资料
detail = this.chat.getChatListItem(detail.id,detail.chat_type);
if(!detail){
return this.backToast()
}
this.detail = detail;
if(this.detail.chat_type === 'group'){
$H.get('/group_info/'+this.detail.id).then(res=>{
this.detail.remark = res.remark;
this.list = res.group_users.map(item=>{
if(item.user_id === this.user.id){
this.nickname = item.nickname;
}
return {
id:item.user_id,
name:item.nickname || item.user.nickname || item.user.username,
avatar:item.user.avatar
}
})
})
}
}
}
</script>
<style>
</style>
下图是我测试的 截图
感谢大家观看，我们下次见
