websocket封装

朱兆平
package.json
src/lib/websocket/socket.js
src/main.js
src/utils/websocket.js
src/views/dataAnalysis/ExitAnalysis.vue
--- a/package.json
查看文件 @eada4e3
+++ b/package.json
查看文件 @eada4e3
@@ -68,7 +68,6 @@
     "shelljs": "^0.7.6",
     "url-loader": "^0.5.8",
     "vue-loader": "^11.1.4",
-    "vue-socket.io": "^3.0.9",
     "vue-style-loader": "^2.0.0",
     "vue-template-compiler": "^2.2.4",
     "webpack": "^2.2.1",
--- a/src/lib/websocket/socket.js 已删除 100644 → 0
查看文件 @5a55967
+++ b/src/lib/websocket/socket.js 已删除 100644 → 0
查看文件 @5a55967
-import Vue from 'vue'
-import VueSocketIO from 'vue-socket.io'
-
-
-var a;
-var wesocket = {
-    sid: sessionStorage.getItem('token'),
-    serverIp: getWebIP(),
-    serverPort: '9001',
-    debug: true,
-    connection: "ws://" + this.serverIp + ":" + this.serverPort + "/websocket/" + this.sid,
-    vuex: {}
-}
-function getWebIP() {
-    var curIP = window.location.hostname;
-    return curIP;
-}
-if (wesocket.connection != "") {
-    Vue.use(new VueSocketIO(wesocket))
-
-}
-export default a;
--- a/src/main.js
查看文件 @eada4e3
+++ b/src/main.js
查看文件 @eada4e3
@@ -10,7 +10,6 @@ import axios from 'axios'
 import rout from './routes'
 import Mock from './mock'
 import i18n from './lang'
-import VueSocketIO from './lib/websocket/socket'
 import 'font-awesome/css/font-awesome.min.css'
 import '@/styles/index.scss'
@@ -29,6 +28,7 @@ Vue.use(VueRouter)
 Vue.use(Vuex)
 Vue.prototype.$axios = axios;
+
 //NProgress.configure({ showSpinner: false });
 // console.log("mainjs:");
 // console.log(rout.routes);
@@ -145,7 +145,6 @@ axios.interceptors.response.use(
 let vue = new Vue({
     el: '#app',
     template: '<App/>',
-    VueSocketIO,
     router,
     store,
     i18n,
--- a/src/utils/websocket.js 0 → 100644
查看文件 @eada4e3
+++ b/src/utils/websocket.js 0 → 100644
查看文件 @eada4e3
+const VueWebsocket = {
+    wsuri: '',
+    serverPort: '9001',
+    sid: '',
+    /**
+     * 前后端消息定制的协议为JSON字符窜格式
+     * 下面是经过json转换收到的消息,重新赋值的
+     * 格式样例为:msgJson:{
+     *     message:socketMessage,
+     *     status: socketStatus,
+     *     data: socketDataList
+     *     .....
+     * }
+     */
+    socketMessage: '',
+    socketStatus: '',
+    socketDataList: '',
+    msgJson: '',
+    websocket: undefined,
+
+    // eslint-disable-next-line no-console
+    onmessage: function (event) {console.log(event.data)},
+    // eslint-disable-next-line no-console
+    onclose: function (event) {console.log("websocket链接已关闭")},
+    // eslint-disable-next-line no-console
+    onopen: function (event) {console.log("websocket链接已链接")},
+    // eslint-disable-next-line no-console
+    onerror: function (event) {console.log("websocket链接失败,请检查URL")},
+    // eslint-disable-next-line no-console
+    send: function(message){console.log("已发送消息")},
+
+    getWebIP: function () {
+        var curIP = window.location.hostname;
+        return curIP;
+    },
+    init: function () {
+        this.sid= sessionStorage.getItem('token');
+        this.wsuri = "ws://" + '192.168.1.17'+ ":" + this.serverPort + "/websocket/" + this.sid;
+        if(this.sid!== ''){
+            this.websocket = new WebSocket(this.wsuri);
+            this.websocket.onmessage  = this.onmessage;
+            this.websocket.onclose  = this.onclose;
+            this.websocket.onopen  = this.onopen;
+            this.websocket.onerror  = this.onerror;
+            this.websocket.send  = this.send;
+
+        }
+    }
+}
+
+export default VueWebsocket;
--- a/src/views/dataAnalysis/ExitAnalysis.vue
查看文件 @eada4e3
+++ b/src/views/dataAnalysis/ExitAnalysis.vue
查看文件 @eada4e3
@@ -26,15 +26,15 @@
                             </el-button>
                         </el-col>
                     </el-row>
-                    <el-input v-model="message" style="width: 460px;margin-top: 20px"
+                    <el-input v-model="message" style="width: 460px;margin-top: 20px" type="textarea"
                               placeholder="获取数据进度" readonly>
                     </el-input>
                 </div>
                 <div>
-                    状态 :{{this.socketApi.socketStatus}}
+                    状态 :
                 </div>
                 <div>
-                    消息 :{{this.socketApi.socketMessage}}
+                    消息 :{{socketResponse.message}}
                 </div>
                 <!-- 列表显示区域 -->
                 <!--
@@ -95,6 +95,8 @@
     import FilenameOption from '../excel/components/FilenameOption'
     import AutoWidthOption from '../excel/components/AutoWidthOption'
     import BookTypeOption from '../excel/components/BookTypeOption'
+    import VueWebsocket from '@/utils/websocket'
+    import {msgJson, socketDataList, socketMessage, socketStatus} from "@/api/socket";
     export default {
         name: "ExitAnalysis",
@@ -105,7 +107,13 @@
                  * 出港业务统计列表
                  */
                 exitInfoList: [],
-
+                resultStatus: '0',
+                message: '',
+                socketResponse: {
+                    message: '',
+                    data: '',
+                    status: ''
+                },
                 /**
                  * 查询列表
                  */
@@ -121,15 +129,6 @@
                 downloadLoading: false,
             }
         },
-        sockets: {
-            connect() {
-                this.$socket.emit("sendMessageToServer", "0025520"); //监听connect事件
-            },
-            servermessage(data) {
-                // 监听message事件，方法是后台定义和提供的
-                console.log(data);
-            }
-        },
         methods: {
             /**
              * 获取出港信息列表
@@ -160,8 +159,31 @@
                     this.$message.error(error.toString());
                 });
             },
+            socket_onmessage: function (e) {
+                // eslint-disable-next-line no-console
+                console.log("从websocket接收到新的消息-->>"+e.data);
+                this.message = this.message+e.data+"\n";
+                let msgJson = JSON.parse(e.data);
+                this.socketResponse = JSON.parse(e.data);
+                let socketMessage = msgJson.message;
+                // eslint-disable-next-line no-console
+                console.log(socketMessage)
+                let socketStatus = msgJson.status;
+                let socketDataList = msgJson.data;
+                // eslint-disable-next-line no-console
+                console.log(msgJson);
+            },
+            socket_onopen: function (e) {
+                // eslint-disable-next-line no-console
+                console.log("websocket->>链接已链接");
+            }
         },
         created() {
+            VueWebsocket.onopen = this.socket_onopen;
+            VueWebsocket.onmessage = this.socket_onmessage;
+            VueWebsocket.init();
+
+
         },
         destroyed() {
         },