shuili_manager/jwtech-pc-page/src/views/indexs.vue

<template>
  <div @mousedown="start"   @mouseup="end">
    <el-input v-model="path" type="text" style="width: 20%" /> &nbsp; &nbsp;
    <el-button @click="join" type="primary">连接</el-button>
    <el-button @click="exit" type="danger">断开</el-button>

    <br />
    <el-button type="info" @click="send">发送消息</el-button>
    <br />
    <br />
    <el-input type="textarea" v-model="text_content" :rows="9" /> 返回内容
    <br />
    <br />
  </div>
</template>

<script>
  import DiffMatchPatch from 'diff-match-patch';
  import store from "../store";

  export default {
    name: "index",
    data(){
      return {
        path: "ws://192.168.1.113:8083/kms-pc-web/websocket/message",
        message: "",
        text_content: "",
        ws: null,
        dmp:new DiffMatchPatch()
      }
    },created() {
      // let div = document.getElementById("getMouseEvent");
      // let fromX;
      // let fromY;
      //
      // let toX;
      // let toY;
      // document.addEventListener('touchstart', function(){
      //
      // });
      // div.onmousedown = function (e) {
      //
      //   e = e || window.event;
      //   // 获取鼠标在元素上的位置（鼠标按下时在元素上得位置）
      //   fromX = e.clientX;
      //   fromY = e.clientY;
      // };
      // console.log("开始坐标",fromX,fromY)
      //
      // // 鼠标抬起事件
      // div.onmouseup = function (e) {
      //   e = e || window.event;
      //   toX = e.clientX;
      //   toY = e.clientY;
      //
      // };
      // console.log("结束坐标",toX,toY)
    },
    methods:{
      start(ev){

        console.log(ev)
      },end(ev){
        console.log(ev)
      },
      // draggableFun(ev){
      //   console.log(ev)
      //   let div = document.getElementById("back");
      //   let dragFlag = false;
      //   let x, y;
      //
      //   div.onmousedown = function (e) {
      //     dragFlag = true;
      //     e = e || window.event;
      //     // 获取鼠标在元素上的位置（鼠标按下时在元素上得位置）
      //     x = e.clientX - div.offsetLeft;
      //     y = e.clientY - div.offsetTop;
      //
      //   };
      //
      //   div.onmousemove = function (e) {
      //     if (dragFlag) {
      //       e = e || window.event;
      //       div.style.left = e.clientX - x + "px";
      //       div.style.top = e.clientY - y + "px";
      //     }
      //   };
      //   // 鼠标抬起事件
      //   div.onmouseup = function (e) {
      //     dragFlag = false;
      //   };
      // },
      join() {
        const wsuri = this.path;
        // if (store.state.token) {  this.$store.state.token
        //   // requestConfig.headers["token"] = `${store.state.token}`;
        //   requestConfig.headers['jianwei'] = 'jwtech ' + `${store.state.token}` ;
        // }
        // const token = 'jwtech '+this.$store.state.token;
        const token = 'pingtai '+this.$store.state.token;
        console.log(token)
        this.ws = new WebSocket(wsuri,[this.$store.state.token]);
        const self = this;
        this.ws.onopen = function (event) {
          //目前没啥用

        };
        //消息返回
        this.ws.onmessage = function (event) {
          debugger

          const oldStr = self.text_content;
          const newStr = event.data;
          //newStr  转note对象
          console.log(oldStr)
          console.log(newStr)

          // 3段  标题 /标签  正文
          if(self.text_content  && event.data){
            const dmp = new DiffMatchPatch();
            const diff = dmp.diff_main(oldStr,newStr);
            const  rr = [];
            console.log( diff ,'12312371289371298731298732189739182')
            diff.forEach(item=>{
              rr.push(item[1])
            })
            console.log(rr.toString())
            self.text_content = rr.join("");
          }else{
            self.text_content = event.data;
          }

        };
        this.ws.onclose = function (event) {
          //没啥用
        };
      },

      //退出的时候
      exit() {
        if (this.ws) {
          this.ws.close();
          this.ws = null;
          debugger
        }
      },
      //最终保存 和中间保存
      send() {
        console.log( this.ws )
        if (this.ws) {
          // "消息类型：1开始编辑 2中途保存"
          // this.ws.token = this.$store.state.token;
          let param = {
            type:"1",
            cmsNote:{
              id:"123",
              content:this.text_content
            }
          }
          console.log(JSON.stringify(param));

          this.ws.send(JSON.stringify(param));
          console.log(this.ws.send(JSON.stringify(param)))
        } else {
          alert("未连接到服务器");
        }
      },
    }
  }
</script>

<style scoped>

</style>