|
vue+pc端sokect聊天功能实现(可发送图片，视频，评分，选择产品）
1.效果图
   
{{item.name}}
[ 视频 ]
[ 图片 ]
[ 语音 ]
[ 产品 ]
{{item.message}}
{{userName}}
moreText}} -->
{{item.time}}
您的浏览器不支持视频播放
{{item.message.proName}}
￥{{item.message.price}}
{{item.message}}
{{item.time}}
您的浏览器不支持视频播放
{{item.message.proName}}
￥{{item.message.price}}
{{item.message}}
发送
全部商品
{{item.proName.length>20?item.proName.slice(0,21)+'...':item.proName}}
￥{{item.price}}
发送
返回
import {
policy1
} from '../../../api/oss.js'
import singleUpload from '../../../components/singleUpload.vue' //单张
import {
getInfo,
} from '../../../api/login.js'
import {
getChat, //查询用户聊天分组
getChatMessage,
sendMessage,
queryUser
} from '../../../api/bannerManagement.js'
import {
addMall,
listGoods1
} from '../../../api/mallManagement.js'
export default {
name: 'Resource',
components: {
singleUpload
},
data() {
return {
currentPage: 1,
pageSize: 10,
total: 10,
goodsList: [],
goods: '',
dialogTableVisibles: false,
srcList: [],
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
},
dataObj1: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
},
userImg: '',
moreText: '点击查看更多',
chatUserId: null,
userName: '',
keywordNew: '',
list: [],
wsUrl: '',
content: [{
id: 33,
time: '2021-3-11 10:10:10',
icon: "",
message: '1234',
}],
userList: [],
websocket: null,
dialogTableVisible: true,
input2: '',
textarea2: '',
websock: null,
username: '',
page: 1,
pageSize: 10,
dialogImageUrl: null,
dialogImageUrlArr: [],
userData: {},
fileList1: [],
}
},
created() {
},
computed: {
imageUrl() {
console.log("修改图", this.value);
if (this.value) {
this.dialogImageUrl = this.value;
} else {
this.dialogImageUrl = '';
}
return this.value;
},
imageName() {
if (this.value != null && this.value !== '') {
return this.value.substr(this.value.lastIndexOf('/') + 1)
} else {
return null
}
},
fileList() {
return [{
name: this.imageName,
url: this.imageUrl
}]
},
showFileList: {
get: function() {
return this.value !== null && this.value !== '' && this.value !== undefined
},
set: function(newValue) {}
}
},
mounted() {
getInfo().then(res => {
this.username = res.data.username;
this.getSocket()
// console.log('获取名字111', this.username)
}).catch(res => {})
this.chatPai();
queryUser().then(res => {
// console.log('获取初始化数据', res.data);
this.userData = res.data;
}).catch(res => {
})
this.update();
},
methods: {
//发送产品
selectGoods(item){
var data = {
message: 'SHARE_PRODUCT_MESSAGE_ID:' + item.id,
userId: this.chatUserId,
}
sendMessage(data).then(res => {
let message = {
"evaluateId": null,
"id": null,
"message": "",
"sendMember": null,
"time": null,
"type": "",
}
message.sendMember = this.userData;
message.message = item;
message.type = 'TIMProductElem';
message.time = this.dateFormat(new Date());
this.fileList1 = '';
this.userList.push(
message
)
this.chatPai();
this.$message({
type: 'success',
message: res.message
});
}).catch(res => {
})
},
queryApi(searchData) {
listGoods1(searchData).then(res => {
this.total = res.data.total;
this.goodsList = res.data.list;
this.$message({
type: 'success',
message: res.message
});
this.goods = '';
}).catch(res => {
// console.log("失败", res);
this.$message({
type: 'warning',
message: res.message
});
})
},
toquery() {
var searchData = {};
this.keywordNew = this.goods;
searchData.keyword = this.goods; //搜索字符串
searchData.page = this.currentPage; // 当前页
searchData.limit = this.pageSize; //每页显示数量
searchData.type = null; //全部=null,下架=0,上架=1,售罄=2
console.log("查询", searchData);
this.queryApi(searchData);
},
//更新
update() {
var that = this;
//初始化
var userDataList = {};
userDataList.page = this.currentPage; //当前页
userDataList.limit = this.pageSize; //每页显示条数
userDataList.type = null;
listGoods1(userDataList).then(res => {
console.log("成功", res.data.list);
this.total = res.data.total;
that.goodsList = res.data.list;
}).catch(res => {
console.log("失败", res);
})
},
//分页
handleSizeChange(val) {
this.pageSize = val;
if (this.keywordNew) {
var searchData = {};
searchData.keyword = this.keywordNew; //搜索字符串
searchData.page = this.currentPage; // 当前页
searchData.limit = this.pageSize; //每页显示数量
searchData.type = null; //全部=null,下架=0,上架=1,售罄=2
this.queryApi(searchData);
} else {
this.update();
}
},
handleCurrentChange(val) {
this.currentPage = val;
if (this.keywordNew) {
var searchData = {};
searchData.keyword = this.keywordNew; //搜索字符串
searchData.page = this.currentPage; // 当前页
searchData.limit = this.pageSize; //每页显示数量
searchData.type = null; //全部=null,下架=0,上架=1,售罄=2
this.queryApi(searchData);
} else {
this.update();
}
},
//评分
score() {
var data = {
message: 'TO_END_MESSAGE_SCORE',
userId: this.chatUserId,
}
sendMessage(data).then(res => {
this.chatPai();
}).catch(res => {})
},
beforeUpload1(file) {
var fileSize = file.size / 1024 / 1024
type: 'warning',
message: '请上传正确的视频格式'
});
return false;
}
if (!fileSize) {
this.$message({
type: 'warning',
message: '视频大小不能超过100MB'
});
return false;
}
this.videoFlag = true;
console.log("上传视频值", file);
const _self = this
return new Promise((resolve, reject) => {
policy1().then(response => {
console.log("视频---->获取数据", response.data);
_self.dataObj1.policy = response.data.policy;
// console.log('policy值',response.data.policy);
_self.dataObj1.signature = response.data.signature;
// console.log('signature值',response.data.signature);
_self.dataObj1.ossaccessKeyId = response.data.accessKeyId;
// console.log('ossaccessKeyId值',response.data.accessKeyId);
_self.dataObj1.key = response.data.dir + this.getUUID() + '_${filename}';
console.log('视频---->key值', response.data.dir + this.getUUID() + '_${filename}');
_self.dataObj1.dir = response.data.dir;
console.log('视频---->dir值', response.data.dir);
_self.dataObj1.host = response.data.host;
_self.dataObj1.callback = response.data.callback;
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
},
handleUploadSuccess1(res, file) {
let url = this.dataObj1.host + '/' + this.dataObj1.key.replace('${filename}', file.name);
this.fileList1 = url
console.log("视频地址", this.fileList1);
var data = {
message: this.fileList1,
userId: this.chatUserId,
}
sendMessage(data).then(res => {
let message = {
"evaluateId": null,
"id": null,
"message": "",
"sendMember": null,
"time": null,
"type": "",
}
message.sendMember = this.userData;
message.message = this.fileList1;
message.type = 'TIMVideoFileElem';
message.time = this.dateFormat(new Date());
this.fileList1 = '';
this.userList.push(
message
)
this.chatPai();
}).catch(res => {
})
},
handleRemove(file, fileList) {
this.emitInput('')
},
handleUploadSuccess(res, file) {
this.showFileList = true
this.fileList.pop();
this.dialogImageUrl = this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name);
this.dialogImageUrlArr.push(this.dialogImageUrl);
console.log('上传图片', this.dialogImageUrl);
var data = {
message: this.dialogImageUrl,
userId: this.chatUserId,
}
sendMessage(data).then(res => {
let message = {
"evaluateId": null,
"id": null,
"message": "",
"sendMember": null,
"time": null,
"type": "",
}
message.sendMember = this.userData;
message.message = this.dialogImageUrl;
message.type = 'TIMImageElem';
message.time = this.dateFormat(new Date());
this.dialogImageUrl = '';
this.userList.push(
message
)
this.chatPai();
}).catch(res => {
})
},
getUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
})
},
beforeUpload(file) {
console.log("获取数据前", file);
const _self = this;
return new Promise((resolve, reject) => {
policy1().then(response => {
_self.dataObj.policy = response.data.policy;
_self.dataObj.signature = response.data.signature;
_self.dataObj.ossaccessKeyId = response.data.accessKeyId;
_self.dataObj.key = response.data.dir + this.getUUID() + '_${filename}';
console.log('key值', _self.dataObj.key);
_self.dataObj.dir = response.data.dir;
_self.dataObj.host = response.data.host;
_self.dataObj.callback = response.data.callback;
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
},
//滚动事件
scrollEvent(e) {
var container = this.$el.querySelector(".wxchatBorderRightMid");
if (container.scrollTop == 0) {
getChatMessage(this.chatUserId, ++this.page, this.pageSize).then(res => {
// let message = res.data.list;
// message.push(this.userList)
this.userList = res.data.list.concat(this.userList)
for(let item of this.userList){
if(item.type =='TIMProductElem'){
var string =eval('(' + item.message + ')')
item.message = string;
}else{
console.log(item.message)
}
}
console.log('聊天记录', res.data.list)
this.$nextTick(() => {
var container = this.$el.querySelector(".wxchatBorderRightMid");
container.scrollTop = container.scrollHeight / this.page;
})
}).catch(res => {})
}
},
sendMessage() {
var data = {
message: this.textarea2,
userId: this.chatUserId,
}
sendMessage(data).then(res => {
let message = {
"evaluateId": null,
"id": null,
"message": "",
"sendMember": null,
"time": null,
"type": "",
}
message.sendMember = this.userData;
message.message = this.textarea2;
message.type = 'TIMTextElem';
message.time = this.dateFormat(new Date());
this.textarea2 = '';
this.userList.push(
message
)
this.chatPai()
}).catch(res => {
})
},
chatPai() {
getChat().then(res => {
this.list = res.data.list;
this.userName = this.list[0].name;
console.log('获取初始化数据', this.list[0]);
if (this.list.length > 0) {
getChatMessage(this.list[0].id, this.page, this.pageSize).then(res => {
this.userList = res.data.list;
this.chatUserId = this.list[0].id;
for(let item of this.userList){
if(item.type =='TIMProductElem'){
var string =eval('(' + item.message + ')')
item.message = string;
}
}
console.log("聊天记录",this.userList)
this.scrollToBottom()
}).catch(res => {
})
}
}).catch(res => {
})
},
//提交
onSubmit() {
console.log(this.textarea2, '回车');
var data = {
message: this.textarea2,
userId: this.chatUserId
}
sendMessage(data).then(res => {
let message = {
"evaluateId": null,
"id": null,
"message": "",
"sendMember": null,
"time": null,
"type": "",
}
message.sendMember = this.userData;
message.message = this.textarea2;
message.type = 'TIMTextElem';
message.time = this.dateFormat(new Date());
this.textarea2 = '';
this.userList.push(
message
)
this.chatPai();
}).catch(res => {
})
},
scrollToBottom() {
this.$nextTick(() => {
var container = this.$el.querySelector(".wxchatBorderRightMid");
container.scrollTop = container.scrollHeight;
})
},
getInfo(data) {
this.page = 1;
this.pageSize = 15;
this.userName = data.name;
this.chatUserId = data.id;
console.log('idsdfs', this.chatUserId);
getChatMessage(data.id, this.page, this.pageSize).then(res => {
this.userList = res.data.list;
for(let item of this.userList){
if(item.type =='TIMProductElem'){
var string =eval('(' + item.message + ')')
item.message = string;
}else{
console.log(item.message)
}
}
this.scrollToBottom();
console.log('聊天记录', res.data.list)
}).catch(res => {})
},
getSocket() {
//获取消息
let that = this;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
var socket = new WebSocket('地址?uid=' + that.username + '&type=1');
} else {
alert('当前浏览器 Not support websocket')
}
socket.onopen = () => {
console.log("websocket握手成功!")
}
socket.onmessage = (e) => {
try {
let nowMessage = JSON.parse(e.data);
console.log('获取对方id', this.chatUserId);
if (nowMessage.sendMember.id == this.chatUserId) {
let jsonString = JSON.parse(nowMessage.message);
nowMessage.message = jsonString;
this.userList.push(
nowMessage
)
this.scrollToBottom();
} else {
for (let item of this.list) {
if (item.id == nowMessage.sendMember.id) {
item.message = nowMessage.message;
}
}
}
console.log(e.data);
} catch (err) {
console.log(err);
}
};
},
dateFormat(date) {
let fmt = 'YYYY-mm-dd HH:MM:SS'
let ret;
const opt = {
"Y+": date.getFullYear().toString(), // 年
"m+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"M+": date.getMinutes().toString(), // 分
"S+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
};
};
return fmt;
}
}
}
/* 商品选择 */
.goodsInfo {
border: 1px solid #CCCCCC;
height: 269px;
width: 204px;
display: flex;
flex-direction: column;
margin: 4px 4px;
}
.goodsText {
display: flex;
justify-content: space-between;
padding: 9px 5px;
align-items: center;
}
.selectGoods {
height: 50px;
line-height: 40px;
display: flex;
position: relative;
top: 40px;
margin: 0 50px;
align-items: center;
background-color: #F3F3F3;
}
.goodContent {
flex-wrap: wrap;
display: flex;
}
.goodsList {
position: relative;
top: 50px;
/* height: 700px; */
margin: 0 50px;
/* padding: 10px 10px; */
box-sizing: border-box;
border: 1px solid #CCCCCC;
display: flex;
}
/deep/ .avatar-uploader .el-upload {
border: 1px dashed transparent !important;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: inherit !important;
}
.app-container {
width: 100%;
margin: 20px auto;
height: 900px;
position: relative;
display: flex;
justify-content: center;
}
.contact {
border-bottom: 1px dashed #ccc;
}
.rightContent {
display: flex;
flex-direction: column;
}
.content {
width: 1000px;
display: flex;
}
.el-dialog__header {
padding: 20px 20px 10px;
}
.chatPop1 :hover {
background-color: #FAFAFA;
}
video {
object-fit: fill;
}
.chatPop1 .chatPop_item {
background-color: #fff;
padding: 17px 19px;
display: inline-block;
border-radius: 10px;
margin: 0px 0 10px 10px;
position: relative;
border: 1px solid #E3E3E3;
max-width: 247px;
}
.chatPop1 .chatPop_item::after {
content: '';
border: 8px solid #ffffff00;
border-right: 8px solid #fff;
position: absolute;
top: 8px;
left: -16px;
}
.chatPop2 :hover {
/* background-color: #FAFAFA; */
}
.chatPop2 .chatPop_item {
background-color: #2683f5;
padding: 17px 19px;
display: inline-block;
border-radius: 10px;
margin: 0px 15px 10px 10px;
position: relative;
border: 1px solid #E3E3E3;
max-width: 247px;
float: right;
color: #fff;
}
.chatPop2 .chatPop_item::after {
content: '';
border: 8px solid #ffffff00;
border-right: 8px solid #2683f5;
position: absolute;
top: 8px;
right: -16px;
transform: rotateY(180deg)
}
.custom {
border: 0px solid blue;
height: 670px;
width: 795px;
}
.wxchatBorder {
width: 795px;
height: 670px;
border: 1px solid red;
margin-left: -20px;
margin-top: -59.5px;
}
.wxchatBorderLeft::-webkit-scrollbar {
display: none;
}
.wxchatBorderLeft {
width: 250px;
background-color: #eeebe9;
display: inline-block;
overflow-y: scroll;
width: 250px;
}
.wxchatPeople {
color: #000000;
font-size: 14px;
}
.wxchatNews {
color: #999;
padding-top: 5px;
font-size: 12px;
}
.wxchatName {
color: #000000;
font-size: 20px;
float: left;
padding-left: 30px;
padding-top: 20px;
}
.wxchatMore {
color: #999;
font-size: 20px;
float: right;
margin-right: -15px;
padding-top: 25px;
}
.wxchatBorderRight {
max-width: 245px;
height: 670px;
display: inline-block;
float: right;
margin-right: -22px;
margin-top: -60px;
}
.wxchatBorderRightTop {
width: 748px;
height: 60px;
background-color: #f5f5f5;
border-bottom: 1px solid #e7e7e7;
display: block;
float: right;
}
.more {
text-align: center;
color: #CCCCCC;
margin: 10px auto;
}
.wxchatBorderRightMid ::-webkit-scrollbar {
display: none;
}
.wxchatBorderRightMid {
height: 603px;
background-color: #f5f5f5;
overflow-y: scroll;
}
.wxchatBorderRightBottom {
height: 196px;
background-color: #fff;
border: 1px solid #eee;
}
.wxchatIcon1 {
display: inline-block;
padding: 8px 10px 10px 30px;
width: 40px;
height: 40px;
font-size: 20px;
}
.wxchatIcon2 {
display: inline-block;
padding: 8px 10px 10px 20px;
width: 40px;
height: 40px;
font-size: 20px;
}
.wxchatIcon3 {
display: inline-block;
padding: 8px 10px 10px 10px;
width: 40px;
height: 40px;
font-size: 20px;
}
.wxchatIcon4 {
display: inline-block;
padding: 8px 10px 10px 0px;
width: 40px;
height: 40px;
font-size: 20px;
}
.sendButton {
float: right;
margin-top: 5px;
margin-right: 28px;
}
; color: #CCCCCC; margin: 10px auto; }
.wxchatBorderRightMid ::-webkit-scrollbar { display: none; }
.wxchatBorderRightMid { height: 603px; background-color: #f5f5f5; overflow-y: scroll; }
.wxchatBorderRightBottom { height: 196px; background-color: #fff; border: 1px solid #eee; }
.wxchatIcon1 { display: inline-block; padding: 8px 10px 10px 30px; width: 40px; height: 40px; font-size: 20px; }
.wxchatIcon2 { display: inline-block; padding: 8px 10px 10px 20px; width: 40px; height: 40px; font-size: 20px; }
.wxchatIcon3 { display: inline-block; padding: 8px 10px 10px 10px; width: 40px; height: 40px; font-size: 20px; }
.wxchatIcon4 { display: inline-block; padding: 8px 10px 10px 0px; width: 40px; height: 40px; font-size: 20px; }
.sendButton { float: right; margin-top: 5px; margin-right: 28px; }
转发请注明原创噢~~~~
看完记得点个赞哟！！！
|