uni-app 81聊天类封装（十五）-读取会话功能
Posted 2019ab
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uni-app 81聊天类封装（十五）-读取会话功能相关的知识，希望对你有一定的参考价值。
user.js
import $U from '@/common/free-lib/util.js';
import $H from '@/common/free-lib/request.js';
import Chat from '@/common/free-lib/chat.js';
import $C from '@/common/free-lib/config.js';
export default {
state: {
user: false,
apply: {
rows: [],
count: 0,
},
mailList: [],
chat: null,
// 会话列表
chatList: [],
// 总未读数
totalNoreadnum: 0
},
actions: {
// 登录后处理
login({
state,
dispatch
}, user) {
// 存到状态种
state.user = user;
// 存储到本地存储中
$U.setStorage('token', user.token);
$U.setStorage('user', JSON.stringify(user));
$U.setStorage('user_id', user.id);
// 获取好友申请列表
dispatch('getApply');
// 更新角标提示
dispatch('updateMailBadge');
// 连接socket
state.chat = new Chat({
url: $C.socketUrl
})
// 获取会话列表
dispatch('getChatList');
// 初始化总未读数角标
dispatch('updateBadge');
},
// 退出登录
logout({
state
}) {
// 清除登录状态
state.user = false;
// 清除本地存储数据
$U.removeStorage('token');
$U.removeStorage('user');
$U.removeStorage('user_id');
// 关闭socket连接
state.chat.close();
state.chat = null;
// 跳转到登录页
uni.reLaunch({
url: '/pages/common/login/login'
})
// 注销监听事件
uni.$off('onUpdateChatList')
uni.$off('momentNotice')
uni.$off('totalNoreadnum')
},
// 初始化登录状态
initLogin({
state,
dispatch
}) {
// 拿到存储的数据
let user = $U.getStorage('user');
if (user) {
// 初始化登录状态
state.user = JSON.parse(user);
// 连接socket
state.chat = new Chat({
url: $C.socketUrl
})
// 获取会话列表
dispatch('getChatList');
// 获取离线信息
// 获取好友申请列表
dispatch('getApply');
// 初始化总未读数角标
dispatch('updateBadge');
}
},
// 获取好友申请列表
getApply({
state,
dispatch
}, page = 1) {
$H.get('/apply/' + page).then(res => {
if (page === 1) {
state.apply = res
} else {
// 下拉刷新
state.apply.rows = [...state.apply.rows, ...res.rows]
state.apply.count = res.count
}
// 更新通讯录角标提示
dispatch('updateMailBadge');
});
},
// 更新通讯录角标提示
updateMailBadge({
state
}) {
let count = state.apply.count > 99 ? '99+' : state.apply.count.toString();
console.log(state.apply.count);
if (state.apply.count > 0) {
return uni.setTabBarBadge({
index: 1,
text: count
})
}
uni.removeTabBarBadge({
index: 1
})
},
// 获取通讯录列表
getMailList({
state
}) {
$H.get('/friend/list').then(res => {
state.mailList = res.rows.newList ? res.rows.newList : [];
})
},
// 获取会话列表
getChatList({
state
}) {
state.chatList = state.chat.getChatList();
// 监听会话列表
uni.$on('onUpdateChatList', (list) => {
state.chatList = list;
})
},
// 初始化总未读数角标
// 更新未读数
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)
},
// 初始化总未读数角标
updateBadge({
state
}){
// 开启监听总未读数变化
uni.$on('totalNoreadnum', (num) => {
console.log('totalNoreadnum:',num);
state.totalNoreadnum = num
})
state.chat.updateBadge()
},
},
}
user.js
import $U from "./util.js";
import $H from './request.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连接成功');
// 获取用户离线消息
}
// 监听关闭
onClose() {
// 用户下线
this.isOnline = false;
this.socket = null;
console.log('socket连接关闭');
}
// 监听消息
onMessage(data) {
console.log('监听消息', data);
let res = JSON.parse(data.data)
// console.log('监听接收消息',res)
// 错误
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;
}
}
// 处理消息
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((result, reject) => {
// 添加消息历史记录
// 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://tangzhe123-com'))
let uploadResult = ''
if (isUpload) {
uploadResult = $H.upload('/upload', {
filePath: message.data
}, onProgress)
if (!uploadResult) {
// 发送失败
message.sendStatus = 'fail'
// 更新指定历史记录
this.updateChatDetail(message, k)
// 断线重连提示
return reject(err)
}
}
$H.post('/chat/send', {
to_id: this.TO.id,
type: message.type,
chat_type: this.TO.chat_type,
data: message.data,
}).then(res => {
// 发送成功
console.log('chat.js发送成功');
message.id = res.id
message.sendStatus = 'success';
// 更新指定历史记录
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 = isSend ? message.to_id : message.from_id;
let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
if (!id) {
return {
data: {}uni-app 76聊天类封装-更新会话列表