Skip to content

T
tokcos-socket-web-ts
提交 1710f157 作者: Hao
操作

add

父级 2a956ba1
正在显示 包含 646 行增加 和 87 行删除
components.d.ts
......@@ -16,8 +16,9 @@ declare module 'vue' {
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
......
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -12,11 +12,18 @@
"@luohc92/vue3-image-viewer": "^1.0.0",
"axios": "^1.6.7",
"core-js": "^3.8.3",
"cos-wx-sdk-v5": "^1.6.0",
"element-plus": "^2.6.1",
"emoji.json": "^15.1.0",
"mockjs": "^1.1.0",
"moment": "^2.30.1",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.1",
"socket.io-client": "^4.7.4",
"unplugin-auto-import": "0.16.1",
"unplugin-vue-components": "^0.25.2",
"vue": "^3.2.13",
"vue-native-websocket": "^2.0.15",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
},
......
src/assets/css/reset.css
......@@ -128,3 +128,6 @@ table {
border-collapse: collapse;
border-spacing: 0;
}
::-webkit-scrollbar {
display: none;
}
\ No newline at end of file
src/axios/index.ts
// axios.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置基础 URL
baseURL: '/api', // 设置基础 URL
timeout: 1000, // 设置请求超时时间
});
......@@ -15,7 +15,6 @@ instance.interceptors.request.use(
return config;
},
(error:any) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
......
src/axios/model/user.ts 0 → 100644
import http from "../index";
const Login = (query: any) => {
return http({
url: `/login`,
method: "get",
data: query,
});
};
export { Login };
src/components/AutomaticPrompt.vue
......@@ -2,89 +2,118 @@
<div>
<div class="chat-textarea">
<div class="chat-bar">
<emotion
v-if="showEmotion"
style="position: absolute; top: calc(100% - 465px); background: #fff;"
:height="200"
@emotion="handleEmotion"
/>
<el-icon
style="
cursor: pointer;
margin-left: 20px;
color: #333;
"
<div>
<img
src="../assets/emojiSmiles-v1-light.png"
class="icon emoji"
@click.stop="showEmotion = true"
>
<i class="iconfonts icon-xiaolian" style=" font-size: 20px;" alt="表情" />
</el-icon>
<el-icon
style="
font-size: 20px;
cursor: pointer;
margin-left: 20px;
color: #333;
"
/>
<img
src="../assets/icon_image_s1_01.png"
@click="upfile"
>
<Picture />
</el-icon>
<el-icon
style="
font-size: 20px;
cursor: pointer;
margin-left: 20px;
color: #333;
"
@click="showWord"
>
<InfoFilled />
</el-icon>
class="icon emoji"
alt=""
/>
<img
src="../assets/icon_folder_s1_01.png"
@click="upfile"
class="icon emoji"
alt=""
/>
</div>
<div class="chat-bar-right">
<img
src="../assets/icon_folder_s1_01.png"
@click="upfile"
class="icon emoji"
alt=""
/>
快捷回复
</div>
<el-autocomplete
</div>
<!-- <el-autocomplete
class="autocomplete"
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="请输入问题"
type="textarg"
@select="handleSelect"
ref="automaticPromptRef"
/> -->
<el-input
v-model="state"
ref="automaticPromptRef"
class="el-autocomplete"
placeholder="请输入问题"
type="textarea"
resize="none"
@change="handleSelect"
/>
</div>
<emotion
v-if="showEmotion"
style="position: absolute; top: calc(100% - 465px); background: #fff;"
:height="200"
@emotion="handleEmotion"
/>
<input
ref="file"
style="display: none;"
accept="image/bmp,image/jpeg,image/jpg,image/png"
type="file"
@change="fileChange"
/>
</div>
</template>
<script lang="ts" setup>
import Emotion from './IndexComponent.vue'
import { ElLoading } from 'element-plus'
import { ref, watch, defineEmits, defineExpose } from 'vue'
import axios from 'axios'
const state = ref('')
const file = ref(null)
interface LinkItem {
value: string
link: string
}
const showEmotion = ref<boolean>(false)
const automaticPromptRef = ref(null)
const links = ref<LinkItem[]>([])
const handleEmotion = () => {
console.log(1)
const handleEmotion = (i) => {
state.value += i
showEmotion.value = false
automaticPromptRef.value.focus()
}
const upfile = () => {
console.log(2)
file.value.click()
}
const fileChange = () => {
var e = window.event || event
var oFile = e.target.files[0]
console.log(oFile)
const loading = ElLoading.service({
lock: true,
text: '上传中...',
spinner: 'el-icon-loading',
})
loading.close()
}
const showWord = () => {
console.log(3)
}
const loadFromBackend = async (value: string) => {
try {
//输入时候请求后端根据输入值得到提示。 后端返回集合，集合里面对象属性为value和link都是string类型
const response = await axios.get(
`http://localhost:8080/getAutoMsg/${value}`,
)
links.value = response.data
} catch (error) {
console.error(error)
}
}
// const loadFromBackend = async (value: string) => {
// try {
// //输入时候请求后端根据输入值得到提示。 后端返回集合，集合里面对象属性为value和link都是string类型
// const response = await axios.get(
// `http://localhost:8080/getAutoMsg/${value}`,
// )
// links.value = response.data
// } catch (error) {
// console.error(error)
// }
// }
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
const results = queryString
......@@ -104,14 +133,8 @@ const handleSelect = (value: string) => {
}
const emit = defineEmits(['updateState'])
watch(state, async (newValue) => {
emit('updateState', newValue)
if (newValue) {
await loadFromBackend(newValue)
} else {
links.value = []
}
})
defineExpose({
......@@ -123,21 +146,42 @@ defineExpose({
},
})
</script>
<style lang="scss">
<style lang="scss" scoped>
.icon {
width: 24px;
height: 24px;
margin-right: 32px;
}
.chat-bar {
padding: 10px;
display: flex;
align-items: center;
margin-bottom: 8px;
justify-content: space-between;
}
.el-autocomplete {
width: 100%;
height: 100%;
.el-input {
width: 100%;
}
.el-input__wrapper {
:deep(.el-textarea__inner ){
width: 100%;
height: 200px;
align-items: start;
box-shadow: none;
padding: 0px;
background: transparent;
}
}
.chat-bar-right {
font-family: 'PingFang SC';
font-size: 14px;
font-style: normal;
font-weight: 400;
color: #384860;
display: flex;
align-items: center;
.icon {
margin-right: 8px;
}
}
</style>
src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import store from "./store/index";
import "./assets/css/reset.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
const app = createApp(App)
import { initWebSocket } from "../src/utils/websocket";
import { useUserStore } from "./store/modules/user";
import 'element-plus/dist/index.css'
import "../src/mocks/mock";
const app = createApp(App);
app.use(store).use(router).mount("#app");
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}
const connectMsg = () => {
const useUser = useUserStore();
const toIp = `ws://192.168.31.228:8888?username=admin&password=123`;
console.log(useUser.isConnected, "store");
useUser.connect();
initWebSocket(toIp);
};
connectMsg();
src/minxins/UploadMixin.js 0 → 100644
const COS = require('cos-wx-sdk-v5');
const uploadMixin = {
data() {
return {
uploadMixinPath: '',
uploadMixinType: '',
uploadMixinCredentials: {},
uploadMixinTimeStamp: 0
};
},
methods: {
upLoadFilesHander(tempFilePaths, tempFiles, zip){
return new Promise((resolve)=>{
if (tempFiles.length != 0) {
if(typeof this.upLoadHander !== 'function') return;
let uploadObj = {};
let uploadNum = tempFiles.length;
uploadObj.length = tempFiles.length;
//处理上传结果函数
function loadHandler({ success, message },i){
uploadNum = uploadNum - 1;
uploadObj[i] = message;
if (!success) {
uploadObj[i] = '';
wx.showToast({
title: `[${i+1}]上传失败，请重新上传！`,
icon: 'none',
duration: 2000
});
}
if (uploadNum == 0) {
const arr = Array.from(uploadObj);
// ;
resolve({success: true, result: arr})
}
}
//进行上传
tempFiles.forEach((file, i) => {
this.upLoadHander({
path: tempFilePaths[i],
file: file.path,
zip: zip || '',
onSuccess: ({ success, message }) => {
loadHandler({ success, message },i)
},
onError: (res) => {
loadHandler({ success: false, message:''}, i)
}
});
});
}else{
resolve({success: true,result: []})
}
});
},
upLoadHander(obj) {
const { path, file, biz} = obj;
const pathArr = (path || '').split('/');
const pathStr = pathArr[pathArr.length -1];
const fileName = (pathStr || '').split('.');
let fileInfo = {
fileTyle: fileName.length > 1 ? fileName[fileName.length - 1] : '',
fileName: fileName[0],
biz: biz || 'temp',
file: file
};
const that = this;
const none = (async function hander(noCredentials) {
let res = {},
staticDomain = '',
resResult = true;
//noCredentials变量控制是否走对象存储
if (noCredentials) {
console.log(that.$https,'https')
res = await that.$https.request({
url: that.$interfaces.getUploadConfigInfo,
method: "get",
});
if (res.code === 200 && res.result) {
that.uploadMixinPath = res.result.upLoadPath;
that.uploadMixinType = res.result.uploadType;
staticDomain = res.result.staticDomain || 'https://cdn.tikcos.cn';
if (that.uploadMixinType === 'txcos') {
const ress = res.result.response;
const credentials = ress.credentials;
that.uploadMixinCredentials = {
TmpSecretId: credentials.tmpSecretId,
TmpSecretKey: credentials.tmpSecretKey,
SecurityToken: credentials.sessionToken,
StartTime: ress.startTime,
ExpiredTime: ress.expiredTime
};
}
} else {
resResult = false;
}
}
//resResult判断接口是否正常
if (resResult) {
if (that.uploadMixinType == 'txcos') {
//走对象存储
const cos = new COS({
getAuthorization: (options, callback) => {
callback(that.uploadMixinCredentials);
}
});
const tempFolder = fileInfo.biz === 'temp' ? '' : `${fileInfo.biz}/`;
const folder = `${fileInfo.fileName}_${new Date().getTime()}.${fileInfo.fileTyle}`;
cos.postObject(
{
FilePath: fileInfo.file,
Bucket: res.result.bucketName || 'tikcos-1257774783',
Region: res.result.regionid || 'ap-guangzhou',
Key: that.uploadMixinPath + tempFolder + folder,
Body: fileInfo.file,
onProgress: function (progressData) {
obj.onProgress && obj.onProgress(progressData);
}
},
(err, data) => {
if (!err && data.statusCode === 200) {
const imgurl = `${staticDomain}/${that.uploadMixinPath}${tempFolder}${folder}`;
obj.onSuccess({
success: true,
message: imgurl
});
} else {
obj.onError({
success: false,
message: err || '图片上传失败'
});
}
}
);
} else {
//走系统上传
that.$utils.ossUpload(
{
biz: fileInfo.biz,
file: fileInfo.file
},
(uploadRes) => {
// ;
if (uploadRes.success && uploadRes.message) {
//保存绝对路径，不然小程序会有问题
let url = uploadRes.message;
obj.onSuccess({ success: true, message: url });
} else {
obj.onError({
success: false,
message: uploadRes.message || '图片上传失败'
});
}
}
);
}
} else {
obj.onError({
success: false,
message: '服务接口报错'
});
}
})(true);
},
setOssUpload(obj) {
ossUpload(
{
biz: obj.biz,
file: obj.file
},
(uploadRes) => {
if (uploadRes.success && uploadRes.message) {
//保存绝对路径，不然小程序会有问题
let url = uploadRes.message;
const pre = url.startsWith('/') ? '' : '/';
url = axios['imgUrl'] + url;
obj.onSuccess({ success: true, message: url });
} else {
obj.onError({
success: false,
message: uploadRes.message || '图片上传失败'
});
}
}
);
}
}
};
export { uploadMixin };
src/minxins/minxin.js 0 → 100644
// import io from 'socket.io-client';
// import { ref, onMounted, onUnmounted } from 'vue'
// import { ElMessage } from 'element-plus'
// export default function () {
// const message = {};
// const showMessage = {};
// const socket = ref(new WebSocket("ws://192.168.31.228:8888?username=admin&password=123"));
// socket.value.onopen = function (e) {
// console.log(e)
// }
// socket.value.onerror = function(e){
// console.log(e)
// };
// socket.value.onmessage = function (e) {
// console.log(e)
// };
// return {
// message,
// showMessage
// }
// }
\ No newline at end of file
src/mocks/mock.js 0 → 100644
const Mock = require('mockjs')
Mock.mock("/api/login", "get", () => {
return {
code: "200",
success: true,
message: '',
result: {
userName: "admin",
token:'admin'
},
};
});
//询价单
Mock.mock("/api/inquiryAdd", "get", () => {
return {
code: "200",
success: true,
message: '',
result: {
userName: "admin",
token:'admin'
},
};
});
src/store/index.ts
import { createStore } from 'vuex'
export default createStore({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
import { createPinia } from "pinia";
// 创建 Pinia 实例
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
export default pinia;
src/store/modules/user.ts 0 → 100644
import moment from "moment";
import { defineStore } from "pinia";
export const useUserStore = defineStore("user", {
state: () => {
return {
isConnected: false, //连接状态
messages: [],
customerInfo: {},
count: 0,
userInfo: {
userName: "admin",
},
userList: [],
};
},
actions: {
setCount(num: number) {
this.count = num;
},
setCustomerInfo(res: any) {
this.customerInfo = res;
},
setUserInfo(res: any) {
this.userInfo = res;
},
setUserListMessages(res: any) {
const userList: any = this.userList || [];
const obj = {
isSent: false,
msgType: res.msgType,
content: res.content,
cmd: res.cmd,
to: res.to,
id: res.id,
form: res.from,
userImg:
"https://cdn.lirimall.com//lirigo/filetempImage/新鲜水果_1661668973048.png",
time: moment(res.createTime).format("YYYY-DD-MM HH:mm:ss"),
};
const info = {
userId: res.id,
userName: res.from,
messages: [obj],
userImg: obj.userImg,
};
if (
userList.length > 0 &&
userList.some((item: any) => item.userName == res.from)
) {
userList.forEach((item: any) => {
if (item.userName == res.from) item.messages.push(obj);
});
} else {
userList.push(info);
}
this.userList = userList;
},
setUserNameMessage(res: any) {
const friends = res.friends;
for (const key in friends) {
const chatDatas = friends[key];
chatDatas.forEach((item: any) => {
item.userImg =
"https://cdn.lirimall.com//lirigo/filetempImage/新鲜水果_1661668973048.png";
item.time = moment(res.createTime).format("YYYY-DD-MM HH:mm:ss");
});
for (const index in chatDatas) {
const userId = chatDatas[index].from;
this.userList.forEach((item: any) => {
if (item && item?.userName == userId) {
item.messages = chatDatas;
}
});
}
}
},
connect() {
// 连接成功后，将 isConnected 状态设置为 true
this.isConnected = true;
},
disconnect() {
// 断开连接或退出登录时，将 isConnected 状态设置为 false
this.isConnected = false;
},
},
persist: true,
});
src/utils/index.ts 0 → 100644
export function getShortDate(): string {
const now = new Date();
let month: string = (now.getMonth() + 1).toString();
if (month.length < 2) {
month = "0" + month;
}
let day: string = now.getDate().toString();
if (day.length < 2) {
day = "0" + day;
}
let hour: string = now.getHours().toString();
if (hour.length < 2) {
hour = "0" + hour;
}
let minutes: string = now.getMinutes().toString();
if (minutes.length < 2) {
minutes = "0" + minutes;
}
return month + "-" + day + " " + hour + ":" + minutes;
}
src/utils/websocket.ts 0 → 100644
import { ElMessage } from "element-plus";
import { useUserStore } from "../store/modules/user";
let websocket: WebSocket | null = null; // 用于存储实例化后websocket
let rec: any; // 断线重连后，延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码
// 创建websocket
function creatWebSocket(wsUrl: string) {
// 判断当前浏览器是否支持WebSocket
if ("WebSocket" in window) {
console.log("当前浏览器支持 WebSocket");
} else if ("MozWebSocket" in window) {
console.log("当前浏览器支持 MozWebSocket");
} else {
console.log("当前浏览器不支持 WebSocket");
}
try {
initWebSocket(wsUrl); // 初始化websocket连接
} catch (e) {
console.log("尝试创建连接失败");
reConnect(wsUrl); // 如果无法连接上 webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
}
}
// 初始化websocket
function initWebSocket(wsUrl: string) {
if (!websocket) websocket = new WebSocket(wsUrl);
websocket.onopen = function () {
websocketOpen();
};
// // 接收
websocket.onmessage = function (e: MessageEvent<any>) {
websocketonmessage(e);
};
// 连接发生错误
websocket.onerror = function () {
console.log("WebSocket连接发生错误");
// isConnect = false; // 连接断开修改标识
reConnect(wsUrl); // 连接错误 需要重连
};
websocket.onclose = function (e) {
websocketclose(e);
};
}
// 定义重连函数
const reConnect = (wsUrl: string) => {
console.log("尝试重新连接");
if (useUserStore().isConnected) return; // 如果已经连上就不在重连了
rec && clearTimeout(rec);
rec = setTimeout(function () {
// 延迟5秒重连 避免过多次过频繁请求重连
creatWebSocket(wsUrl);
}, 5000);
};
// 创建连接
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中
useUserStore().setUserListMessages(res.data);
} else if (res.command == 20) {
useUserStore().setUserNameMessage(res.data);
}
}
// 关闭
function websocketclose(e: any) {
useUserStore().disconnect(); // 修改连接状态
}
// 数据发送
function websocketsend(res: any) {
console.log(websocket, "websocket");
if (websocket && useUserStore().isConnected) {
// 检查连接状态
console.log("发送的数据", websocket);
websocket.send(JSON.stringify(res));
} else {
ElMessage({
showClose: true,
message: "请选择设备连接",
type: "error",
});
}
}
// 实际调用的方法==============
// 发送
function sendWebSocket(data: any) {
// 如果未保持连接状态 不允许直接发送消息 提示请选择连接设备
if (!useUserStore().isConnected) {
ElMessage({
showClose: true,
message: "请选择设备连接",
type: "error",
});
} else {
websocketsend(data);
console.log("------------------");
}
}
// 关闭
const closeWebSocket = () => {
if (websocket) {
websocket.close();
ElMessage({
showClose: true,
message: "设备已关闭",
type: "success",
});
}
};
// function initWebSocket(){
// const store = useUserStore()
// console.log(store.isConnected,'打印22')
// }
// export { initWebSocket, };
export { initWebSocket, sendWebSocket, creatWebSocket, closeWebSocket };
src/views/loginView.vue
......@@ -44,12 +44,15 @@
<script lang="ts">
import { LoginData } from '../type/Login'
import { reactive, ref } from 'vue'
import { useUserStore } from '../store/modules/user'
import type { FormInstance } from 'element-plus'
import { useRouter } from 'vue-router'
import { Login } from '../axios/model/user'
export default {
setup() {
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive(new LoginData())
const store = useUserStore()
const router = useRouter()
const rules = reactive({
userName: [
......@@ -75,20 +78,24 @@ export default {
formEl.resetFields()
}
//登录
const submitForm = (formEl: FormInstance | undefined) => {
console.log(formEl, 'formEl')
let query = {}
if (!formEl) return
formEl.validate((valid: boolean) => {
console.log(valid)
if (valid) {
console.log('submit!')
Login(query).then(({ success, message,result }: any) => {
if (success) {
router.push('/')
store.setUserInfo(result)
}
})
} else {
console.log('error submit!')
return false
}
})
}
return { ruleForm, ruleFormRef, rules, resetForm, submitForm }
},
}
......
tsconfig.json
......@@ -33,7 +33,7 @@
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
, "src/minxins/minxin.js" ],
"exclude": [
"node_modules"
]
......
vue.config.js
......@@ -13,5 +13,5 @@ module.exports = defineConfig({
resolvers: [ElementPlusResolver()],
}),
],
}
},
})
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论