优化工作流

package-lock.json

@@ -1186,6 +1186,12 @@
       "integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=",
       "dev": true
     },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "dev": true
+    },
     "ansi-colors": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.1.tgz",
@@ -2258,6 +2264,12 @@
         "source-list-map": "^2.0.0"
       }
     },
+    "css-parse": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.7.0.tgz",
+      "integrity": "sha1-Mh9s9zeCpv91ERE5D8BeLGV9jJs=",
+      "dev": true
+    },
     "css-select": {
       "version": "1.2.0",
       "resolved": "http://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -4772,6 +4784,12 @@
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
       "dev": true
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -6164,6 +6182,12 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sax": {
+      "version": "0.5.8",
+      "resolved": "http://registry.npmjs.org/sax/-/sax-0.5.8.tgz",
+      "integrity": "sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE=",
+      "dev": true
+    },
     "schedule": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/schedule/-/schedule-0.5.0.tgz",
@@ -6714,6 +6738,56 @@
         }
       }
     },
+    "stylus": {
+      "version": "0.54.5",
+      "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.5.tgz",
+      "integrity": "sha1-QrlWCTHKcJDOhRWnmLqeaqPW3Hk=",
+      "dev": true,
+      "requires": {
+        "css-parse": "1.7.x",
+        "debug": "*",
+        "glob": "7.0.x",
+        "mkdirp": "0.5.x",
+        "sax": "0.5.x",
+        "source-map": "0.1.x"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.0.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
+          "integrity": "sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.2",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "source-map": {
+          "version": "0.1.43",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
+          "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
+          "dev": true,
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
+    "stylus-loader": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-3.0.2.tgz",
+      "integrity": "sha512-+VomPdZ6a0razP+zinir61yZgpw2NfljeSsdUF5kJuEzlo3khXhY19Fn6l8QQz1GRJGtMCo8nG5C04ePyV7SUA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.0.2",
+        "lodash.clonedeep": "^4.5.0",
+        "when": "~3.6.x"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -7400,6 +7474,12 @@
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
       "dev": true
     },
+    "when": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",
+      "integrity": "sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=",
+      "dev": true
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",

package.json

@@ -30,6 +30,8 @@
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
     "style-loader": "^0.23.1",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
     "webpack": "^4.25.1",
     "webpack-dev-server": "^3.1.10"
   },

src/pages/20181112t6/config.json

@@ -1,7 +1,9 @@
 {
   "template": "react",
-  "style": "css",
+  "https": false,
-  "proxy": {
+  "proxy":[{
-      "/api": "http://localhost:3000"
+    "context": ["/chat", "/socket.io","/res"],
-    }
+    "target": "https://node.dengtongyu.com",
+    "secure": false
+  }]
 }

src/pages/20181112t6/src/components/MessageList.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+
+import './MessageList.styl';
+
+class MessageList extends Component {
+    constructor () {
+        super();
+  
+        this.element = null;
+     }
+
+    renderList(list) {
+        if(!list) return [];
+        let msgElements = [];
+        for(let i = 0;i<list.length;i++) {
+            if(list[i].self) {
+                msgElements.push(
+                    <div class="weui-cell" key={i}>
+                        <div class="weui-cell__bd"></div>
+                        <div class="bubble self weui-cell__ft">{list[i].msg}</div>
+                        <div class="weui-cell__ft head-img hr">
+                            <img src={list[i].img}/>
+                        </div>
+                    </div>
+                );
+            }else{
+                msgElements.push(
+                    <div className="weui-cell" key={i}>
+                        <div className="weui-cell__hd head-img hl">
+                            <img src={list[i].img}/>
+                        </div>
+                        <div className="weui-cell__hd bubble others">{list[i].msg}</div>
+                    </div>
+                );
+            }
+            
+        }
+        return msgElements;
+    }
+
+    componentDidMount() {
+       
+    }
+
+    componentDidUpdate() {
+        if(this.element) {
+            this.element.scrollTop = this.element.scrollHeight;
+        }
+    }
+
+    componentWillUnmount() {
+       
+    }
+
+    render() {
+       return (
+        <div id="msg-content" className="msg-content" ref={(element) => this.element = element}>
+            {this.renderList(this.props.list)}
+        </div>
+       );
+    }
+ }
+ export default MessageList;

src/pages/20181112t6/src/components/MessageList.styl

@@ -0,0 +1,65 @@
+.msg-content {
+		box-sizing: border-box;
+		overflow-y: auto;
+		flex: 1;
+
+		&>.weui-cell {
+			box-align: start;
+	    	align-items: flex-start;
+		}
+		&>.weui-cell:before {
+			border: none;
+		}
+		.head-img {
+			&>img {
+				width: 1rem;
+				height: 1rem;
+				border-radius: .2rem;
+			}
+			
+		}
+		.hl {
+			padding-right: .2rem;
+		}
+		.hr {
+			padding-left: .2rem;
+		}
+
+		.bubble {
+			max-width: 60%;
+			min-height: .5rem;
+			line-height: .5rem;
+			position: relative;
+			border-radius: .1rem;
+			padding: .1rem .2rem;
+			color: #232323;
+		}
+		.bubble::before{
+			content: '';
+			width: .2rem;
+			height: .2rem;
+			position: absolute;
+			top: .25rem;
+			transform: rotate(45deg);
+		}
+		.others {
+			background-color: #fff;
+			border: 1px solid #ededed;
+		}
+		.others::before {
+			background-color: #fff;
+	 		border: 1px #ededed;
+			left: -0.1rem;
+			border-style: none none solid solid;
+		}
+		.self {
+			background-color: #9eea6a;
+			border: 1px solid #9eea6a;
+		}
+		.self::before {
+			background-color: #9eea6a;
+	 		border: 1px #9eea6a;
+			right: -0.1rem;
+			border-style: solid solid none none;
+		}
+}

src/pages/20181112t6/src/components/app.css

@@ -1,5 +0,0 @@
-.app {
-  width: 100%;
-  height: 100%;
-  font-size: 16px;
-}

src/pages/20181112t6/src/components/app.js

@@ -1,13 +1,135 @@
 
 import React, { Component } from 'react';
+import MessageList from './MessageList';
 
-import './app.css';
+import './app.styl';
+
+let socket = null;
 
 class App extends Component {
+   constructor () {
+      super();
+
+      this.handleChange = this.handleChange.bind(this);
+      this.handleClickBtn = this.handleClickBtn.bind(this);
+      this.handleEnterKey = this.handleEnterKey.bind(this);
+
+      this.state = {
+         user:(new Date()).getTime(),
+         userImageId:Math.floor(Math.random()*851 + 1),
+         onlineUsers:0,
+         list: [],
+         message:''
+      }
+   }
+
+   componentDidMount() {
+      this.welcomeMessage();
+
+      socket = io.connect('/chat');
+
+      socket.on('broadcast_online_users', (data) => {
+         if(data && data.onlineUsers) {
+            this.state.onlineUsers = data.onlineUsers;
+         }
+      });
+   
+      socket.on('online_users_change', (data) => {
+         if(data && data.onlineUsers) {
+            this.state.onlineUsers = data.onlineUsers;
+         }
+      });
+
+      socket.on('broadcast_chat_message', (data) => {
+         //console.log('接收到服务器消息',data);
+         //console.log(msgBox.find('.weui-cell').length);
+         let listTemp = this.state.list;
+         if(listTemp.length > 20) {
+            listTemp.shift();
+         }
+         let item = {};
+         if(data.user == this.state.user) {
+            item.self = true;
+         }else{
+            item.self = false;
+         }
+         item.msg = data.msg;
+         item.img = '/res/images/userimage/' + data.imageId + '.png';
+         listTemp.push(item);
+         this.setState({
+            list:listTemp
+         });
+      });
+
+      document.addEventListener("keydown",this.handleEnterKey);
+   }
+
+   componentWillUmount(){
+      document.removeEventListener("keydown",this.handleEenterKey);
+   }
+
+   handleEnterKey (event) {
+      //console.log(event.keyCode);
+      if(event.keyCode === 13){
+         this.sendMessage();
+      }
+  }
+
+   handleChange(event) {
+      this.setState({
+         message:event.target.value
+      });
+   }
+
+   handleClickBtn() {
+      this.sendMessage();
+   }
+
+   welcomeMessage() {
+      this.setState({
+         list: [
+            {
+               self:false,
+               msg:'欢迎来到老司机开车聊天室！系好安全带，准备开车！',
+               img:'/res/images/userimage/0.png'
+            }
+         ]
+       });
+   }
+
+   sendMessage() {
+      if(!this.state.message) return false;
+      let sendData = {
+         user:this.state.user,
+         msg:this.state.message,
+         imageId:this.state.userImageId
+      }
+      socket.emit('client_chat_message', sendData);
+      
+      this.setState({
+         message:''
+      });
+   }
+
    render() {
       return (
          <div className="app">
-            Hello World!
+            <div id="top-bar" className="weui-cell top-bar">
+               <p>当前在线人数：<span id="online-users">{this.state.onlineUsers}</span></p>
+            </div>
+            <MessageList list={this.state.list}/>
+            <div className="input-bar">
+               <div className="weui-cell weui-cells_form">
+                  <div className="input-box weui-cell__bd">
+                     <input id="msg-val" className="weui-input" type="text" placeholder="请输入消息" 
+                     value={this.state.message} 
+                     onChange={this.handleChange}/>
+                  </div>
+                  <div id="send-btn" className="send-box weui-cell__ft" onClick={this.handleClickBtn}>
+                     <a href="javascript:;" className="weui-btn weui-btn_mini weui-btn_primary">发送</a>
+                  </div>
+               </div>
+            </div>
          </div>
       );
    }

src/pages/20181112t6/src/components/app.styl

@@ -0,0 +1,27 @@
+
+.app {
+	height: 100%;
+
+	display: flex;
+	flex-direction: column;
+}
+.top-bar {
+	border-bottom: 1px solid #CCCCCC;
+		
+	&>p {
+		line-height: 1rem;
+	}
+}
+
+.input-bar {
+		width: 100%;
+		border-top: #ccc solid 1px;
+		#msg-val {
+			height: .85rem;
+		}
+		#send-btn {
+			&>a {
+				font-size: .35rem;
+			}
+		}
+}

src/pages/20181112t6/src/index.css

@@ -1,10 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}
-
-#root {
-  width: 100%;
-  height: 100%;
-}

src/pages/20181112t6/src/index.html

@@ -3,17 +3,21 @@
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="theme-color" content="#000000">
 <title>Examples</title>
 <meta name="description" content="">
 <meta name="keywords" content="">
-<link href="" rel="stylesheet">
+<link rel="icon" type="image/x-icon" href="/pages/webchatroom/favicon.ico">
+<link href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css" rel="stylesheet">
+<script>
+  !function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(a){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
+</script>
 </head>
 <body>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+    <script src="https://node.dengtongyu.com/node_modules/socket.io-client/dist/socket.io.js"></script>
 </body>
 </html>

src/pages/20181112t6/src/index.js

@@ -2,6 +2,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App';
-import './index.css';
+import './index.styl';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/pages/20181112t6/src/index.styl

@@ -0,0 +1,49 @@
+html {
+  font-size: 62.5%
+}
+
+html,body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+ul,ol,li{
+  list-style:none;
+}
+h1,h2,h3,h4,h5,h6{
+  font-weight:normal;
+}
+
+html,body ,#root {
+  width: 100%;
+  height: 100%;
+}
+
+div {
+    font-size: 12px; // 默认写上dpr为1的fontSize
+}
+
+[data-dpr="2"] div {
+    font-size: 24px;
+}
+
+[data-dpr="3"] div {
+    font-size: 36px;
+}
+
+$norm=750;
+transformRem(v)
+  (v/$norm*10)rem
+
+/*清除浮动*/
+.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
+.cl { zoom: 1; }
+.clear {clear:both;display:inline;}
+
+
+/*字体抗锯齿*/
+.thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
+
+/*单行文字超出显示省略号*/
+.ell {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

task/task.js

@@ -34,8 +34,10 @@ exports.init = (type, paths, command) => {
 exports.dev = (paths, command) => {
 	_paths = paths;
 
+	_configJson = util.configJson(_paths.targetPath);
+
 	if(_configJson.template == 'react') {
-	webpackConfig.run(paths, command);
+		webpackConfig.run(paths, command);
 	}
 }
 

task/webpack.react.js

@@ -27,7 +27,11 @@ let _webpackConfig = {
            	{
                 test: /\.css$/,
                 use: ['style-loader', 'css-loader']
-            }
+            },
+			{
+				test: /\.styl$/,
+				use: ['style-loader', 'css-loader', 'stylus-loader']
+			}
         ]
     },
     plugins:[]
@@ -68,7 +72,8 @@ exports.run = (paths, command) => {
 		    port: 8088,
 		    hot: true,
 		    //open: true,
-		    stats: {colors: true}
+			stats: {colors: true},
+			https: _configJson.https
 		}
 
 		if(_configJson.proxy) {
@@ -84,13 +89,13 @@ exports.run = (paths, command) => {
 		//node api 启动本地服务
 		let server = new webpackDevServer(compiler, devServer);
 
-		console.log(_webpackConfig);
+		//console.log(devServer);
 
 		server.listen(devServer.port, 'localhost', (err) => {
 			if(err) {
 				console.log(err);
 			}else{
-				console.log(chalk.bold.green('服务启动: '+ devServer.contentBase +' : http://localhost:' + devServer.port));
+				console.log(chalk.bold.green('服务启动: '+ devServer.contentBase +' : '+ devServer.https ? 'https' : 'http' + '://localhost:' + devServer.port));
 			}
 			
 		});

template/react/config.json

@@ -1,7 +1,9 @@
 {
   "template": "react",
-  "style": "css",
+  "https": false,
-  "proxy": {
+  "proxy":[{
-      "/api": "http://localhost:3000"
+    "context": ["/api"],
-    }
+    "target": "http://localhost:8080/",
+    "secure": false
+  }]
 }