Arbitrate-Frontend/src/views/onlyoffice/onlyoffice.vue

<template>
  <div style="width: 100%; height: 100%">
    <div id="placeholder"></div>
  </div>
</template>

<script>
import { getOnlyoffice, saveOnlyOfficeFile } from "@/api/onlyoffice/onlyoffice";
import { setToken } from "@/utils/auth";
import store from "@/store";
import axios from "axios";
export default {
  props: [],
  data() {
    return {
      config: {},
      flag: 0,
      userId: store.getters.userId,
      websock: null,
    };
  },
  destroyed() {
    //页面销毁时关闭ws连接
    if (this.websock) {
      this.websock.close(); // 关闭websocket
    }
  },
  methods: {
    getConfig(id) {
      let edit = "edit";
      if (this.flag == 0) {
        edit = "view";
      } else {
        edit = "edit";
      }
      axios
        .get(
          `http://121.40.189.20:9090/onlyOfficeConfig/${edit}/${id}/${this.userId}/desktop/true/zhongcai`
        )
        .then((res) => {
          this.config = res.data;
          this.config.editorConfig.callbackUrl = this.config.editorConfig.callbackUrl + "/" + id;
          // this.config.callbackUrl = this.config.callbackUrl + `/${this.userId}`;
          var docEditor = new DocsAPI.DocEditor("placeholder", this.config);
        });
    },
    //初始化weosocket
    initWebSocket() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持WebSocket");
        return false;
      }
      const wsuri = `ws://121.40.189.20:9090/api/websocket/${this.userId}`; // websocket地址
      this.websock = new WebSocket(wsuri);
      this.websock.onopen = this.websocketonopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    //连接成功
    websocketonopen() {
      console.log("WebSocket连接成功");
    },
    //接收后端返回的数据
    websocketonmessage(e) {
      let dataJson = e.data;
      if (dataJson != "conn_success") {
        dataJson = JSON.parse(dataJson);
      }
      if (dataJson.caseId) {
        saveOnlyOfficeFile({
          caseAppliId: Number(dataJson.caseId),
          annexName: dataJson.fileName,
          annexPath: dataJson.filePath,
          onlyOfficeFileId: dataJson.fileId,
        }).then((res) => {
          this.websock.send();
        });
      }
      // 在这里使用后端返回的数据，对数据进行处理渲染
    },
    //连接建立失败重连
    websocketonerror(e) {
      console.log(`连接失败的信息：`, e);
      this.initWebSocket(); // 连接失败后尝试重新连接
    },
    //关闭连接
    websocketclose(e) {
      console.log("断开连接", e);
    },
    /**是否从视频会议跳转，是处理token */
    async getToken() {
      setToken(this.$route.query.token);
    },
  },
  async mounted() {
    if (this.$route.query.token) {
      await this.getToken();
    }
    let id = this.$route.query.id;
    this.flag = this.$route.query.flag;
    this.getConfig(id);
    this.initWebSocket();
  },
  watch: {},
};
</script>
<style lang="scss" scoped></style>