Mediation-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 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`).then(res => {
                this.config = res.data;
                // this.config.callbackUrl = this.config.callbackUrl + `/${this.userId}`;
                console.log(res.data,"OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO");
                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)
        },
    },
    mounted() {
        let id = this.$route.query.id;
        this.flag = this.$route.query.flag;
        this.getConfig(id);
        this.initWebSocket();
    },
    watch: {

    }
};
</script>
<style lang="scss" scoped></style>