Skip to content

M
max_android_panel
Commit 34d49045 by Zhang Xin
Options

修改webpacke,修增加websocket

parent 02c023b3
Showing with 407 additions and 240 deletions
.babelrc
{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"transform-runtime",
["import", {"libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
"react-hot-loader/babel"
]
}
\ No newline at end of file
client/actions/getIp.js
......@@ -4,7 +4,11 @@ let domain = 'http://192.168.10.100:7788';
let domainIp = '192.168.10.';
let ipIndex = 0;
let initIndex = 1;
let key = 3;
let totalIndex = 255 / 5;
let onceIndex = totalIndex / key;
let failTotal = 1;
const saveIp = (data)=>{
......@@ -27,32 +31,37 @@ const checkStatus = (response)=>{
const parseJson = (response)=>{
return response.json();
}
};
const testIp = ()=>{
};
const getIp = ()=>{
return (dispatch =>{
console.log("ipIndex",ipIndex)
if(ipIndex > 255){
}else{
let url = 'http://' + domainIp + ipIndex + ':7788/testIp';
console.log("url : ",url);
for(let i = initIndex; i < (totalIndex + initIndex) ; i++){
let url = 'http://' + domainIp + i + ':7788/testIp';
fetch( url ,{
// credentials : 'include',
method : 'HEAD',
method : 'POST',
mode : 'cors',
body : {}
}).then(checkStatus)
.then(parseJson)
.then((data) => {
console.log("data :",data);
dispatch(saveIp(domainIp + ipIndex + ':7788'))
dispatch(saveIp(domainIp + i + ':7788'))
})
.catch((err) =>{
console.log("Err:",err);
console.error("Err:",err);
failTotal++;
if(failTotal >= totalIndex + initIndex){
initIndex = totalIndex + initIndex > 255 ? 1 : totalIndex + initIndex;
dispatch(getIp())
}
});
}
})
};
export {getIp}
client/components/CommonComponent/HeaderComponent/HeaderComponent.jsx 0 → 100644
import React from 'react';
require('./index.css')
export default class HeaderComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return <div className={"headerComponent clearfix"}>
<div className={"headerContent leftContent fl"}>
<div className={"headerlogo"}>
<img className={"logoImg"} src={UTILPATH.localImg.headlogo} alt=""/>
</div>
<div>
<img className={"addIcon"} src={UTILPATH.localImg.addIcon} alt=""/>
<div className={"colfff"}>
<p className={"font30"}>华贸商业街</p>
<p className={"font24"}>ID : 001</p>
</div>
</div>
</div>
<div className={"headerContent rightContent fr"}>
<img className={"userheadImg"} src={UTILPATH.localImg.headlogo} alt=""/>
<div className={"userinfo font24 colfff"}>
<p>李大仁</p>
<p>ID:001</p>
</div>
</div>
</div>
}
}
\ No newline at end of file
client/components/CommonComponent/HeaderComponent/index.css 0 → 100644
.headerComponent{
height: 98px;
width: 100%;
position: relative;
background-color: #34343e;
}
.headerComponent .headerContent{
height: 100%;
width: auto;
}
.headerComponent .headerlogo{
width: 440px;
height: 100%;
background-color: #fff;
position: relative;
}
.headerComponent .headerlogo:after{
content : '';
position: absolute;
width: 40px;
height: 100%;
/*background-color: #34343e;*/
border-top: 98px solid transparent;
border-bottom: 0 solid transparent;
border-left: 0 solid transparent;
border-right: 40px solid #34343e;
top: 0;
right: 0;
}
.headerComponent .headerlogo .logoImg{
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%,-50%);
}
\ No newline at end of file
client/containers/PageContainer/PageContainer.jsx
'use strict';
import React from 'react'
import { connect } from 'react-redux';
import {getIp} from '../../actions/getIp'
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
class PageContainer extends React.Component {
constructor(props) {
super(props);
UTILPATH.socket.init()
// UTILPATH.socket.getIp();
}
componentWillMount() {
let {dispatch} = this.props;
dispatch(getIp());
}
componentDidMount(){
}
......@@ -20,10 +19,12 @@ class PageContainer extends React.Component {
}
componentWillUnmount() {
}
render() {
console.log(this.state);
return (
<div>
123
<HeaderComponent />
</div>
)
}
......
client/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<head>
<meta charset="UTF-8">
<title>怪兽家便利店</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=false,target-densitydpi=device-dpi'/>
<meta name="format-detection" content="telephone=yes"/>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<!--<script src="http://api.map.baidu.com/api?v=2.0&ak=AkqyM7rYFQQxjdrufnYDV4f0Chn8YjNZ"></script>-->
<!--<script src="https://api.map.baidu.com/api?v=2.0&ak=AkqyM7rYFQQxjdrufnYDV4f0Chn8YjNZ&t=1"></script>-->
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css"/>
</head>
<body>
<div id="root"></div>
<!-- This script adds the Roboto font to our project. For more detail go to this site: http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500 -->
<script src="/vendor.bundle.js"></script>
<script src="/bundle.js"></script>
</body>
<meta name="format-detection" content="telephone=no"/>
</head>
<body>
<div id="root"></div>
<script src="/vendor.bundle.js"></script>
<script src="/index.js"></script>
</body>
</html>
\ No newline at end of file
client/index.js
import ReactDOM from 'react-dom'
import React from 'react'
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import React from 'react';
import ReactDom from 'react-dom';
import {createStore , applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import reducers from './reducers/index';
import PageContainer from './containers/PageContainer/PageContainer'
import { createLogger } from 'redux-logger'
import thunkMiddleware from 'redux-thunk';
require('./index.css');
// init thunk
import PageContainer from './containers/PageContainer/PageContainer'
function activateVendor() {
const loggerMiddleware = createLogger();
const logMiddleware = createLogger();
return createStore(
reducers,
applyMiddleware (
applyMiddleware(
thunkMiddleware,
loggerMiddleware
logMiddleware
)
)
);
}
function renderPage(store) {
ReactDOM.render(
ReactDom.render(
<Provider store={store}>
<PageContainer />
</Provider>
,
</Provider>,
document.getElementById('root')
);
)
}
let store = activateVendor();
......
client/routes/index.js deleted 100644 → 0
module.exports = {
path: '/',
indexRoute: {
getComponent(nextState, cb) {
require.ensure([], (require) => {
cb(null, require('../containers/PageContainer/PageContainer').default)
}, 'HomePage')
},
},
getComponent(nextState, cb) {
require.ensure([], (require) => {
cb(null, require('../containers/App/App').default)
}, 'App')
},
childRoutes: [
require('./trouble'),
]
};
\ No newline at end of file
client/routes/trouble.js deleted 100644 → 0
module.exports = {
path : '/trouble/:tid',
getComponent(nextState,cb){
require.ensure([],(require)=>{
cb(null,require('../containers/Trouble/Trouble').default)
},'Trouble')
}
}
\ No newline at end of file
client/util/image.js
import headlogo from '../image/header-logo.png';
import defaultImg from '../image/default.png';
import addIcon from '../image/addIcon.png';
const localHost = 'http://localhost:7788';
const devHost = 'http://test.mjitech.com';
......@@ -73,6 +74,6 @@ const handleImgLoad = (ref)=>{
return style;
}
const localImg = {headlogo,defaultImg}
const localImg = {headlogo,defaultImg,addIcon}
module.exports = {localHost,devHost,masterHost,getPic,handleImgError,handleImgLoad,localImg};
\ No newline at end of file
client/util/socket.js
import fetch from 'isomorphic-fetch'
let domainIp = '192.168.10.';
let ipIndex = 0;
let initIndex = 1;
let totalIndex = 255 / 5;
let failTotal = 1;
let currentIpIndex = 0;
let ws = null;
let inteval = null;
let timer = null;
let time = 60000;
let intevalTime = 30000;
let isFalse = false;
const checkStatus = (response)=>{
console.log("===========")
console.log(response);
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
};
const parseJson = (response)=>{
return response.json();
};
const init = ()=>{
if("WebSocket" in window){
console.log("ipIndex : " , ipIndex)
let url = 'ws://' + domainIp + ipIndex + ':7788/notify';
try{
let ws = new WebSocket(url);
const getIp = ()=>{
console.log("getIp : ",initIndex)
for(let i = initIndex; i < (totalIndex + initIndex) ; i++){
let url = 'http://' + domainIp + i + ':9999/getmyid';
fetch( url ,{
// credentials : 'include',
method : 'GET',
mode : 'cors',
body : {}
}).then(checkStatus)
.then(parseJson)
.then((data) => {
console.log("data :",data);
if(data.storeId){
let wsUrl = 'ws://' + domainIp + i + ':7788/notify?from=plant&storeId='+data.storeId;
currentIpIndex = i;
init(wsUrl);
}
})
.catch((err) =>{
console.error("Err:",err);
failTotal++;
if(failTotal >= totalIndex + initIndex){
initIndex = totalIndex + initIndex;
if(initIndex > 255){
inteval = setTimeout(function () {
console.log("------");
window.clearTimeout(inteval);
inteval = null;
initIndex = 1;
failTotal = 1;
getIp();
},intevalTime)
}else{
getIp();
}
}
});
}
};
const testIp = (ip) => {
console.log("testIp : ",ip);
let url = 'http://' + domainIp + ip + ':9999/getmyid';
fetch( url ,{
// credentials : 'include',
method : 'GET',
mode : 'cors',
body : {}
}).then(checkStatus)
.then(parseJson)
.then((data) => {
if(data.storeId){
let wsUrl = 'ws://' + domainIp + i + ':7788/notify?from=plant&storeId='+data.storeId;
currentIpIndex = i;
init(wsUrl);
}
})
.catch((err) =>{
console.error("Err:",err);
currentIpIndex = 0;
window.clearTimeout(inteval);
inteval = null;
initIndex = 1;
failTotal = 1;
getIp()
});
}
const init = (url)=>{
console.log("init :" ,url);
if("WebSocket" in window && !ws && url){
ws = new WebSocket(url);
ws.onopen = function()
{
// Web Socket 已连接上，使用 send() 方法发送数据
// ws.send("发送数据");
clearInterval(timer);
timer = null;
window.clearTimeout(inteval);
inteval = null;
initIndex = 1;
failTotal = 1;
console.log("open");
isFalse = false;
};
ws.onmessage = function (evt)
......@@ -29,26 +132,60 @@ const init = ()=>{
ws.onclose = function(err)
{
// 关闭 websocket
console.log("连接已关闭...");
console.log("err : ",err)
console.log("close : ",err);
getError();
};
ws.onerror = function (err) {
console.log("wrong...");
console.log("err : ",err)
ipIndex++;
ipIndex = ipIndex > 255 ? 0 : ipIndex;
init();
}
}catch (e) {
console.log("ERR : ", e);
console.error("error : ",err);
getError();
}
}
};
const error = ()=>{
const getError = ()=>{
ws = null;
isFalse = true;
console.log("getError")
if(currentIpIndex){
testIp(currentIpIndex);
}else{
window.clearTimeout(inteval);
inteval = null;
initIndex = 1;
failTotal = 1;
getIp();
}
// if(!ws && !timer){
// console.log("in timer")
// timer = setInterval(function () {
// getError();
// },time)
// }
};
}
const sendMsg = (msg) => {
if(ws){
try{
ws.send(msg);
}catch (e) {
console.error("sendMsg error :",e)
}
}
}
const closeSocket = ()=>{
if(ws){
try{
ws.close();
ws = null;
}catch (e) {
console.error("closeSocket error :",e)
}
}
}
module.exports = {init}
\ No newline at end of file
module.exports = {getIp,sendMsg}
\ No newline at end of file
package.json
{
"name": "maxSpotOrderDetail",
"name": "machinehomepage_new_27",
"version": "1.0.0",
"private": true,
"description": "MaxSpot OrderDetail Page",
"description": "Maxbox machinePage 27",
"main": "index.js",
"scripts": {
"clean": "rm -rf static/*",
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env NODE_ENV=development webpack-dev-server --env=dev -d --history-api-fallback --hot --inline --progress --colors --port 80 --host 0.0.0.0",
"start:prepub": "NODE_ENV=production webpack-dev-server --env=dev -d --history-api-fallback --hot --inline --progress --colors --port 80 --host 0.0.0.0",
"build:prepub": "NODE_ENV=test webpack --env=build --progress --colors",
"build:preprod": "NODE_ENV=preprod webpack --env=build --progress --colors",
"build": "NODE_ENV=production webpack --env=build --progress --colors"
"clean": "rm -rf static/*",
"start": "set NODE_ENV=development && webpack-dev-server --env=dev -d --history-api-fallback --hot --inline --progress --colors --port 80 --host 0.0.0.0",
"build": "set NODE_ENV=production && webpack --env=build --progress --color"
},
"author": "",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.3",
"babel-plugin-transform-runtime": "^6.5.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.5.0",
"classnames": "^2.2.3",
"cross-env": "^5.1.1",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"isomorphic-fetch": "^2.2.1",
"antd": "^3.6.3",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-import": "^1.8.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"minimist": "^1.2.0",
"postcss-loader": "^0.8.1",
"qrcode.react": "^0.6.1",
"react": "15.3.0",
"react-dom": "15.3.0",
"react-hot-loader": "^1.3.0",
"react-lazy-load": "^3.0.10",
"react-redux": "^4.4.0",
"react-router": "^2.0.0",
"react-router-redux": "^4.0.0",
"redux": "^3.3.1",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.1.0",
"rucksack-css": "^0.8.5",
"style-loader": "^0.13.0",
"swiper": "^3.3.1",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.7.1"
"postcss-loader": "^2.1.5",
"prop-types": "^15.6.2",
"react-hot-loader": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"rucksack-css": "^1.0.2",
"sockjs-client": "^1.1.5",
"style-loader": "^0.21.0",
"swiper": "^3.4.2",
"url-loader": "^1.0.1",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.2"
},
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
}
}
webpack.config.js
var rucksack = require('rucksack-css')
var webpack = require('webpack')
var path = require('path')
/* baseConfig */
var baseConfig = {
context: path.join(__dirname, './client'),
entry: {
jsx: './index.js',
html: './index.html',
vendor: [
const path = require('path');
const webpack = require('webpack')
const rucksack = require('rucksack-css');
let baseConfig = {
context : path.join(__dirname,'./client'), //基础目录
entry : { //入口文件
index:['./index.js','./index.html'],
vendor:[
'react',
'react-dom',
'react-redux',
'react-router',
'redux'
]
},
module: {
loaders: [
module : {
rules:[
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?minetype=application/font-woff"
test:/\.(ttf|eot|otf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use:["url-loader?limit=5120"]
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: ['url-loader?limit=10000&mimetype=image/svg+xml']
},
{
test: /\.(jpg|png|jpeg)$/,
loader: "url-loader?mimetype=image/png"
// loader: "url-loader?limit=10000&name=img/[name].[hash:6].[ext]"
test:/\.(jpg|png|jpeg)$/,
use:["url-loader?limit=512000&name=[name]-[hash:6].[ext]&mimetype=image/png"] //limit 500kb
},
{
test: /\.(gif)$/,
loader: "url-loader?mimetype=image/gif"
test:/\.(gif)$/,
use:["url-loader?limit=512000&name=[path][name].[ext]&mimetype=image/gif"]
},
{
test: /\.html$/,
loader: 'file?name=[name].[ext]'
use: ['file-loader?name=[name].[ext]']
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
use: ["style-loader", "css-loader","postcss-loader"]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loaders: [
'react-hot',
'babel-loader'
],
},
],
},
resolve: {
extensions: ['', '.js', '.jsx']
include: path.join(__dirname, 'client'),
use: ['babel-loader?cacheDirectory=true']
}
]
},
postcss: [
rucksack({
autoprefixer: true
})
],
devServer: {
contentBase: './client',
disableHostCheck: true,
hot: true
resolve:{ //自动解析确定的扩展
extensions:['.js', '.jsx', '.scss', '.css'],
modules: [
path.resolve(__dirname, 'node_modules'),
path.join(__dirname, './client')
]
}
}
/* end baseConfig */
/* get env */
function getEnv() {
function getEnv(){
const args = require('minimist')(process.argv.slice(2));
var env;
if (args._.length > 0 && args._.indexOf('start') !== -1) {
let env;
if(args._.length > 0 && args._.indexOf('start') !== -1){
env = 'test';
} else if (args.env) {
}else if(args.env){
env = args.env;
} else {
env = 'dev';
}else{
env = 'dev'
}
return env
return env;
}
let env = getEnv();
var env = getEnv()
/* end get env */
/*define envConfig*/
var envConfig = {
'build' : {
output: {
path: path.join(__dirname, './static'),
filename: 'bundle-[hash:6].js',
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
let envConfig = {
'build':{
output:{
path : path.join(__dirname,'./static'),
filename : 'bundle-[hash:6].js'
},
plugins:[
new webpack.optimize.UglifyJsPlugin(), //js压缩
new webpack.optimize.CommonsChunkPlugin({
name : "vendor",
filename : "vendor.bundle.js"
}), //分割共有模块和代码模块
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') }
}),
......@@ -106,17 +89,21 @@ var envConfig = {
UTILPATH:__dirname+'/client/util/util',
CONFIG:__dirname+'/client/config/index'
}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.NoEmitOnErrorsPlugin(), //配置了NoErrorsPlugin插件，用来跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误
]
},
'dev': {
'dev':{
output: {
path: path.join(__dirname, './static'),
filename: 'bundle.js',
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
filename: '[name].js',
},
plugins:[
new webpack.optimize.UglifyJsPlugin(), //js压缩
new webpack.optimize.CommonsChunkPlugin({
name : "vendor",
filename : "vendor.bundle.js"
}), //分割共有模块和代码模块
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') }
}),
......@@ -125,30 +112,20 @@ var envConfig = {
UTILPATH:__dirname+'/client/util/util',
CONFIG:__dirname+'/client/config/index'
}),
]
},
'test' : {
output: {
path: path.join(__dirname, './static'),
filename: 'bundle-[hash:6].js',
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'test') }
}),
new webpack.ProvidePlugin({
ENV: __dirname + '/client/env/' + (process.env.NODE_ENV || 'test'),
DEFALUT_INFO : __dirname + '/client/defaultInfo/development',
new webpack.LoaderOptionsPlugin({
options: {
devServer: {
contentBase: "./client", //本地服务器所加载的页面所在的目录
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转
inline: true, //实时刷新
disableHostCheck: true,
hot : true
}
}
}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.NoErrorsPlugin(),
]
},
}
}
/* end define envConfig*/
module.exports = Object.assign({}, baseConfig, envConfig[env])
\ No newline at end of file
module.exports = Object.assign({},baseConfig,envConfig[env]);
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment