From ff0cce8e16a9fd66e621433d8a1db15cd4ef2837 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sat, 4 Jul 2020 15:20:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0websocket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                          |   1 +
 .env.production                           |   1 +
 .env.staging                              |   1 +
 package.json                              |   1 +
 src/components/ShowFile/ShowFile.vue      |  15 +-
 src/components/preview/SimTextPreview.vue |  54 ++-
 src/layout/index.vue                      |   8 +
 src/websocket/sockJS.js                   |  50 +++
 src/websocket/stomp-index.js              |   6 +
 src/websocket/stomp-node.js               | 108 +++++
 src/websocket/stomp.js                    | 488 ++++++++++++++++++++++
 src/websocket/websocket_config.js         |  11 +
 12 files changed, 727 insertions(+), 17 deletions(-)
 create mode 100644 src/websocket/sockJS.js
 create mode 100644 src/websocket/stomp-index.js
 create mode 100644 src/websocket/stomp-node.js
 create mode 100644 src/websocket/stomp.js
 create mode 100644 src/websocket/websocket_config.js

diff --git a/.env.development b/.env.development
index d7eb731..d4a7081 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,7 @@
 ENV = 'development'
 
 # base api
+VUE_APP_WEBSOCKET = 'http://localhost:8088'
 VUE_APP_BASE_API = '/api'
 VUE_APP_BASE_FILE_API = '/file'
 VUE_APP_BASE_PRIVIEW_API = '/priview'
diff --git a/.env.production b/.env.production
index fe53a1d..d1d8129 100644
--- a/.env.production
+++ b/.env.production
@@ -2,6 +2,7 @@
 ENV = 'production'
 
 # base api
+VUE_APP_WEBSOCKET = 'http://www.jmal.cloud:8088'
 VUE_APP_BASE_API = '/api'
 VUE_APP_BASE_FILE_API = '/file'
 VUE_APP_BASE_PRIVIEW_API = '/priview'
diff --git a/.env.staging b/.env.staging
index 21aecf0..2e027b1 100644
--- a/.env.staging
+++ b/.env.staging
@@ -4,6 +4,7 @@ NODE_ENV = production
 ENV = 'staging'
 
 # base api
+VUE_APP_WEBSOCKET = 'http://localhost:8088'
 VUE_APP_BASE_API = '/api'
 VUE_APP_BASE_FILE_API = '/file'
 VUE_APP_BASE_PRIVIEW_API = '/priview'
diff --git a/package.json b/package.json
index 1750ed4..44af237 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "scriptjs": "^2.5.9",
     "sortablejs": "^1.10.2",
     "spark-md5": "^3.0.0",
+    "stompjs": "^2.3.3",
     "v-contextmenu": "^2.9.0",
     "v-viewer": "^1.5.1",
     "vant": "2.5.0",
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 9d90dcd..5208315 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -447,8 +447,10 @@
   import '@/utils/directives.js'
 
   import 'pl-table/themes/index.css';
-  // import 'pl-table/themes/plTableStyle.css';
   import { PlTable, PlTableColumn } from 'pl-table';
+
+  // import ws from '@/websocket/websocket_config';
+
   var rowStyleExecuting = false
   export default {
     name: 'ShowFile',
@@ -762,6 +764,9 @@
 
       // 画矩形选区
       this.darwRectangle()
+
+      // 监听websocket
+      this.onmessage()
     },
     destroyed() {
       window.removeEventListener('popstate', this.goBack, false);
@@ -799,6 +804,14 @@
       }
     },
     methods: {
+      onmessage(){
+        // if(ws.isConnected){
+        //   // 订阅系统数据
+        //   this.stompClient = ws.stompClient.subscribe('/topic/updateData', (msg) => {
+        //     console.log('/topic/updateData',msg)
+        //   },ws.headers);
+        // }
+      },
       load () {
         this.getFileList(true)
       },
diff --git a/src/components/preview/SimTextPreview.vue b/src/components/preview/SimTextPreview.vue
index 94f7c65..12d379c 100644
--- a/src/components/preview/SimTextPreview.vue
+++ b/src/components/preview/SimTextPreview.vue
@@ -15,7 +15,7 @@
       <div slot="title" class="simtext-header-title">
             <span class="title-name">{{file.name}}</span>
           <div class="title-extension">
-            <el-button v-if="isShowUpdateBtn" @click="update" :class="lightTheme?'':'dark-button'" size="small" :loading="updating">保存所有</el-button>
+            <el-button v-if="isShowUpdateBtn" @click="saveAll" :class="lightTheme?'':'dark-button'" size="small" :loading="updating">保存所有</el-button>
             <!-- <el-button @click="changePreviewMode">{{previewMode?'预览模式':'源码模式'}}</el-button> -->
             <el-button @click="skinning" :class="lightTheme?'':'dark-button'" size="small" :icon="lightTheme?'el-icon-moon':'el-icon-sunny'" circle></el-button>
             <button class="title-extension-button" @click="fullScreen" size="small">
@@ -54,7 +54,7 @@
                 :width="editorWidth"
                 :height="editorHieght"
                 :theme="lightTheme?'vs':'vs-dark'"
-                :language="language"
+                :language="item.language"
                 :diffEditor="diffEditor"
                 original="..."
                 :value="item.content"
@@ -114,7 +114,6 @@
       return{
         lightTheme: true,
         defalutLanguage: 'redis',
-        language: this.defalutLanguage,
         lineWrapping: false,
         options: {
           fontSize: 14,
@@ -184,13 +183,6 @@
           offset: 100,
           message: '<span>&nbsp;&nbsp;正在加载数据...</span>'
         })
-        let languages = monaco.languages.getLanguages();
-        const languagesIndex = languages.findIndex(item => item.extensions && item.extensions.includes('.'+file.suffix))
-        if(languagesIndex > -1){
-          this.language = languages[languagesIndex].id
-        }else{
-          this.language = this.defalutLanguage
-        }
         if(lineWrapping.includes(file.suffix)) {
           this.options.wordWrap = 'wordWrapColumn'
           this.lineWrapping = true
@@ -222,9 +214,12 @@
           this.editableTabs.push({
             title: res.data.name,
             copyTitle: res.data.name,
+            language: this.getEditorLanguage(res.data.suffix),
+            status: undefined,//标签状态
             name: res.data.path.substring(1,res.data.path.length)+res.data.name,
             content: res.data.contentText
           })
+          console.log(this.editableTabs)
           this.editableTabsValue = res.data.path.substring(1,res.data.path.length)+res.data.name
 
           // 界面的渲染后的初始化工作
@@ -243,6 +238,15 @@
       }
     },
     methods:{
+      getEditorLanguage(suffix) {
+        let editorLanguage = this.defalutLanguage
+        let languages = monaco.languages.getLanguages();
+        const languagesIndex = languages.findIndex(item => item.extensions && item.extensions.includes('.' + suffix))
+        if (languagesIndex > -1) {
+          editorLanguage = languages[languagesIndex].id
+        }
+        return editorLanguage;
+      },
       upperLeve(){
         this.$refs.fancTree.upperLeve()
       },
@@ -319,12 +323,19 @@
           this.loading.close()
           if(this.editableTabs.findIndex(tab=> tab.name===row.path) < 0){
             // 添加一个tab
-            let tab = {title: row.name,copyTitle: row.name,name: row.path,content: res.data.contentText}
-            let thisTabIndex = this.editableTabs.findIndex(tab=> tab.name===this.editableTabsValue)
-            if(this.editableTabs[thisTabIndex].title !== this.editableTabs[thisTabIndex].copyTitle){
-              this.editableTabs.push(tab)
-            }else{
+            let tab = {
+              title:row.name,
+              copyTitle:row.name,
+              status: undefined,
+              language: this.getEditorLanguage(row.suffix),
+              name:row.path,
+              content:res.data.contentText
+            }
+            let thisTabIndex = this.editableTabs.findIndex(tab=> tab.status===undefined)
+            if(thisTabIndex > -1){
               this.editableTabs[thisTabIndex] = tab
+            }else{
+              this.editableTabs.push(tab)
             }
           }
           this.editableTabsValue = row.path
@@ -358,6 +369,7 @@
         if(value === this.editableTabs[index].content){
           if(this.editableTabs[index].copyTitle !== this.editableTabs[index].title){
             this.editableTabs[index].title = this.editableTabs[index].copyTitle
+            this.editableTabs[index].status = 'Modified'
             // 没有任何改变
             if(this.editableTabs.findIndex(tab=>tab.title !== tab.copyTitle) < 0){
               this.isShowUpdateBtn = false
@@ -366,10 +378,18 @@
         }else{
           if(this.editableTabs[index].copyTitle === this.editableTabs[index].title){
             this.editableTabs[index].title += '*'
+            this.editableTabs[index].status = 'Modifying'
             this.isShowUpdateBtn = true
           }
         }
       },
+      saveAll(){
+        this.editableTabs.forEach((tab,index) => {
+          if(tab.status === 'Modifying'){
+            this.update(tab.content,tab.name,index)
+          }
+        })
+      },
       save(value,index) {
         if(value !== this.editableTabs[index].content && this.isShowUpdateBtn){
           this.update(value,this.editableTabs[index].name,index)
@@ -379,6 +399,7 @@
         this.updating = true
         markdownApi.editMarkdownByPath({
             relativePath: path,
+            userId: this.$store.state.user.userId,
             username: this.$store.state.user.name,
             contentText: value
           }).then(() => {
@@ -387,6 +408,7 @@
               this.editableTabs[index].content = value
               if(this.editableTabs[index].copyTitle !== this.editableTabs[index].title){
                 this.editableTabs[index].title = this.editableTabs[index].copyTitle
+                this.editableTabs[index].status = 'Modified'
                 // 没有任何改变
                 if(this.editableTabs.findIndex(tab=>tab.title !== tab.copyTitle) < 0){
                   this.isShowUpdateBtn = false
@@ -461,7 +483,7 @@
             }
           });
         }
-        if(!this.editableTabs[index].copyTitle !== this.editableTabs[index].title){
+        if(this.editableTabs[removeIndex].status !== 'Modifying'){
           this.editableTabsValue = activeName;
           this.editableTabs = tabs.filter(tab => tab.name !== targetName);
         }else{
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 827207d..78332cc 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -22,6 +22,9 @@ import { getToken } from '@/utils/auth'
 import AudioPreview from "@/components/preview/AudioPreview";
 import globalUploader from '@/components/SimpleUploader/globalUploader.vue'
 
+import {toConnection} from "@/websocket/sockJS";
+import ws from '@/websocket/websocket_config';
+
 export default {
   name: 'Layout',
   components: {
@@ -65,6 +68,11 @@ export default {
 
     if(getToken()){
       this.isShow = window.pc;
+      //与服务器建立websocket连接
+      console.log(ws)
+      if(!ws.isConnected){
+        toConnection(this.$store.state.user.name,this.$store.state.user.token);
+      }
     }else{
       this.isShow = false
     }
diff --git a/src/websocket/sockJS.js b/src/websocket/sockJS.js
new file mode 100644
index 0000000..139fcf9
--- /dev/null
+++ b/src/websocket/sockJS.js
@@ -0,0 +1,50 @@
+import SockJS from  'sockjs-client';
+import  Stomp from './stomp-index';
+import ws from './websocket_config';
+
+export function toConnection(username,token) {
+  connect(username,token);
+  // 断开重连机制,尝试发送消息,捕获异常发生时重连
+  ws.timer = setInterval(() => {
+    try {
+      if(ws.isConnected){
+        ws.stompClient.send("test");
+      }else{
+        connect(username,token);
+      }
+    } catch (err) {
+      connect(username,token);
+    }
+  }, 10000);
+}
+
+function connect(username,token){
+  //地址+端点路径，构建websocket链接地址,注意，对应config配置里的addEndpoint
+  console.log("ws.url",ws.url,process.env)
+  let socket = new SockJS(ws.url + '/mq' + '?name='+username+'&jmal-token='+token);
+  // 获取STOMP子协议的客户端对象
+  ws.stompClient = Stomp.over(socket);
+  // 定义客户端的认证信息,按需求配置
+  ws.headers = {
+    Authorization:''
+  };
+  // 向服务器发起websocket连接
+  ws.stompClient.connect(ws.headers,() => {
+    ws.isConnected = true;
+    // 订阅系统数据 '/topic/updateData/2/system'
+    // 订阅合并数据 '/topic/updateData/mergeDate/2'
+    // 订阅冷水机1号数据 /topic/updateData/2/1101/1
+  }, (err) => {
+    ws.isConnected = false;
+    // 连接发生错误时的处理函数
+    console.log(err);
+  });
+
+}
+
+export function disconnect() {
+  if (ws.stompClient) {
+    ws.stompClient.disconnect();
+  }
+  clearInterval(ws.timer);
+}
diff --git a/src/websocket/stomp-index.js b/src/websocket/stomp-index.js
new file mode 100644
index 0000000..776a541
--- /dev/null
+++ b/src/websocket/stomp-index.js
@@ -0,0 +1,6 @@
+var Stomp = require('./stomp.js');
+var StompNode = require('./stomp-node.js');
+
+module.exports = Stomp.Stomp;
+module.exports.overTCP = StompNode.overTCP;
+module.exports.overWS = StompNode.overWS;
diff --git a/src/websocket/stomp-node.js b/src/websocket/stomp-node.js
new file mode 100644
index 0000000..68660ee
--- /dev/null
+++ b/src/websocket/stomp-node.js
@@ -0,0 +1,108 @@
+// Generated by CoffeeScript 1.7.1
+
+/*
+   Stomp Over WebSocket http://www.jmesnil.net/stomp-websocket/doc/ | Apache License V2.0
+
+   Copyright (C) 2013 [Jeff Mesnil](http://jmesnil.net/)
+ */
+
+(function() {
+  var Stomp, net, overTCP, overWS, wrapTCP, wrapWS;
+
+  Stomp = require('./stomp');
+
+  net = require('net');
+
+  Stomp.Stomp.setInterval = function(interval, f) {
+    return setInterval(f, interval);
+  };
+
+  Stomp.Stomp.clearInterval = function(id) {
+    return clearInterval(id);
+  };
+
+  wrapTCP = function(port, host) {
+    var socket, ws;
+    socket = null;
+    ws = {
+      url: 'tcp:// ' + host + ':' + port,
+      send: function(d) {
+        return socket.write(d);
+      },
+      close: function() {
+        return socket.end();
+      }
+    };
+    socket = net.connect(port, host, function(e) {
+      return ws.onopen();
+    });
+    socket.on('error', function(e) {
+      return typeof ws.onclose === "function" ? ws.onclose(e) : void 0;
+    });
+    socket.on('close', function(e) {
+      return typeof ws.onclose === "function" ? ws.onclose(e) : void 0;
+    });
+    socket.on('data', function(data) {
+      var event;
+      event = {
+        'data': data.toString()
+      };
+      return ws.onmessage(event);
+    });
+    return ws;
+  };
+
+  wrapWS = function(url) {
+    var WebSocketClient, connection, socket, ws;
+    WebSocketClient = require('websocket').client;
+    connection = null;
+    ws = {
+      url: url,
+      send: function(d) {
+        return connection.sendUTF(d);
+      },
+      close: function() {
+        return connection.close();
+      }
+    };
+    socket = new WebSocketClient();
+    socket.on('connect', function(conn) {
+      connection = conn;
+      ws.onopen();
+      connection.on('error', function(error) {
+        return typeof ws.onclose === "function" ? ws.onclose(error) : void 0;
+      });
+      connection.on('close', function() {
+        return typeof ws.onclose === "function" ? ws.onclose() : void 0;
+      });
+      return connection.on('message', function(message) {
+        var event;
+        if (message.type === 'utf8') {
+          event = {
+            'data': message.utf8Data
+          };
+          return ws.onmessage(event);
+        }
+      });
+    });
+    socket.connect(url);
+    return ws;
+  };
+
+  overTCP = function(host, port) {
+    var socket;
+    socket = wrapTCP(port, host);
+    return Stomp.Stomp.over(socket);
+  };
+
+  overWS = function(url) {
+    var socket;
+    socket = wrapWS(url);
+    return Stomp.Stomp.over(socket);
+  };
+
+  exports.overTCP = overTCP;
+
+  exports.overWS = overWS;
+
+}).call(this);
diff --git a/src/websocket/stomp.js b/src/websocket/stomp.js
new file mode 100644
index 0000000..f70d1f3
--- /dev/null
+++ b/src/websocket/stomp.js
@@ -0,0 +1,488 @@
+// Generated by CoffeeScript 1.7.1
+
+/*
+   Stomp Over WebSocket http://www.jmesnil.net/stomp-websocket/doc/ | Apache License V2.0
+
+   Copyright (C) 2010-2013 [Jeff Mesnil](http://jmesnil.net/)
+   Copyright (C) 2012 [FuseSource, Inc.](http://fusesource.com)
+ */
+
+(function() {
+  var Byte, Client, Frame, Stomp,
+    __hasProp = {}.hasOwnProperty,
+    __slice = [].slice;
+
+  Byte = {
+    LF: '\x0A',
+    NULL: '\x00'
+  };
+
+  Frame = (function() {
+    var unmarshallSingle;
+
+    function Frame(command, headers, body) {
+      this.command = command;
+      this.headers = headers != null ? headers : {};
+      this.body = body != null ? body : '';
+    }
+
+    Frame.prototype.toString = function() {
+      var lines, name, skipContentLength, value, _ref;
+      lines = [this.command];
+      skipContentLength = this.headers['content-length'] === false ? true : false;
+      if (skipContentLength) {
+        delete this.headers['content-length'];
+      }
+      _ref = this.headers;
+      for (name in _ref) {
+        if (!__hasProp.call(_ref, name)) continue;
+        value = _ref[name];
+        lines.push("" + name + ":" + value);
+      }
+      if (this.body && !skipContentLength) {
+        lines.push("content-length:" + (Frame.sizeOfUTF8(this.body)));
+      }
+      lines.push(Byte.LF + this.body);
+      return lines.join(Byte.LF);
+    };
+
+    Frame.sizeOfUTF8 = function(s) {
+      if (s) {
+        return encodeURI(s).match(/%..|./g).length;
+      } else {
+        return 0;
+      }
+    };
+
+    unmarshallSingle = function(data) {
+      var body, chr, command, divider, headerLines, headers, i, idx, len, line, start, trim, _i, _j, _len, _ref, _ref1;
+      divider = data.search(RegExp("" + Byte.LF + Byte.LF));
+      headerLines = data.substring(0, divider).split(Byte.LF);
+      command = headerLines.shift();
+      headers = {};
+      trim = function(str) {
+        return str.replace(/^\s+|\s+$/g, '');
+      };
+      _ref = headerLines.reverse();
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        line = _ref[_i];
+        idx = line.indexOf(':');
+        headers[trim(line.substring(0, idx))] = trim(line.substring(idx + 1));
+      }
+      body = '';
+      start = divider + 2;
+      if (headers['content-length']) {
+        len = parseInt(headers['content-length']);
+        body = ('' + data).substring(start, start + len);
+      } else {
+        chr = null;
+        for (i = _j = start, _ref1 = data.length; start <= _ref1 ? _j < _ref1 : _j > _ref1; i = start <= _ref1 ? ++_j : --_j) {
+          chr = data.charAt(i);
+          if (chr === Byte.NULL) {
+            break;
+          }
+          body += chr;
+        }
+      }
+      return new Frame(command, headers, body);
+    };
+
+    Frame.unmarshall = function(datas) {
+      var data;
+      return (function() {
+        var _i, _len, _ref, _results;
+        _ref = datas.split(RegExp("" + Byte.NULL + Byte.LF + "*"));
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          data = _ref[_i];
+          if ((data != null ? data.length : void 0) > 0) {
+            _results.push(unmarshallSingle(data));
+          }
+        }
+        return _results;
+      })();
+    };
+
+    Frame.marshall = function(command, headers, body) {
+      var frame;
+      frame = new Frame(command, headers, body);
+      return frame.toString() + Byte.NULL;
+    };
+
+    return Frame;
+
+  })();
+
+  Client = (function() {
+    var now;
+
+    function Client(ws) {
+      this.ws = ws;
+      this.ws.binaryType = "arraybuffer";
+      this.counter = 0;
+      this.connected = false;
+      this.heartbeat = {
+        outgoing: 10000,
+        incoming: 10000
+      };
+      this.maxWebSocketFrameSize = 16 * 1024;
+      this.subscriptions = {};
+    }
+
+    Client.prototype.debug = function(message) {
+      var _ref;
+      return typeof window !== "undefined" && window !== null ? (_ref = window.console) != null ? void 0 : void 0 : void 0;
+    };
+
+    now = function() {
+      if (Date.now) {
+        return Date.now();
+      } else {
+        return new Date().valueOf;
+      }
+    };
+
+    Client.prototype._transmit = function(command, headers, body) {
+      var out;
+      out = Frame.marshall(command, headers, body);
+      if (typeof this.debug === "function") {
+        this.debug(">>> " + out);
+      }
+      while (true) {
+        if (out.length > this.maxWebSocketFrameSize) {
+          this.ws.send(out.substring(0, this.maxWebSocketFrameSize));
+          out = out.substring(this.maxWebSocketFrameSize);
+          if (typeof this.debug === "function") {
+            this.debug("remaining = " + out.length);
+          }
+        } else {
+          return this.ws.send(out);
+        }
+      }
+    };
+
+    Client.prototype._setupHeartbeat = function(headers) {
+      var serverIncoming, serverOutgoing, ttl, v, _ref, _ref1;
+      if ((_ref = headers.version) !== Stomp.VERSIONS.V1_1 && _ref !== Stomp.VERSIONS.V1_2) {
+        return;
+      }
+      _ref1 = (function() {
+        var _i, _len, _ref1, _results;
+        _ref1 = headers['heart-beat'].split(",");
+        _results = [];
+        for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
+          v = _ref1[_i];
+          _results.push(parseInt(v));
+        }
+        return _results;
+      })(), serverOutgoing = _ref1[0], serverIncoming = _ref1[1];
+      if (!(this.heartbeat.outgoing === 0 || serverIncoming === 0)) {
+        ttl = Math.max(this.heartbeat.outgoing, serverIncoming);
+        if (typeof this.debug === "function") {
+          this.debug("send PING every " + ttl + "ms");
+        }
+        this.pinger = Stomp.setInterval(ttl, (function(_this) {
+          return function() {
+            _this.ws.send(Byte.LF);
+            return typeof _this.debug === "function" ? _this.debug(">>> PING") : void 0;
+          };
+        })(this));
+      }
+      if (!(this.heartbeat.incoming === 0 || serverOutgoing === 0)) {
+        ttl = Math.max(this.heartbeat.incoming, serverOutgoing);
+        if (typeof this.debug === "function") {
+          this.debug("check PONG every " + ttl + "ms");
+        }
+        return this.ponger = Stomp.setInterval(ttl, (function(_this) {
+          return function() {
+            var delta;
+            delta = now() - _this.serverActivity;
+            if (delta > ttl * 2) {
+              if (typeof _this.debug === "function") {
+                _this.debug("did not receive server activity for the last " + delta + "ms");
+              }
+              return _this.ws.close();
+            }
+          };
+        })(this));
+      }
+    };
+
+    Client.prototype._parseConnect = function() {
+      var args, connectCallback, errorCallback, headers;
+      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
+      headers = {};
+      switch (args.length) {
+        case 2:
+          headers = args[0], connectCallback = args[1];
+          break;
+        case 3:
+          if (args[1] instanceof Function) {
+            headers = args[0], connectCallback = args[1], errorCallback = args[2];
+          } else {
+            headers.login = args[0], headers.passcode = args[1], connectCallback = args[2];
+          }
+          break;
+        case 4:
+          headers.login = args[0], headers.passcode = args[1], connectCallback = args[2], errorCallback = args[3];
+          break;
+        default:
+          headers.login = args[0], headers.passcode = args[1], connectCallback = args[2], errorCallback = args[3], headers.host = args[4];
+      }
+      return [headers, connectCallback, errorCallback];
+    };
+
+    Client.prototype.connect = function() {
+      var args, errorCallback, headers, out;
+      args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
+      out = this._parseConnect.apply(this, args);
+      headers = out[0], this.connectCallback = out[1], errorCallback = out[2];
+      if (typeof this.debug === "function") {
+        this.debug("Opening Web Socket...");
+      }
+      this.ws.onmessage = (function(_this) {
+        return function(evt) {
+          var arr, c, client, data, frame, messageID, onreceive, subscription, _i, _len, _ref, _results;
+          data = typeof ArrayBuffer !== 'undefined' && evt.data instanceof ArrayBuffer ? (arr = new Uint8Array(evt.data), typeof _this.debug === "function" ? _this.debug("--- got data length: " + arr.length) : void 0, ((function() {
+            var _i, _len, _results;
+            _results = [];
+            for (_i = 0, _len = arr.length; _i < _len; _i++) {
+              c = arr[_i];
+              _results.push(String.fromCharCode(c));
+            }
+            return _results;
+          })()).join('')) : evt.data;
+          _this.serverActivity = now();
+          if (data === Byte.LF) {
+            if (typeof _this.debug === "function") {
+              _this.debug("<<< PONG");
+            }
+            return;
+          }
+          if (typeof _this.debug === "function") {
+            _this.debug("<<< " + data);
+          }
+          _ref = Frame.unmarshall(data);
+          _results = [];
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            frame = _ref[_i];
+            switch (frame.command) {
+              case "CONNECTED":
+                if (typeof _this.debug === "function") {
+                  _this.debug("connected to server " + frame.headers.server);
+                }
+                _this.connected = true;
+                _this._setupHeartbeat(frame.headers);
+                _results.push(typeof _this.connectCallback === "function" ? _this.connectCallback(frame) : void 0);
+                break;
+              case "MESSAGE":
+                subscription = frame.headers.subscription;
+                onreceive = _this.subscriptions[subscription] || _this.onreceive;
+                if (onreceive) {
+                  client = _this;
+                  messageID = frame.headers["message-id"];
+                  frame.ack = function(headers) {
+                    if (headers == null) {
+                      headers = {};
+                    }
+                    return client.ack(messageID, subscription, headers);
+                  };
+                  frame.nack = function(headers) {
+                    if (headers == null) {
+                      headers = {};
+                    }
+                    return client.nack(messageID, subscription, headers);
+                  };
+                  _results.push(onreceive(frame));
+                } else {
+                  _results.push(typeof _this.debug === "function" ? _this.debug("Unhandled received MESSAGE: " + frame) : void 0);
+                }
+                break;
+              case "RECEIPT":
+                _results.push(typeof _this.onreceipt === "function" ? _this.onreceipt(frame) : void 0);
+                break;
+              case "ERROR":
+                _results.push(typeof errorCallback === "function" ? errorCallback(frame) : void 0);
+                break;
+              default:
+                _results.push(typeof _this.debug === "function" ? _this.debug("Unhandled frame: " + frame) : void 0);
+            }
+          }
+          return _results;
+        };
+      })(this);
+      this.ws.onclose = (function(_this) {
+        return function() {
+          var msg;
+          msg = "Whoops! Lost connection to " + _this.ws.url;
+          if (typeof _this.debug === "function") {
+            _this.debug(msg);
+          }
+          _this._cleanUp();
+          return typeof errorCallback === "function" ? errorCallback(msg) : void 0;
+        };
+      })(this);
+      return this.ws.onopen = (function(_this) {
+        return function() {
+          if (typeof _this.debug === "function") {
+            _this.debug('Web Socket Opened...');
+          }
+          headers["accept-version"] = Stomp.VERSIONS.supportedVersions();
+          headers["heart-beat"] = [_this.heartbeat.outgoing, _this.heartbeat.incoming].join(',');
+          return _this._transmit("CONNECT", headers);
+        };
+      })(this);
+    };
+
+    Client.prototype.disconnect = function(disconnectCallback, headers) {
+      if (headers == null) {
+        headers = {};
+      }
+      this._transmit("DISCONNECT", headers);
+      this.ws.onclose = null;
+      this.ws.close();
+      this._cleanUp();
+      return typeof disconnectCallback === "function" ? disconnectCallback() : void 0;
+    };
+
+    Client.prototype._cleanUp = function() {
+      this.connected = false;
+      if (this.pinger) {
+        Stomp.clearInterval(this.pinger);
+      }
+      if (this.ponger) {
+        return Stomp.clearInterval(this.ponger);
+      }
+    };
+
+    Client.prototype.send = function(destination, headers, body) {
+      if (headers == null) {
+        headers = {};
+      }
+      if (body == null) {
+        body = '';
+      }
+      headers.destination = destination;
+      return this._transmit("SEND", headers, body);
+    };
+
+    Client.prototype.subscribe = function(destination, callback, headers) {
+      var client;
+      if (headers == null) {
+        headers = {};
+      }
+      if (!headers.id) {
+        headers.id = "sub-" + this.counter++;
+      }
+      headers.destination = destination;
+      this.subscriptions[headers.id] = callback;
+      this._transmit("SUBSCRIBE", headers);
+      client = this;
+      return {
+        id: headers.id,
+        unsubscribe: function() {
+          return client.unsubscribe(headers.id);
+        }
+      };
+    };
+
+    Client.prototype.unsubscribe = function(id) {
+      delete this.subscriptions[id];
+      return this._transmit("UNSUBSCRIBE", {
+        id: id
+      });
+    };
+
+    Client.prototype.begin = function(transaction) {
+      var client, txid;
+      txid = transaction || "tx-" + this.counter++;
+      this._transmit("BEGIN", {
+        transaction: txid
+      });
+      client = this;
+      return {
+        id: txid,
+        commit: function() {
+          return client.commit(txid);
+        },
+        abort: function() {
+          return client.abort(txid);
+        }
+      };
+    };
+
+    Client.prototype.commit = function(transaction) {
+      return this._transmit("COMMIT", {
+        transaction: transaction
+      });
+    };
+
+    Client.prototype.abort = function(transaction) {
+      return this._transmit("ABORT", {
+        transaction: transaction
+      });
+    };
+
+    Client.prototype.ack = function(messageID, subscription, headers) {
+      if (headers == null) {
+        headers = {};
+      }
+      headers["message-id"] = messageID;
+      headers.subscription = subscription;
+      return this._transmit("ACK", headers);
+    };
+
+    Client.prototype.nack = function(messageID, subscription, headers) {
+      if (headers == null) {
+        headers = {};
+      }
+      headers["message-id"] = messageID;
+      headers.subscription = subscription;
+      return this._transmit("NACK", headers);
+    };
+
+    return Client;
+
+  })();
+
+  Stomp = {
+    VERSIONS: {
+      V1_0: '1.0',
+      V1_1: '1.1',
+      V1_2: '1.2',
+      supportedVersions: function() {
+        return '1.1,1.0';
+      }
+    },
+    client: function(url, protocols) {
+      var klass, ws;
+      if (protocols == null) {
+        protocols = ['v10.stomp', 'v11.stomp'];
+      }
+      klass = Stomp.WebSocketClass || WebSocket;
+      ws = new klass(url, protocols);
+      return new Client(ws);
+    },
+    over: function(ws) {
+      return new Client(ws);
+    },
+    Frame: Frame
+  };
+
+  if (typeof exports !== "undefined" && exports !== null) {
+    exports.Stomp = Stomp;
+  }
+
+  if (typeof window !== "undefined" && window !== null) {
+    Stomp.setInterval = function(interval, f) {
+      return window.setInterval(f, interval);
+    };
+    Stomp.clearInterval = function(id) {
+      return window.clearInterval(id);
+    };
+    window.Stomp = Stomp;
+  } else if (!exports) {
+    self.Stomp = Stomp;
+  }
+
+}).call(this);
diff --git a/src/websocket/websocket_config.js b/src/websocket/websocket_config.js
new file mode 100644
index 0000000..ef16497
--- /dev/null
+++ b/src/websocket/websocket_config.js
@@ -0,0 +1,11 @@
+const url = process.env.VUE_APP_WEBSOCKET;
+let stompClient = '';
+let isConnected = false;
+let timer = '';
+
+export default {
+  stompClient,
+  timer,
+  url,
+  isConnected,
+}