From f57afd42385c0c19d029b1e5314870df5b0c7094 Mon Sep 17 00:00:00 2001
From: real-zony <zony@myzony.com>
Date: Wed, 5 Oct 2022 20:25:55 +0800
Subject: [PATCH] feat: Establish Websocket communication.

---
 src/ui/src/App.vue                 | 17 +++++++++++++++++
 src/ui/src/communication/socket.js | 29 +++++++++++++++++++++++++++++
 src/ui/src/store/index.js          | 16 ++++++----------
 src/ui/src/store/ws.js             | 21 +++++++++++++++++++++
 src/ui/src/views/HomeView.vue      | 18 ++++++++++++++++--
 5 files changed, 89 insertions(+), 12 deletions(-)
 create mode 100644 src/ui/src/communication/socket.js
 create mode 100644 src/ui/src/store/ws.js

diff --git a/src/ui/src/App.vue b/src/ui/src/App.vue
index a319e79..316318f 100644
--- a/src/ui/src/App.vue
+++ b/src/ui/src/App.vue
@@ -50,6 +50,9 @@
 </template>
 
 <script>
+import Socket from "@/communication/socket";
+import {mapMutations} from "vuex"
+
 export default {
   data: () => ({
     drawer: null,
@@ -59,5 +62,19 @@ export default {
       ['mdi-information', '关于', '/about'],
     ],
   }),
+  created() {
+    Socket.$on("message", this.handleGetMessage);
+  },
+  beforeDestroy() {
+    Socket.$off("message", this.handleGetMessage);
+  },
+  methods: {
+    ...mapMutations({
+      setWsRes: "ws/setWsRes",
+    }),
+    handleGetMessage(msg) {
+      this.setWsRes(JSON.parse(msg));
+    }
+  }
 }
 </script>
\ No newline at end of file
diff --git a/src/ui/src/communication/socket.js b/src/ui/src/communication/socket.js
new file mode 100644
index 0000000..74f4735
--- /dev/null
+++ b/src/ui/src/communication/socket.js
@@ -0,0 +1,29 @@
+import Vue from 'vue'
+
+// const wsUrl = process.env.VUE_APP_WS_URL;
+const wsUrl = "ws://127.0.0.1:50001"
+
+let socket = new WebSocket(wsUrl);
+const emitter = new Vue({
+    methods: {
+        send(message) {
+            if (socket.readyState === 1) {
+                socket.send(JSON.stringify(message));
+            }
+        }, connect() {
+            socket = new WebSocket(wsUrl);
+            socket.onmessage = (msg) => {
+                this.$emit('message', msg.data);
+            };
+            socket.onerror = (err) => {
+                this.$emit('error', err);
+            };
+            socket.onclose = () => {
+                emitter.connect()
+            };
+        }
+    }
+})
+
+emitter.connect();
+export default emitter;
\ No newline at end of file
diff --git a/src/ui/src/store/index.js b/src/ui/src/store/index.js
index ceffa8e..55c95b8 100644
--- a/src/ui/src/store/index.js
+++ b/src/ui/src/store/index.js
@@ -1,17 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import ws from './ws'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-  },
-  getters: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
+    state: {},
+    getters: {},
+    mutations: {},
+    actions: {},
+    modules: {ws}
 })
diff --git a/src/ui/src/store/ws.js b/src/ui/src/store/ws.js
new file mode 100644
index 0000000..9cdf031
--- /dev/null
+++ b/src/ui/src/store/ws.js
@@ -0,0 +1,21 @@
+export const state = {
+    wsRes: {}
+};
+
+export const actions = {};
+
+export const mutations = {
+    setWsRes(newState, payload) {
+        state.wsRes = payload;
+    }
+};
+
+export const getters = {};
+
+export default {
+    state,
+    actions,
+    mutations,
+    getters,
+    namespaced: true
+}
\ No newline at end of file
diff --git a/src/ui/src/views/HomeView.vue b/src/ui/src/views/HomeView.vue
index cd99c38..a2a4e2f 100644
--- a/src/ui/src/views/HomeView.vue
+++ b/src/ui/src/views/HomeView.vue
@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import {mapState} from 'vuex'
+import Socket from '@/communication/socket'
 
 export default {
   name: 'Home',
@@ -62,9 +64,21 @@ export default {
   },
   methods: {
     openDir() {
-
+      Socket.send({
+        type: 'openDir',
+        data: {},
+      })
     }
   },
-  computed: {}
+  computed: {
+    ...mapState({
+      wsRes: state => state.ws.wsRes
+    })
+  },
+  watch: {
+    wsRes(val) {
+      console.log('echo from server: ', val)
+    }
+  }
 }
 </script>