|
|
@@ -6,34 +6,35 @@
|
|
|
<scroll-view class="scroll-view" scroll-y="true" scroll-with-animation="true"
|
|
|
:scroll-into-view="scrollToView">
|
|
|
<view class="list-scroll-view">
|
|
|
- <view class="chat-ls" v-for="(item,index) in unshiftmsg" :key="index" :id="'msg'+ index">
|
|
|
+ <view class="chat-ls" v-for="(item,index) in msgList" :key="index" :id="'msg'+ index">
|
|
|
<view class="chat-time" v-if="item.time != ''">
|
|
|
{{item.time}}
|
|
|
</view>
|
|
|
- <view class="msg-m msg-left" v-if="item.speaker != friendName">
|
|
|
- <image class="user-img" :src="item.file&&item.file.length>0?item.file[0].url:''">
|
|
|
+ <view class="msg-m msg-left" v-if="item.speaker != user._id">
|
|
|
+ <image @tap="toShop()" class="user-img"
|
|
|
+ :src="shop.logo&&shop.logo.length>0?shop.logo[0].url:''">
|
|
|
</image>
|
|
|
<!-- 文字 -->
|
|
|
- <view class="message" v-if="item.TextType == 0">
|
|
|
+ <view class="message" v-if="item.msg_type =='0'">
|
|
|
<view class="msg-text">{{item.content}}</view>
|
|
|
</view>
|
|
|
<!-- 图像 -->
|
|
|
- <view class="message img" v-else @tap="previewImg(item.content)">
|
|
|
- <image :src="item.content&&item.content.length>0?item.content[0].url:''"
|
|
|
- class="msg-img" mode="widthFix"></image>
|
|
|
+ <view class="message img" v-else-if="item.msg_type =='1'"
|
|
|
+ @tap="previewImg(item.content)">
|
|
|
+ <image :src="item.content" class="msg-img" mode="widthFix"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="msg-m msg-right" v-if="item.speaker == friendName">
|
|
|
- <image class="user-img" :src="item.file&&item.file.length>0?item.file[0].url:''">
|
|
|
+ <view class="msg-m msg-right" v-if="item.speaker == user._id">
|
|
|
+ <image class="user-img" :src="user.icon&&user.icon.length>0?user.icon[0].url:''">
|
|
|
</image>
|
|
|
<!-- 文字 -->
|
|
|
- <view class="message" v-if="item.TextType == 0">
|
|
|
+ <view class="message" v-if="item.msg_type =='0'">
|
|
|
<view class="msg-text">{{item.content}}</view>
|
|
|
</view>
|
|
|
<!-- 图像 -->
|
|
|
- <view class="message img" v-else @tap="previewImg(item.content)">
|
|
|
- <image :src="item.content&&item.content.length>0?item.content[0].url:''"
|
|
|
- class="msg-img" mode="widthFix"></image>
|
|
|
+ <view class="message img" v-else-if="item.msg_type =='1'"
|
|
|
+ @tap="previewImg(item.content)">
|
|
|
+ <image :src="item.content" class="msg-img" mode="widthFix"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -56,88 +57,37 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- friendName: "zs",
|
|
|
+ // 用户信息
|
|
|
user: {},
|
|
|
- info: {},
|
|
|
+ // 房间号id
|
|
|
id: '',
|
|
|
- name: '',
|
|
|
- msg: [],
|
|
|
- // 反转数据接收
|
|
|
- unshiftmsg: [{
|
|
|
- "speaker": "zs",
|
|
|
- "content": "这是第一条未读消息",
|
|
|
- "time": "2023-01-12 12:21:03",
|
|
|
- "TextType": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "speaker": "yy",
|
|
|
- "content": "这是第二条未读消息",
|
|
|
- "time": "2023-01-12 12:22:58",
|
|
|
- "TextType": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "speaker": "zs",
|
|
|
- "content": "这是第三条未读消息",
|
|
|
- "time": "2023-01-12 12:22:03",
|
|
|
- "TextType": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "speaker": "yy",
|
|
|
- "content": "这是第四条未读消息",
|
|
|
- "time": "2023-01-12 12:21:58",
|
|
|
- "TextType": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "speaker": "zs",
|
|
|
- "content": "这是第五条未读消息",
|
|
|
- "time": "2023-01-12 12:22:03",
|
|
|
- "TextType": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "speaker": "yy",
|
|
|
- "content": "这是第六条未读消息",
|
|
|
- "time": "2023-01-12 12:21:58",
|
|
|
- "TextType": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "speaker": "zs",
|
|
|
- "content": "这是第七条未读消息",
|
|
|
- "time": "2023-01-12 12:22:03",
|
|
|
- "TextType": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "speaker": "yy",
|
|
|
- "content": "这是第八条未读消息",
|
|
|
- "time": "2023-01-12 12:21:58",
|
|
|
- "TextType": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "speaker": "zs",
|
|
|
- "content": "这是第九条未读消息",
|
|
|
- "time": "2023-01-12 12:22:03",
|
|
|
- "TextType": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "speaker": "zs",
|
|
|
- "content": "这是第十条未读消息",
|
|
|
- "time": "2023-01-12 12:21:58",
|
|
|
- "TextType": 0
|
|
|
- },
|
|
|
- ],
|
|
|
- imgMsg: [],
|
|
|
- scrollToView: '',
|
|
|
+ // 店铺信息
|
|
|
+ shop: {},
|
|
|
+ // 历史记录
|
|
|
+ msgList: [],
|
|
|
+ scrollToView: '', //滑动最后一条信息
|
|
|
+ isSocketOpen: false, //socket是否打开
|
|
|
+ pingpangTimes: null, //socket心跳计时器
|
|
|
+ timeoutnum: null, //断开 重连倒计时，
|
|
|
+ closeType: 1, //断开判断：0代表不重连，1代表重连
|
|
|
};
|
|
|
},
|
|
|
+ onShow() {
|
|
|
+ const that = this;
|
|
|
+ // that.initWebpack(); //初始化
|
|
|
+ that.closeType = 1 //进入改为1，代表如果断开链接自动重连
|
|
|
+ if (that.id) that.search()
|
|
|
+ },
|
|
|
onLoad: async function(e) {
|
|
|
const that = this;
|
|
|
that.$set(that, `id`, e.id);
|
|
|
- that.$set(that, `name`, e.name);
|
|
|
- if (e.name) {
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: e.name
|
|
|
- });
|
|
|
- }
|
|
|
- await that.watchlogin();
|
|
|
+ that.watchlogin();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ const that = this;
|
|
|
+ that.closeType = 0 //离开页面前改为0，代表离开后断开链接不再重连
|
|
|
+ clearInterval(that.pingpangTimes) //清除socket心跳定时器
|
|
|
+ uni.closeSocket() //关闭socket
|
|
|
},
|
|
|
methods: {
|
|
|
// 监听用户是否登录
|
|
|
@@ -147,58 +97,137 @@
|
|
|
key: 'token',
|
|
|
success: function(res) {
|
|
|
let user = that.$jwt(res.data);
|
|
|
- if (user) {
|
|
|
- that.$set(that, `user`, user)
|
|
|
- // if (that.id)
|
|
|
- that.search()
|
|
|
- }
|
|
|
+ if (user) that.$set(that, `user`, user)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ // 查询历史记录
|
|
|
async search() {
|
|
|
const that = this;
|
|
|
let res;
|
|
|
+ res = await that.$api(`/chatRecord`, `GET`, {
|
|
|
+ room: that.id
|
|
|
+ }, 'chat');
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ that.$set(that, `msgList`, res.data);
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.errmsg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ res = await that.$api(`/room/${that.id}`, `GET`, {}, 'chat')
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ that.$set(that, `shop`, res.data && res.data.shop);
|
|
|
+ if (res.data && res.data.shop && res.data.shop.name) {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: res.data.shop.name
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.errmsg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ let id = that.msgList.filter(i => {
|
|
|
+ return i.speaker != that.user._id;
|
|
|
+ })
|
|
|
+ let ids = id.map(i => {
|
|
|
+ return i._id
|
|
|
+ })
|
|
|
+ res = await that.$api(`/chatRecord/read`, `POST`, {
|
|
|
+ ids
|
|
|
+ }, 'chat')
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ console.log(res);
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.errmsg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 跳转到最后一条数据 与前面的:id进行对照
|
|
|
+ that.$nextTick(function() {
|
|
|
+ that.scrollToView = 'msg' + (that.msgList.length - 1)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 初始化websocket链接
|
|
|
+ initWebpack() {
|
|
|
+ const that = this;
|
|
|
let config = that.$config;
|
|
|
let url = `wss://${config.stompUrl}/ws/exchange/t_m_dev_local/635f82e62df39d4755a25a4a`;
|
|
|
- console.log(url);
|
|
|
+ //创建新的socket连接前确保旧的已关闭
|
|
|
uni.closeSocket()
|
|
|
uni.connectSocket({
|
|
|
url,
|
|
|
- // header: {
|
|
|
- // login: 'tehqDev',
|
|
|
- // passcode: 'tehqDev'
|
|
|
- // },
|
|
|
- success: async function(res) {
|
|
|
+ success: function(res) {
|
|
|
console.log(res, 's');
|
|
|
- // res = await that.$api(`/chatRecord`, `GET`, {
|
|
|
- // room: that.id
|
|
|
- // }, 'chat');
|
|
|
- // if (res.errcode == '0') {
|
|
|
- // console.log(res);
|
|
|
- // } else {
|
|
|
- // uni.showToast({
|
|
|
- // title: res.errmsg,
|
|
|
- // icon: 'none'
|
|
|
- // })
|
|
|
- // }
|
|
|
},
|
|
|
fail: function(err) {
|
|
|
console.log(err, 'e');
|
|
|
}
|
|
|
});
|
|
|
- // 跳转到最后一条数据 与前面的:id进行对照
|
|
|
- that.$nextTick(function() {
|
|
|
- that.scrollToView = 'msg' + (that.unshiftmsg.length - 1)
|
|
|
+ //监听socket打开
|
|
|
+ uni.onSocketOpen(() => {
|
|
|
+ that.isSocketOpen = true
|
|
|
+ console.log('WebSocket连接已打开！');
|
|
|
+ })
|
|
|
+ //监听socket关闭
|
|
|
+ uni.onSocketClose(() => {
|
|
|
+ that.isSocketOpen = false
|
|
|
+ //断开链接时判断
|
|
|
+ if (that.closeType == 0) return
|
|
|
+ that.reconnect(); //重连
|
|
|
+ console.log('WebSocket连接已关闭！');
|
|
|
+ })
|
|
|
+ //监听socket错误
|
|
|
+ uni.onSocketError(() => {
|
|
|
+ that.isSocketOpen = false
|
|
|
+ //断开链接时判断
|
|
|
+ if (that.closeType == 0) return
|
|
|
+ that.reconnect(); //重连
|
|
|
+ console.log('WebSocket连接打开失败');
|
|
|
+ })
|
|
|
+ //监听socket消息
|
|
|
+ uni.onSocketMessage((res) => {
|
|
|
+ let info = JSON.parse(res.data)
|
|
|
+ if (info.cadmin != 5) {
|
|
|
+ that.msgList = that.msgList.concat(info) //获取实时聊天内容信息
|
|
|
+ }
|
|
|
})
|
|
|
+ //先确保清除了之前的心跳定时器
|
|
|
+ clearInterval(that.pingpangTimes)
|
|
|
+ //每过一段时间发送一次心跳，发送Ping,服务器会反馈pong，这样操作以保持socket一直是连接状态，防止断开连接，心跳停止
|
|
|
+ that.pingpangTimes = setInterval(() => {
|
|
|
+ uni.sendSocketMessage({
|
|
|
+ data: "ping",
|
|
|
+ success: () => {},
|
|
|
+ fail: () => {
|
|
|
+ that.isSocketOpen = false
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, 60000)
|
|
|
+ },
|
|
|
+ //重新连接
|
|
|
+ reconnect() {
|
|
|
+ const that = this;
|
|
|
+ //防止重复链接
|
|
|
+ if (that.isSocketOpen) return;
|
|
|
+ that.isSocketOpen = true;
|
|
|
+ //没连接上会一直重连，设置延迟避免请求过多
|
|
|
+ that.timeoutnum && clearTimeout(that.timeoutnum);
|
|
|
+ that.timeoutnum = setTimeout(function() {
|
|
|
+ that.initWebpack(); //新连接
|
|
|
+ }, 5000);
|
|
|
},
|
|
|
// 进行图片的预览
|
|
|
previewImg(e) {
|
|
|
const that = this;
|
|
|
- let urls = e && e[0] && e[0].url;
|
|
|
// 预览图片
|
|
|
uni.previewImage({
|
|
|
current: 0,
|
|
|
- urls: [urls],
|
|
|
+ urls: [e],
|
|
|
longPressActions: {
|
|
|
itemList: ['发送给朋友', '保存图片', '收藏'],
|
|
|
success: function(data) {
|
|
|
@@ -211,28 +240,67 @@
|
|
|
});
|
|
|
},
|
|
|
//接受输入内容
|
|
|
- inputs(e) {
|
|
|
+ async inputs(e) {
|
|
|
const that = this;
|
|
|
- //时间间隔处理
|
|
|
- let data = {
|
|
|
- "room": "1001",
|
|
|
- "speaker": "zs",
|
|
|
- "content": e.message,
|
|
|
- "time": moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- "TextType": e.type
|
|
|
- };
|
|
|
- // 发送给服务器消息
|
|
|
- // onSendWS(JSON.stringify(data));
|
|
|
-
|
|
|
- that.unshiftmsg.push(data);
|
|
|
- // 跳转到最后一条数据 与前面的:id进行对照
|
|
|
- that.$nextTick(function() {
|
|
|
- that.scrollToView = 'msg' + (that.unshiftmsg.length - 1)
|
|
|
- })
|
|
|
- if (e.type == 1) {
|
|
|
- that.imgMsg.push(e.message);
|
|
|
+ let user = that.user
|
|
|
+ if (user._id) {
|
|
|
+ //时间间隔处理
|
|
|
+ let data = {
|
|
|
+ "room": that.id,
|
|
|
+ "speaker": user._id,
|
|
|
+ "content": e.message,
|
|
|
+ "time": moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ "msg_type": e.type
|
|
|
+ };
|
|
|
+ // 发送给服务器消息
|
|
|
+ // if (that.isSocketOpen) { //socket连接正常
|
|
|
+ let res = await that.$api(`/chatRecord`, `POST`, data, 'chat');
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ that.msgList.push(res.data);
|
|
|
+ // data = JSON.stringify(data) //后端规定的评论数据格式:json转字符串
|
|
|
+ // uni.sendSocketMessage({
|
|
|
+ // data,
|
|
|
+ // success: () => {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: '发送成功',
|
|
|
+ // icon: 'none'
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // fail: () => {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: '发送失败，请稍后再试或重新进入此页面尝试',
|
|
|
+ // icon: 'none'
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.errmsg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // } else { //socket已断开
|
|
|
+ // uni.showToast({
|
|
|
+ // title: '聊天断开啦，请重新进入此页面尝试 ~',
|
|
|
+ // icon: 'none'
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // 跳转到最后一条数据 与前面的:id进行对照
|
|
|
+ that.$nextTick(function() {
|
|
|
+ that.scrollToView = 'msg' + (that.msgList.length - 1)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '未登录账号无法发送消息 ，请及时登录！',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
}
|
|
|
- console.log(e)
|
|
|
+ },
|
|
|
+ // 店铺
|
|
|
+ toShop() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pagesHome/shop/index`
|
|
|
+ })
|
|
|
},
|
|
|
//输入框高度
|
|
|
heights(e) {
|
|
|
@@ -244,7 +312,7 @@
|
|
|
const that = this;
|
|
|
that.scrollToView = '';
|
|
|
that.$nextTick(function() {
|
|
|
- that.scrollToView = 'msg' + (that.unshiftmsg.length - 1)
|
|
|
+ that.scrollToView = 'msg' + (that.msgList.length - 1)
|
|
|
})
|
|
|
}
|
|
|
}
|
