|  |  | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import LemonMessageVoice from "./lemon-message-voice"; | 
 |  |  | import EmojiData from "./database/emoji"; | 
 |  |  | import { sendWebsocket, closeWebsocket } from "@/websocket/websocket.js"; | 
 |  |  | import { chitchatapi } from "@/api/noteapi/chitchat"; | 
 |  |  | import { | 
 |  |  |   sendWebsocket, | 
 |  |  |   websocketSend, | 
 |  |  |   closeWebsocket, | 
 |  |  | } from "@/websocket/websocket.js"; | 
 |  |  | // Vue.component(LemonMessageVoice.name, LemonMessageVoice); | 
 |  |  | // 获取时间 | 
 |  |  | const getTime = () => { | 
 |  |  | 
 |  |  | }; | 
 |  |  | export default { | 
 |  |  |   name: "communication", | 
 |  |  |   provide: { | 
 |  |  |     IMUI: "IMUI value", | 
 |  |  |   }, | 
 |  |  |   data() { | 
 |  |  |     return { | 
 |  |  |       theme: "blue", | 
 |  |  | 
 |  |  |     setTimeout(() => { | 
 |  |  |       IMUI.changeContact("contact-1"); | 
 |  |  |     }, 500); | 
 |  |  |  | 
 |  |  |     // 左侧联系人最新消息 | 
 |  |  |     IMUI.setLastContentRender("event", (message) => { | 
 |  |  |       return `[自定义通知内容]`; | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |     let contactList = [ | 
 |  |  |       { ...contactData1 }, | 
 |  |  |       { ...contactData2 }, | 
 |  |  |       { ...contactData3 }, | 
 |  |  |       //...Array(100).fill(contactData1) | 
 |  |  |     ]; | 
 |  |  |  | 
 |  |  |     // 初始联系人 | 
 |  |  |     IMUI.initContacts(contactList); | 
 |  |  |     // 初始化左侧导航 | 
 |  |  |     IMUI.initMenus([ | 
 |  |  |       { | 
 |  |  |         name: "messages", | 
 |  |  | 
 |  |  |         isBottom: true, | 
 |  |  |       }, | 
 |  |  |     ]); | 
 |  |  |  | 
 |  |  |     // 工具栏 | 
 |  |  |     IMUI.initEditorTools([ | 
 |  |  |       { | 
 |  |  |         name: "emoji", | 
 |  |  | 
 |  |  |     // 点击消息触发 | 
 |  |  |     handleMessageClick(e, key, message, instance) { | 
 |  |  |       console.log("点击了消息", e, key, message); | 
 |  |  |  | 
 |  |  |       console.log(key); | 
 |  |  |       if (key == "status") { | 
 |  |  |         instance.updateMessage({ | 
 |  |  |           id: message.id, | 
 |  |  | 
 |  |  |         IMUI.messageViewToBottom(); | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     // 定义新消息 | 
 |  |  |     appendCustomMessage() { | 
 |  |  |       const { IMUI } = this.$refs; | 
 |  |  |       const message = { | 
 |  |  | 
 |  |  |       instance.closeDrawer(); | 
 |  |  |     }, | 
 |  |  |     // 建立连接 | 
 |  |  |     requstWs() { | 
 |  |  |     requstWs(message, next, file) { | 
 |  |  |       console.log("连接"); | 
 |  |  |       // 防止用户多次连续点击发起请求,所以要先关闭上次的ws请求。 | 
 |  |  |       closeWebsocket(); | 
 |  |  |       let formData = new FormData(); | 
 |  |  |  | 
 |  |  |       // if (file) { | 
 |  |  |       //   const reader = new FileReader(); | 
 |  |  |       //   console.log(reader); | 
 |  |  |       //   console.log(file); | 
 |  |  |       //   reader.onload = (file) => { | 
 |  |  |       //     console.log(file); | 
 |  |  |       //     console.log(reader); | 
 |  |  |       //     const imageData = reader.result; | 
 |  |  |       //     //文件字节大小 | 
 |  |  |       //     //  const fileSize = file.loaded; | 
 |  |  |       //     const fileSize = imageData.length; | 
 |  |  |       //     console.log("byteLength : ", fileSize); | 
 |  |  |       //     const chunkSize = 4096; // 设置每个数据块的大小 | 
 |  |  |       //     let offset = 0; | 
 |  |  |  | 
 |  |  |       //     // 分块传输图片数据 | 
 |  |  |       //     while (offset < imageData.length) { | 
 |  |  |       //       const chunk = imageData.slice(offset, offset + chunkSize); | 
 |  |  |       //       const obj = { | 
 |  |  |       //         type: file.type, | 
 |  |  |       //         userId: "1", //接收数据方 | 
 |  |  |       //         fileSize: fileSize, | 
 |  |  |       //         image: chunk, | 
 |  |  |       //       }; | 
 |  |  |       //       console.log(JSON.stringify(obj)); | 
 |  |  |       //       // 发起ws请求 | 
 |  |  |       //       // sendWebsocket( | 
 |  |  |       //       //   "ws://192.168.31.121:8080/chat?userId=2", | 
 |  |  |       //       //   JSON.stringify(obj), | 
 |  |  |       //       //   this.wsMessage, | 
 |  |  |       //       //   this.wsError | 
 |  |  |       //       // ); | 
 |  |  |       //       websocketSend(JSON.stringify(obj)); | 
 |  |  |       //       offset += chunkSize; | 
 |  |  |  | 
 |  |  |       //       console.log("offset : ", offset); | 
 |  |  |       //     } | 
 |  |  |  | 
 |  |  |       //     // 发送完成标记 | 
 |  |  |       //     console.log("message "); | 
 |  |  |       //   }; | 
 |  |  |  | 
 |  |  |       //   return reader.readAsDataURL(file); | 
 |  |  |       // } | 
 |  |  |  | 
 |  |  |       // 跟后端协商,需要什么参数数据给后台 | 
 |  |  |       if (file) { | 
 |  |  |         formData.append("files", file); | 
 |  |  |         console.log(formData.get("files")); | 
 |  |  |         // img.src = window.URL.createObjectURL(temp); | 
 |  |  |         chitchatapi(formData).then((response) => { | 
 |  |  |           console.log(response); | 
 |  |  |         }); | 
 |  |  |  | 
 |  |  |         return console.log(formData); | 
 |  |  |       } | 
 |  |  |  | 
 |  |  |       const obj = { | 
 |  |  |         type: "text", | 
 |  |  |         content: "帝得圣相相曰度", | 
 |  |  |         type: "object", | 
 |  |  |         userId: "1", //接收数据方 | 
 |  |  |         fileSize: "1212", | 
 |  |  |         image: "12", | 
 |  |  |       }; | 
 |  |  |       // 发起ws请求 | 
 |  |  |       sendWebsocket( | 
 |  |  |         "ws://192.168.1.4:8080/chat?userId=2", | 
 |  |  |         "ws://localhost:8089/chat?userId=1", | 
 |  |  |         obj, | 
 |  |  |         this.wsMessage, | 
 |  |  |         this.wsError | 
 |  |  | 
 |  |  |       console.log(message); | 
 |  |  |       console.log(file); | 
 |  |  |       console.log(next); | 
 |  |  |       this.requstWs(); | 
 |  |  |       this.requstWs(message, next, file); | 
 |  |  |       setTimeout(() => { | 
 |  |  |         next(); | 
 |  |  |       }, 1000); | 
 |  |  |     }, | 
 |  |  |     // 获取联系人信息或滚动到顶部触发 | 
 |  |  |     handlePullMessages(contact, next, instance) { | 
 |  |  |       console.log(contact, "获取联系人信息A"); | 
 |  |  |       console.log(instance, "获取联系人信息B"); | 
 |  |  |       console.log(next, "获取联系人信息C"); | 
 |  |  |  | 
 |  |  |       const otheruser = { | 
 |  |  |         id: contact.id, | 
 |  |  |         displayName: contact.displayName, |