From df9a47920b77655a0d318c9ee32a717a057d9f8f Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Thu, 30 Jul 2020 15:13:12 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A4=BA=E4=BE=8Bwebsocket=E8=BF=9E=E6=8E=A5?=
 =?UTF-8?q?=E5=9C=B0=E5=9D=80=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/config/index.js                       |  2 +-
 vue/src/store/modules/socket.js               |  5 +-
 .../components/WebsocketTest.vue              | 63 +++++++++++++++++++
 .../views/example/developingTest/index.vue    | 18 +++---
 4 files changed, 74 insertions(+), 14 deletions(-)
 create mode 100644 vue/src/views/example/developingTest/components/WebsocketTest.vue

diff --git a/vue/src/config/index.js b/vue/src/config/index.js
index 9291e84..74f3dd5 100644
--- a/vue/src/config/index.js
+++ b/vue/src/config/index.js
@@ -20,7 +20,7 @@ module.exports = {
     useMock: false,
 
     //socket连接地址
-    socketUrl: isDev ? 'localhost:12580' : 'wss://toesbieya.cn',
+    socketUrl: isDev ? 'http://localhost:12580' : 'https://toesbieya.cn:12580',
 
     //侧边栏顶上的logo地址
     sidebarLogoUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png',
diff --git a/vue/src/store/modules/socket.js b/vue/src/store/modules/socket.js
index cd2fcc8..7af4d71 100644
--- a/vue/src/store/modules/socket.js
+++ b/vue/src/store/modules/socket.js
@@ -32,10 +32,7 @@ const actions = {
 }
 
 function initSocket({id, token}) {
-    return new SocketIO(socketUrl, {
-        query: {id, token},
-        transports: ['websocket']
-    })
+    return new SocketIO(socketUrl, {query: {id, token}})
 }
 
 function defaultEventBind(socket, {state, commit, dispatch}) {
diff --git a/vue/src/views/example/developingTest/components/WebsocketTest.vue b/vue/src/views/example/developingTest/components/WebsocketTest.vue
new file mode 100644
index 0000000..d299cb8
--- /dev/null
+++ b/vue/src/views/example/developingTest/components/WebsocketTest.vue
@@ -0,0 +1,63 @@
+<template>
+    <div class="tip-row">
+        测试socket连接
+        <el-row>
+            <el-input v-model="address" placeholder="socket服务地址"/>
+            <el-input v-model="option" placeholder="socket.io参数" :rows="4" type="textarea" style="margin-top: 12px"/>
+        </el-row>
+        <el-row style="margin-top: 12px">
+            连接情况：{{ result }}
+            <el-button :loading="loading" type="primary" @click="connect">点我连接</el-button>
+            <el-button plain @click="stop">中止</el-button>
+        </el-row>
+    </div>
+</template>
+
+<script>
+import SocketIO from 'socket.io-client'
+
+export default {
+    name: "WebsocketTest",
+
+    data() {
+        return {
+            loading: false,
+            result: '',
+            address: '',
+            option: ''
+        }
+    },
+
+    methods: {
+        connect() {
+            if (this.loading || !this.address) return
+            this.socket = new SocketIO(this.address, this.getSocketOption())
+            this.socket.on('connect', () => {
+                this.result = '连接成功'
+                this.stop()
+                this.loading = false
+            })
+            this.socket.on('reconnecting', () => {
+                this.result = '连接失败'
+                this.stop()
+                this.loading = false
+            })
+        },
+
+        stop() {
+            if (!this.loading || !this.socket) return
+            this.socket.close()
+            this.socket = null
+        },
+
+        getSocketOption() {
+            try {
+                return JSON.parse(this.option)
+            }
+            catch (e) {
+                return {}
+            }
+        }
+    }
+}
+</script>
diff --git a/vue/src/views/example/developingTest/index.vue b/vue/src/views/example/developingTest/index.vue
index 2b04aa3..fbc23f2 100644
--- a/vue/src/views/example/developingTest/index.vue
+++ b/vue/src/views/example/developingTest/index.vue
@@ -1,20 +1,20 @@
 <template>
     <div>
         <api-speed-test/>
-
         <export-excel-test/>
-
         <image-compress-test/>
+        <websocket-test/>
     </div>
 </template>
 
 <script>
-    import ApiSpeedTest from "./components/ApiSpeedTest"
-    import ExportExcelTest from "./components/ExportExcelTest"
-    import ImageCompressTest from "./components/ImageCompressTest"
+import ApiSpeedTest from "./components/ApiSpeedTest"
+import ExportExcelTest from "./components/ExportExcelTest"
+import ImageCompressTest from "./components/ImageCompressTest"
+import WebsocketTest from "./components/WebsocketTest"
 
-    export default {
-        name: "testPage",
-        components: {ApiSpeedTest, ExportExcelTest, ImageCompressTest}
-    }
+export default {
+    name: "testPage",
+    components: {ApiSpeedTest, ExportExcelTest, ImageCompressTest, WebsocketTest}
+}
 </script>