合并分支 'hqpt_vue' 到 'master'

websocket+编译部署配置



查看合并请求 !3

@@ -37,7 +37,8 @@ exports.cssLoaders = function (options) {
     if (options.extract) {
       return ExtractTextPlugin.extract({
         use: loaders,
-        fallback: 'vue-style-loader'
+        fallback: 'vue-style-loader',
+        publicPath: '../../'
       })
     } else {
       return ['vue-style-loader'].concat(loaders)

@@ -53,6 +53,16 @@ module.exports = {
           limit: 10000,
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
+      },
+      {
+        test: /\.js$/i,
+        loader: 'babel-loader',
+        include: [
+            resolve('src'),
+            resolve('test'),
+            resolve('node_modules/element-ui/src'),
+            resolve('node_modules/element-ui/packages')
+        ],
       }
     ]
   }

@@ -20,6 +20,7 @@ var webpackConfig = merge(baseWebpackConfig, {
   },
   devtool: config.build.productionSourceMap ? '#source-map' : false,
   output: {
+    publicPath: './',
     path: config.build.assetsRoot,
     filename: utils.assetsPath('js/[name].[chunkhash].js'),
     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

@@ -7,7 +7,7 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/vue-admin/',
+    assetsPublicPath: './',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

+
+var websock = null;
+var global_callback = null;
+var serverPort = '10003';	//webSocket连接端口
+
+
+function getWebIP(){
+    var curIP = window.location.hostname;
+    return curIP;
+}
+
+function initWebSocket(){ //初始化weosocket
+    //ws地址
+    var wsuri = "ws://" +getWebIP()+ ":" + serverPort+"/log";
+    websock = new WebSocket(wsuri);
+    websock.onmessage = function(e){
+        websocketonmessage(e);
+    }
+    websock.onclose = function(e){
+        websocketclose(e);
+    }
+    websock.onopen = function () {
+        websocketOpen();
+    }
+
+    //连接发生错误的回调方法
+    websock.onerror = function () {
+        console.log("WebSocket连接发生错误");
+    }
+}
+
+// 实际调用的方法
+function sendSock(agentData,callback){
+    global_callback = callback;
+    if (websock.readyState === websock.OPEN) {
+        //若是ws开启状态
+        websocketsend(agentData)
+    }else if (websock.readyState === websock.CONNECTING) {
+        // 若是 正在开启状态，则等待1s后重新调用
+        setTimeout(function () {
+            sendSock(agentData,callback);
+        }, 1000);
+    }else {
+        // 若未开启 ，则等待1s后重新调用
+        setTimeout(function () {
+            sendSock(agentData,callback);
+        }, 1000);
+    }
+}
+
+//数据接收
+function websocketonmessage(e){
+    global_callback(JSON.parse(e.data));
+}
+
+//数据发送
+function websocketsend(agentData){
+    websock.send(JSON.stringify(agentData));
+}
+
+//关闭
+function websocketclose(e){
+    console.log("connection closed (" + e.code + ")");
+}
+
+function websocketOpen(e){
+    console.log("连接成功");
+}
+
+// initWebSocket();
+
+export{sendSock}
+

@@ -13,6 +13,8 @@ import i18n from './lang'
 import 'font-awesome/css/font-awesome.min.css'
 import ElementUI from 'element-ui'
 
+import * as socketApi from './api/socket'
+
 //定义一个全局过滤器实现日期格式化
 Vue.filter('datefmt',function(input,fmtstring){
 
@@ -20,7 +22,8 @@ Vue.filter('datefmt',function(input,fmtstring){
 
 });
 
-
+// 注册websocket组件到VUE
+Vue.prototype.socketApi = socketApi
 
 Vue.config.productionTip = false
 Mock.bootstrap();