From 9aeade98bdd0913128f57db1a98bbe1eafa7f08a Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 19 七月 2024 17:41:36 +0800
Subject: [PATCH] 1. 新增webSocket相关功能
---
src/api/index.js | 21 +++++-----
src/views/inspection/WorkStream.vue | 60 ++++++++++++++++++++++++++++--
2 files changed, 67 insertions(+), 14 deletions(-)
diff --git a/src/api/index.js b/src/api/index.js
index 69a55fe..fea72e0 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -3,20 +3,21 @@
const debug = true
-let ip1 = 'http://47.100.191.150:9005/'
+var IP = '47.100.191.150'
+var PORT = '9005'
+if (debug) {
+ IP = '192.168.0.138'
+ PORT = '8082'
+}
+
+let ws = `${IP}:${PORT}`
+let ip1 = `http://${IP}:${PORT}/`
+
let ip1_file = 'http://47.100.191.150:9005/'
// let ip1 = 'https://fyami.com.cn:447/';
// let ip1_file = 'https://fyami.com.cn:447/';
let ip2 = 'https://fyami.com.cn/'
let ip2_file = 'https://fyami.com.cn/'
-
-if (debug) {
- ip1 = 'http://192.168.0.138:8082/'
- // ip1 = 'http://localhost:8080/'
- // ip1_file = 'http://47.100.191.150:9005/';
- // ip2 = 'http://192.168.0.138:8080/';
- // ip2_file = 'https://fyami.com.cn/';
-}
//椋炵窘鐩戠
const $fysp = axios.create({
@@ -97,4 +98,4 @@
)
})
-export { $fysp, $fytz }
+export { $fysp, $fytz, ws }
diff --git a/src/views/inspection/WorkStream.vue b/src/views/inspection/WorkStream.vue
index fb2ecdb..0800f34 100644
--- a/src/views/inspection/WorkStream.vue
+++ b/src/views/inspection/WorkStream.vue
@@ -1,14 +1,19 @@
<template>
<!-- <div class="border-r-small m-h-2 p-h-4"> -->
<BaseCard>
+ <div>
+ <input type="text" v-model="inputVal" />
+ <button @click="handleSend">send</button>
+ <button @click="handleLink">link</button>
+ </div>
<el-scrollbar ref="scrollbarRef" :height="height">
<div ref="scrollContentRef">
<div v-for="item in streams" :key="item.index">
<el-text type="primary">[{{ item.time }}]: </el-text>
<el-text>鐢ㄦ埛</el-text>
- <el-text type="warning">{{ item.user }}</el-text>
- <el-text>鍦�</el-text>
- <el-text type="success">{{ item.obj }}</el-text>
+ <el-text type="warning">{{ item.userName }}</el-text>
+ <!-- <el-text>鍦�</el-text>
+ <el-text type="success">{{ item.obj }}</el-text> -->
<el-text>{{ item.event }}</el-text>
</div>
</div>
@@ -17,10 +22,11 @@
<!-- </div> -->
</template>
<script setup>
-import { reactive, ref, onMounted, inject } from 'vue'
+import { reactive, ref, onMounted, onUnmounted, inject } from 'vue'
import dayjs from 'dayjs'
import { unCalc } from '@/utils/css-util'
+import { ws } from '@/api/index'
const excludeMapHeight = inject('excludeMapHeight')
const height = `calc(${unCalc(excludeMapHeight)} - 36px)`
@@ -59,6 +65,49 @@
}, 100)
}
+const inputVal = ref('')
+
+const handleSend = () => {
+ if (socket) {
+ socket.send(inputVal.value)
+ }
+}
+
+let socket
+const handleLink = () => {
+ if (socket) {
+ socket.close()
+ }
+ socket = new WebSocket(`ws://192.168.0.138:8082/workstream`)
+ // 涓庢湇鍔″櫒寤虹珛杩炴帴锛氬彂閫佹秷鎭埌鏈嶅姟鍣�
+ socket.onopen = () => {
+ console.log('connect: ')
+ }
+ // 鏀跺埌鏈嶅姟鍣ㄥ彂閫佺殑娑堟伅锛歟vent澶勭悊鏈嶅姟鍣ㄨ繑鍥炵殑鏁版嵁
+ socket.onmessage = (event) => {
+ console.log('receive: ', event.data)
+ putWorkStream(event.data)
+ }
+ // 杩炴帴鎴栭�氫俊杩囩▼涓彂鐢熼敊璇�
+ socket.onerror = (event) => {
+ console.log('errror: ', event.error)
+ }
+ // 涓庢湇鍔″櫒鏂紑杩炴帴
+ socket.onclose = (event) => {
+ console.log('close: ', event.code)
+ }
+}
+
+/**
+ * 娣诲姞涓�鏉″伐浣滄祦淇℃伅
+ * @param {*} data
+ */
+function putWorkStream(data) {
+ const obj = JSON.parse(data)
+ streams.push(obj)
+ scrollToBottom()
+}
+
onMounted(() => {
// setInterval(() => {
// streams.push({
@@ -70,4 +119,7 @@
// scrollToBottom()
// }, 10000)
})
+onUnmounted(() => {
+ socket.close()
+})
</script>
--
Gitblit v1.9.3