11

heimawl

2023-07-04 a8799531bd3918b2416b95914b02101ce1337ddb

11

 src/views/shortmessage/communication/index.vue

@@ -65,7 +65,11 @@
<script>
import LemonMessageVoice from "./lemon-message-voice";
import EmojiData from "./database/emoji";
import { sendWebsocket, closeWebsocket } from "@/websocket/websocket.js";
import {
  sendWebsocket,
  websocketSend,
  closeWebsocket,
} from "@/websocket/websocket.js";
// Vue.component(LemonMessageVoice.name, LemonMessageVoice);
// 获取时间
const getTime = () => {
@@ -581,19 +585,66 @@
      instance.closeDrawer();
    },
    // 建立连接
    requstWs() {
    requstWs(message, next, file) {
      console.log("连接");
      // 防止用户多次连续点击发起请求，所以要先关闭上次的ws请求。
      closeWebsocket();
      // closeWebsocket();

      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);
      }

      // 跟后端协商，需要什么参数数据给后台
      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://192.168.31.121:8080/chat?userId=2",
        obj,
        this.wsMessage,
        this.wsError
@@ -628,7 +679,7 @@
      console.log(message);
      console.log(file);
      console.log(next);
      this.requstWs();
      this.requstWs(message, next, file);
      setTimeout(() => {
        next();
      }, 1000);

 src/websocket/websocket.js

@@ -16,13 +16,13 @@
 * 发起websocket连接
 * @param {Object} agentData 需要向后台传递的参数数据
 */
function websocketSend (agentData) {
export function websocketSend (agentData) {
  // 加延迟是为了尽量让ws连接状态变为OPEN   
  setTimeout(() => { 
    // 添加状态判断，当为OPEN时，发送消息
    if (websock.readyState === websock.OPEN) { // websock.OPEN = 1 
      // 发给后端的数据需要字符串化
      websock.send(JSON.stringify(agentData))
      websock.send(agentData)
      console.log('连接成功');
    }
    if (websock.readyState === websock.CLOSED) { // websock.CLOSED = 3 

 vue.config.js

@@ -35,8 +35,8 @@
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target1: `http://192.168.1.4:8080`,
        target: `http://192.168.1.4:8080`,
        target1: `http://192.168.31.121:8080`,
        target: `http://192.168.31.121:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''