添加聊天室功能

This commit is contained in:
yangjun 2024-07-25 10:10:11 +08:00
parent fe522cc3cb
commit 000cb4a55f
4 changed files with 38 additions and 33 deletions

View File

@ -14,7 +14,7 @@ module.exports = {
// 代理列表, 是否开启代理通过[./dev.env.js]配置
proxyTable: devEnv.OPEN_PROXY === false ? {} : {
'/proxyApi': {
target: "http://47.75.182.93:8090/sqx_fast/",
target: "https://sausers.blxinchuang.com/sqx_fast/",
changeOrigin: true,
pathRewrite: {
'^/proxyApi': ''

View File

@ -1,7 +1,7 @@
import Vue from 'vue'
// const serverUrl = "https://admin.sjajk.com/sqx_fast/";//生产需替换
const serverUrl = "http://47.75.182.93:8090/sqx_fast/";
const serverUrl = "https://sausers.blxinchuang.com/sqx_fast/";
export const serverPaths = {
serverUrl ,

View File

@ -53,7 +53,7 @@ http.adornUrl = (actionName) => {
http.adornWss = (actionName) => {
// 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
// return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
return 'wss://anmoadmin5.0.xianmaxiong.com' + actionName
return 'wss://sausers.blxinchuang.com/wss/' + actionName
// return 'https://anmoadmin5.0.xianmaxiong.comsqx_fast/' + actionName
}

View File

@ -17,19 +17,19 @@
v-bind:class="{ blue: index == current }" v-for="(item, index) in chatList" :key="index"
@click="clickItem(item, index)">
<div class="left-item-left">
<div class="left-item-head" v-if="item.userHead == null || item.userHead == ''">
<div class="left-item-head" v-if="item.avatar == null || item.avatar == ''">
<img src="~@/assets/img/head.png" />
</div>
<div class="left-item-head" v-else><img :src="item.userHead" /></div>
<div class="left-item-head" v-else><img :src="item.avatar" /></div>
<div class="left-item-info">
<div class="left-item-info_title">{{ item.userName }}</div>
<div class="left-item-info_content">{{ item.content }}</div>
</div>
</div>
<div class="left-item-time">
<div class="left-item-time-time" v-if="item.contentTime == null"></div>
<div class="left-item-time-time" v-if="item.messageTime == null"></div>
<div class="left-item-time-time" v-else>
{{ item.contentTime.substring(11, 16) }}
{{ item.messageTime.substring(11, 16) }}
</div>
<div class="left-item-time-number" style="position: absolute; left: 59px; top: 8px"
v-if="item.storeCount">
@ -58,18 +58,16 @@
<div class="center_wrapper_center" id="ele" style="overflow-y: auto" ref="dialogue_box">
<!-- <div class="item loading">{{loadText}}<span>{{"第" + pageNum + "页"}}</span></div> -->
<div v-for="(item, index) in dialogueList" :key="index" :class="
item.sendType == '1'
? center_wrapper_center_item
: center_wrapper_center_item_reserve
item.userId == 0
? center_wrapper_center_item_reserve
: center_wrapper_center_item
">
<div class="left-item-head">
<img v-if="item.sendType == '1' && userHead !== null" :src="userHead" />
<img v-else-if="item.sendType == '1' && userHead == null"
src="~@/assets/img/head.png" />
<img v-if="item.avatar != null && item.avatar !=''" :src="item.avatar" />
<img v-else src="~@/assets/img/avatar.png" />
</div>
<!-- 文字 -->
<div class="center-item-info_wrapper" v-if="item.type == 1">
<div class="center-item-info_wrapper" v-if="item.messageType==1">
<div class="center-item-tip">
<div class="center-item-info">
{{ item.content }}
@ -78,7 +76,7 @@
<div class="center-item-time">{{ item.createTime }}</div>
</div>
<!-- 图片 -->
<div class="center-item-info_wrapper" v-if="item.type == 2">
<div class="center-item-info_wrapper" v-else-if="item.messageType==2">
<div class="center-item-tip">
<div>
<el-popover placement="top-start" title="" trigger="hover">
@ -252,7 +250,7 @@ import { serverPaths } from '@/utils/enumData'
initWebSocket() {
this.websock = new WebSocket(
this.$http.adornWss("websocket/0"));
this.$http.adornWss("chatSocket/0"));
// "ws://192.168.1.17:8180/sqx_fast/websocket/0"); //ws://IP8081
// this.websock = new WebSocket("ws://yungameadmin.xianmxkj.com/ws/websocket/0");
this.websock.onmessage = this.websocketonmessage;
@ -360,11 +358,12 @@ import { serverPaths } from '@/utils/enumData'
},
//
clickItem(item, index) {
console.log(`🚀 ~ clickItem ~ item:`, item)
this.current = index;
this.userId = item.userId;
this.name = item.userName;
this.userHead = item.userHead;
this.chatId = item.chatId;
this.userHead = item.avatar;
this.chatId = item.chatConversationId;
this.chatList[index].storeCount = 0
this.clickItem2();
this.initWebSocket();
@ -373,16 +372,18 @@ import { serverPaths } from '@/utils/enumData'
clickItem2() {
this.$http({
url: this.$http.adornUrl("chatsContent/storeList"),
url: this.$http.adornUrl("chat/selectChatContent"),
method: "get",
params: this.$http.adornParams({
chatId: this.chatId,
chatConversationId: this.chatId,
page: 1,
limit: 10,
}),
}).then(({
data
}) => {
let returnData = data.data;
this.dialogueList = returnData;
this.dialogueList = returnData.list.reverse();
let ele = document.getElementById("ele");
this.$nextTick(() => {
ele.scrollTop = ele.scrollHeight;
@ -393,15 +394,16 @@ import { serverPaths } from '@/utils/enumData'
sendTextarea(type) {
let data = {
content: this.content,
type: type,
messageType: type,
createTime: this.info.stockDate,
sendType: this.sendType,
userId: this.userId,
userId: 0,
storeId: this.storeId,
chatId: this.chatId,
chatConversationId: this.chatId,
};
this.numlist = data;
data = JSON.stringify(data);
console.log(`🚀 ~ sendTextarea ~ data:`, data)
this.websock.send(data);
this.content = "";
this.dialogueList.push(this.numlist);
@ -450,20 +452,22 @@ import { serverPaths } from '@/utils/enumData'
dataSelect() {
this.tableDataLoading = true;
this.$http({
url: this.$http.adornUrl("chats/list"),
url: this.$http.adornUrl("chat/selectChatConversationPage"),
method: "get",
params: this.$http.adornParams({
userName: this.userName,
nickName: this.userName,
storeId: this.storeId,
page: 1,
limit: 10,
}),
}).then(({
data
}) => {
this.tableDataLoading = false;
let returnData = data.data;
this.chatList = returnData;
this.chatList = returnData.list;
this.clickItem(this.chatList[this.current], this.current);
// this.clickItem(this.chatList[this.current], this.current);
});
},
//
@ -484,11 +488,12 @@ import { serverPaths } from '@/utils/enumData'
},
},
mounted() {
// this.timer = window.setInterval(() => {
// setTimeout(() => {
// this.dataSelect()
// },0)
// },2000)
this.dataSelect()
this.timer = window.setInterval(() => {
setTimeout(() => {
this.dataSelect()
},0)
},4000)
},
destroyed() {
window.clearInterval(this.timer);