1. 新增webSocket相关功能

riku

2024-07-19 9aeade98bdd0913128f57db1a98bbe1eafa7f08a

1. 新增webSocket相关功能

 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 }

 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: ')
  }
  // 收到服务器发送的消息：event处理服务器返回的数据
  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>