Skip to content

T
tokcos-socket-web-ts-user
提交 749e555b 作者: Hao
操作

add

父级 e861a5d9
正在显示 包含 118 行增加 和 116 行删除
src/App.vue
<template>
<div>
<header>
<div class="operation">
<el-button @click="changeLang('zhcn')" class="mr10">中文</el-button>
<el-button @click="changeLang('en')" class="mr10">英文</el-button>
<el-button @click="changeLang('ko')" class="mr10">韩文</el-button>
<el-button @click="changeLang('ja')" class="mr10">日文</el-button>
</div>
</header>
<router-view />
</div>
</template>
<script setup lang="ts">
const changeLang = (value:any)=> {
localStorage.setItem('lang', value)
location.reload();
}
const changeLang = (value: any) => {
localStorage.setItem('lang', value)
location.reload()
}
</script>
<style lang="scss">
* {
......
src/axios/index.ts
// axios.js
import axios from "axios";
const instance = axios.create({
baseURL: "http://192.168.31.228:8080", // 设置基础 URL
baseURL: "http://192.168.31.123:8080", // 设置基础 URL
// baseURL:'/api',
timeout: 1000, // 设置请求超时时间
});
......
src/axios/model/user.ts
......@@ -27,7 +27,7 @@ const Kjiehuifu = (query: any) => {
//获取用户列表
const getUserList = (query: any) => {
return http({
url: "/getUserList",
url: "/kf/chat/getChatList",
method: "get",
data: query,
});
......@@ -35,9 +35,9 @@ const getUserList = (query: any) => {
//查看未读消息
const checkMesssages = (query: any) => {
return http({
url: "/checkMesssages",
url: "/kf/chat/getChatHisList",
method: "get",
data: query,
params: query,
});
};
//上传接口
......
src/components/IndexComponent.vue
......@@ -16,12 +16,14 @@
import { ref, watch, defineEmits, defineExpose, defineProps } from 'vue'
const list = ref([])
import * as emoji from 'emoji.json'
console.log(emoji,'emoji')
const getList = () => {
list.value = emoji.slice(0, 50)
list.value.push(emoji[55])
list.value.push(emoji[56])
list.value.push(emoji[57])
list.value.push(emoji[60])
let info = emoji.default
list.value = info.slice(0, 50)
list.value.push(info[55])
list.value.push(info[56])
list.value.push(info[57])
list.value.push(info[60])
}
const emits = defineEmits(['emotion'])
const clickHandler = (i: number | string) => {
......
src/utils/websocket.ts
......@@ -48,7 +48,6 @@ function initWebSocket(wsUrl: string) {
// 定义重连函数
const reConnect = (wsUrl: string) => {
console.log("尝试重新连接");
if (useUserStore().isConnected) return; // 如果已经连上就不在重连了
rec && clearTimeout(rec);
rec = setTimeout(function () {
......@@ -59,12 +58,12 @@ const reConnect = (wsUrl: string) => {
// 创建连接
function websocketOpen() {
console.log("连接成功");
useUserStore().connect();
}
// 数据接收
function websocketonmessage(e: MessageEvent<any>) {
const res = JSON.parse(e.data); // 解析JSON格式的数据
console.log(res, "接受到的数据");
// 下面的判断则是后台返回的接收到的数据 如何处理自己决定
if (res.command == 11) {
//将数据放在store中
......@@ -124,5 +123,4 @@ const closeWebSocket = () => {
}
};
export { initWebSocket, sendWebSocket, creatWebSocket, closeWebSocket };
src/views/HomeView.vue
......@@ -3,18 +3,18 @@
<el-container>
<el-container class="el-container-center" v-if="customerInfo.username">
<el-header class="el-header-center">
<p class="name">{{ customerInfo.username }}</p>
<p class="url">US｜https://www.ibeautytop.com</p>
<p class="onlineCustomer">您正在与 在线客服 对话</p>
</el-header>
<el-main
id="srollId"
ref="srollId"
:style="{
height: '600px',
height: '60vh',
width: '100%',
border: '1px solid #ccc',
}"
>
<div class="title">您好，系统正在为您接入在线客服</div>
<div
class="message-container"
v-for="(message, index) in messages"
......@@ -67,20 +67,36 @@
</div>
</el-main>
<el-footer class="el-footer">
<div class="static-box">
<div
v-for="(item, index) in staticList"
:key="index"
class="staticList"
>
<div>{{ item }}</div>
</div>
</div>
<AutomaticPrompt
@keydown.enter="handleButtonClick"
@updateState="getState"
ref="automaticPromptRef"
></AutomaticPrompt>
<el-button
type="primary"
plain
class="btn-send"
style="width: 50px;"
@click.stop="handleButtonClick"
>
发送
</el-button>
<div class="btn-send">
<el-button
plain
style="width: 50px; background: #f8f8fa; color: #000;"
@click.stop="handleButtonClick"
>
Finish
</el-button>
<el-button
style="width: 50px; color: #fff; background: #000;"
plain
@click.stop="handleButtonClick"
>
send
</el-button>
</div>
</el-footer>
</el-container>
<el-container class="el-container-center" v-else></el-container>
......@@ -90,95 +106,41 @@
<script lang="ts" setup>
import '../assets/font/iconfont.css'
import { ElMessage } from 'element-plus'
import {
ref,
onMounted,
watch,
nextTick,
reactive,
getCurrentInstance,
} from 'vue'
import { ref, onMounted, watch, nextTick, getCurrentInstance } from 'vue'
import { getShortDate } from '../utils/index'
import { useUserStore } from '../store/modules/user'
import AutomaticPrompt from '../components/AutomaticPrompt.vue'
import ImageViewer from '@luohc92/vue3-image-viewer'
import { sendWebSocket } from '../utils/websocket'
import type { FormInstance } from 'element-plus'
import { initWebSocket } from '../utils/websocket'
import '@luohc92/vue3-image-viewer/dist/style.css'
import { v4 as uuidv4 } from 'uuid'
import { getUserList, InquiryAdd, checkMesssages } from '../axios/model/user'
const ruleForm = ref({
count: 1,
})
const { appContext } = getCurrentInstance()
const ruleFormRef = ref<FormInstance>()
import { checkMesssages } from '../axios/model/user'
const customerInfo = ref({})
const messages = ref([])
const count = ref(0)
const staticList = ref([
'Login account',
'Forgot password',
'Free entry',
'Add/manage products',
'improve',
])
const store = useUserStore()
const automaticPromptRef = ref('')
const rules = reactive({
customerName: [
{
required: true,
message: '请输入客户名称',
trigger: 'blur',
},
],
countriesRegions: [
{
required: true,
message: '请输入国家/地区',
trigger: 'blur',
},
],
Email: [
{
required: true,
message: '请输入Email',
trigger: 'blur',
},
],
WatchApp: [
{
required: true,
message: '请输入WatchApp',
trigger: 'blur',
},
],
remark: [
{
required: true,
message: '请输入描述',
trigger: 'blur',
},
],
content: [
{
required: true,
message: '请输入描述',
trigger: 'blur',
},
],
})
let msg = ''
//进入页面直接发送请求从后端获取热点数据
onMounted(async () => {
connectMsg().then((res) => {
// const translate = appContext.config.globalProperties.$translate
getHistoryMessage()
setMessage()
getHistoryMessage()
setMessage()
})
})
const connectMsg = () => {
return new Promise((resolve, reject) => {
return new Promise((resolve: any, reject: any) => {
const useUser = useUserStore()
useUser.setUserInfo({
username: Date.now(),
})
const toIp = `ws://192.168.31.228:8081?type=yk&code=${useUser.userInfo.username}&kf=${store.customerInfo.username}`
console.log(toIp)
const toIp = `ws://192.168.31.123:8081?type=yk&code=${useUser.userInfo.username}&kf=${store.customerInfo.username}`
useUser.connect()
initWebSocket(toIp)
setTimeout(() => {
......@@ -195,8 +157,9 @@ const getHistoryMessage = () => {
group_id: '',
userId: store.userInfo.username,
}
console.log(data)
sendWebSocket(data)
getCheckMesssages(data)
// getCheckMesssages(data)
}
//设置message
......@@ -248,7 +211,6 @@ const handleButtonClick = () => {
to: customerInfo.value.username,
form: store.userInfo.username,
}
console.log('打印用户发送的内容', data)
messages.value?.push(data)
sendWebSocket(data)
automaticPromptRef.value.setState('')
......@@ -301,6 +263,32 @@ const getMessageClass = (isSent: boolean) => {
}
</script>
<style lang="scss" scoped>
.title {
display: flex;
padding: 8px;
justify-content: center;
align-items: center;
border-radius: 4px;
width: 196px;
background: #f8f8fa;
font-size: 12px;
font-family: 'PingFang SC';
font-weight: 400;
margin: 0px auto;
color: #798494;
}
.onlineCustomer {
height: 44px;
padding: 8px;
line-height: 44px;
align-items: center;
gap: 8px;
background: rgba(248, 248, 250, 1);
font-family: 'PingFang SC';
font-size: 14px;
font-style: normal;
font-weight: 600;
}
.el-header-left {
height: 76px;
width: 100%;
......@@ -322,13 +310,13 @@ const getMessageClass = (isSent: boolean) => {
}
}
.el-container-center {
background: #e6e8ed;
background: #fff;
}
.el-header {
padding: 0px;
}
.el-header-center {
height: 76px;
width: 100%;
border: 1px solid #e6e8ed;
padding: 16px 24px;
display: flex;
justify-content: space-between;
flex-direction: column;
......@@ -367,14 +355,35 @@ const getMessageClass = (isSent: boolean) => {
width: 100%;
border: 1px solid #ccc;
border-top: 0px;
padding: 10px;
height: calc(100vh - 600px - 76px);
padding: 0px;
height: calc(100vh - 60vh - 60px);
position: relative;
.btn-send {
position: absolute;
bottom: 20px;
right: 20px;
}
.static-box {
display: flex;
background: #e6e8ed;
padding: 8px 16px;
}
.staticList {
height: 36px;
border: 1px solid #e6e8ed;
border-radius: 36px;
background: #fff;
width: max-width;
color: #000000;
padding: 0px 16px;
font-family: 'Inter';
font-size: 14px;
font-weight: 600;
line-height: 36px;
text-align: center;
margin-right: 8px;
}
}
.el-menu-item {
line-height: initial;
......@@ -452,7 +461,7 @@ const getMessageClass = (isSent: boolean) => {
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
max-width: 120px;
max-width: 80px;
font-size: 16px;
color: rgba(0, 0, 0, 0.65);
margin-right: 10px;
......@@ -463,10 +472,9 @@ const getMessageClass = (isSent: boolean) => {
}
.user-reply {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-break: break-all;
text-overflow: ellipsis;
max-width: 80px;
overflow: hidden;
color: #798494;
font-feature-settings: 'clig' off, 'liga' off;
......@@ -638,6 +646,8 @@ const getMessageClass = (isSent: boolean) => {
color: #000;
font-size: 14px;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
.img-wraper img {
max-width: 100%;
height: auto;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论