作者 朱兆平

websocket+编译部署配置

@@ -37,7 +37,8 @@ exports.cssLoaders = function (options) { @@ -37,7 +37,8 @@ exports.cssLoaders = function (options) {
37 if (options.extract) { 37 if (options.extract) {
38 return ExtractTextPlugin.extract({ 38 return ExtractTextPlugin.extract({
39 use: loaders, 39 use: loaders,
40 - fallback: 'vue-style-loader' 40 + fallback: 'vue-style-loader',
  41 + publicPath: '../../'
41 }) 42 })
42 } else { 43 } else {
43 return ['vue-style-loader'].concat(loaders) 44 return ['vue-style-loader'].concat(loaders)
@@ -53,6 +53,16 @@ module.exports = { @@ -53,6 +53,16 @@ module.exports = {
53 limit: 10000, 53 limit: 10000,
54 name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 54 name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
55 } 55 }
  56 + },
  57 + {
  58 + test: /\.js$/i,
  59 + loader: 'babel-loader',
  60 + include: [
  61 + resolve('src'),
  62 + resolve('test'),
  63 + resolve('node_modules/element-ui/src'),
  64 + resolve('node_modules/element-ui/packages')
  65 + ],
56 } 66 }
57 ] 67 ]
58 } 68 }
@@ -20,6 +20,7 @@ var webpackConfig = merge(baseWebpackConfig, { @@ -20,6 +20,7 @@ var webpackConfig = merge(baseWebpackConfig, {
20 }, 20 },
21 devtool: config.build.productionSourceMap ? '#source-map' : false, 21 devtool: config.build.productionSourceMap ? '#source-map' : false,
22 output: { 22 output: {
  23 + publicPath: './',
23 path: config.build.assetsRoot, 24 path: config.build.assetsRoot,
24 filename: utils.assetsPath('js/[name].[chunkhash].js'), 25 filename: utils.assetsPath('js/[name].[chunkhash].js'),
25 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 26 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
@@ -7,7 +7,7 @@ module.exports = { @@ -7,7 +7,7 @@ module.exports = {
7 index: path.resolve(__dirname, '../dist/index.html'), 7 index: path.resolve(__dirname, '../dist/index.html'),
8 assetsRoot: path.resolve(__dirname, '../dist'), 8 assetsRoot: path.resolve(__dirname, '../dist'),
9 assetsSubDirectory: 'static', 9 assetsSubDirectory: 'static',
10 - assetsPublicPath: '/vue-admin/', 10 + assetsPublicPath: './',
11 productionSourceMap: true, 11 productionSourceMap: true,
12 // Gzip off by default as many popular static hosts such as 12 // Gzip off by default as many popular static hosts such as
13 // Surge or Netlify already gzip all static assets for you. 13 // Surge or Netlify already gzip all static assets for you.
1 import axios from 'axios' 1 import axios from 'axios'
2 2
3 -let base = 'empt-location/job'; 3 +let base = 'empt-location/location';
4 4
5 5
6 export const getList = params => { return axios.get(`${base}/list`, { params: params }); }; 6 export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
  1 +
  2 +var websock = null;
  3 +var global_callback = null;
  4 +var serverPort = '10003'; //webSocket连接端口
  5 +
  6 +
  7 +function getWebIP(){
  8 + var curIP = window.location.hostname;
  9 + return curIP;
  10 +}
  11 +
  12 +function initWebSocket(){ //初始化weosocket
  13 + //ws地址
  14 + var wsuri = "ws://" +getWebIP()+ ":" + serverPort+"/log";
  15 + websock = new WebSocket(wsuri);
  16 + websock.onmessage = function(e){
  17 + websocketonmessage(e);
  18 + }
  19 + websock.onclose = function(e){
  20 + websocketclose(e);
  21 + }
  22 + websock.onopen = function () {
  23 + websocketOpen();
  24 + }
  25 +
  26 + //连接发生错误的回调方法
  27 + websock.onerror = function () {
  28 + console.log("WebSocket连接发生错误");
  29 + }
  30 +}
  31 +
  32 +// 实际调用的方法
  33 +function sendSock(agentData,callback){
  34 + global_callback = callback;
  35 + if (websock.readyState === websock.OPEN) {
  36 + //若是ws开启状态
  37 + websocketsend(agentData)
  38 + }else if (websock.readyState === websock.CONNECTING) {
  39 + // 若是 正在开启状态,则等待1s后重新调用
  40 + setTimeout(function () {
  41 + sendSock(agentData,callback);
  42 + }, 1000);
  43 + }else {
  44 + // 若未开启 ,则等待1s后重新调用
  45 + setTimeout(function () {
  46 + sendSock(agentData,callback);
  47 + }, 1000);
  48 + }
  49 +}
  50 +
  51 +//数据接收
  52 +function websocketonmessage(e){
  53 + global_callback(JSON.parse(e.data));
  54 +}
  55 +
  56 +//数据发送
  57 +function websocketsend(agentData){
  58 + websock.send(JSON.stringify(agentData));
  59 +}
  60 +
  61 +//关闭
  62 +function websocketclose(e){
  63 + console.log("connection closed (" + e.code + ")");
  64 +}
  65 +
  66 +function websocketOpen(e){
  67 + console.log("连接成功");
  68 +}
  69 +
  70 +// initWebSocket();
  71 +
  72 +export{sendSock}
  73 +
@@ -13,6 +13,8 @@ import i18n from './lang' @@ -13,6 +13,8 @@ import i18n from './lang'
13 import 'font-awesome/css/font-awesome.min.css' 13 import 'font-awesome/css/font-awesome.min.css'
14 import ElementUI from 'element-ui' 14 import ElementUI from 'element-ui'
15 15
  16 +import * as socketApi from './api/socket'
  17 +
16 //定义一个全局过滤器实现日期格式化 18 //定义一个全局过滤器实现日期格式化
17 Vue.filter('datefmt',function(input,fmtstring){ 19 Vue.filter('datefmt',function(input,fmtstring){
18 20
@@ -20,7 +22,8 @@ Vue.filter('datefmt',function(input,fmtstring){ @@ -20,7 +22,8 @@ Vue.filter('datefmt',function(input,fmtstring){
20 22
21 }); 23 });
22 24
23 - 25 +// 注册websocket组件到VUE
  26 +Vue.prototype.socketApi = socketApi
24 27
25 Vue.config.productionTip = false 28 Vue.config.productionTip = false
26 Mock.bootstrap(); 29 Mock.bootstrap();