示例websocket连接地址修改

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',

vue/src/store/modules/socket.js

@@ -32,10 +32,7 @@ const actions = {
 }
 
 function initSocket({id, token}) {
-    return new SocketIO(socketUrl, {
+    return new SocketIO(socketUrl, {query: {id, token}})
-        query: {id, token},
-        transports: ['websocket']
-    })
 }
 
 function defaultEventBind(socket, {state, commit, dispatch}) {

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>

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 ApiSpeedTest from "./components/ApiSpeedTest"
-    import ExportExcelTest from "./components/ExportExcelTest"
+import ExportExcelTest from "./components/ExportExcelTest"
-    import ImageCompressTest from "./components/ImageCompressTest"
+import ImageCompressTest from "./components/ImageCompressTest"
+import WebsocketTest from "./components/WebsocketTest"
 
-    export default {
+export default {
-        name: "testPage",
+    name: "testPage",
-        components: {ApiSpeedTest, ExportExcelTest, ImageCompressTest}
+    components: {ApiSpeedTest, ExportExcelTest, ImageCompressTest, WebsocketTest}
-    }
+}
 </script>