From 3c07f2fd308646f9c7daf3abbda79e95b5177152 Mon Sep 17 00:00:00 2001 From: dengtongyu Date: Thu, 15 Nov 2018 16:59:28 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B7=A5=E4=BD=9C=E6=B5=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 80 +++++++++++ package.json | 2 + src/pages/20181112t6/config.json | 10 +- .../20181112t6/src/components/MessageList.js | 63 +++++++++ .../src/components/MessageList.styl | 65 +++++++++ src/pages/20181112t6/src/components/app.css | 5 - src/pages/20181112t6/src/components/app.js | 126 +++++++++++++++++- src/pages/20181112t6/src/components/app.styl | 27 ++++ src/pages/20181112t6/src/index.css | 10 -- src/pages/20181112t6/src/index.html | 8 +- src/pages/20181112t6/src/index.js | 2 +- src/pages/20181112t6/src/index.styl | 49 +++++++ task/task.js | 4 +- task/webpack.react.js | 15 ++- template/react/config.json | 10 +- 15 files changed, 442 insertions(+), 34 deletions(-) create mode 100644 src/pages/20181112t6/src/components/MessageList.js create mode 100644 src/pages/20181112t6/src/components/MessageList.styl delete mode 100644 src/pages/20181112t6/src/components/app.css create mode 100644 src/pages/20181112t6/src/components/app.styl delete mode 100644 src/pages/20181112t6/src/index.css create mode 100644 src/pages/20181112t6/src/index.styl diff --git a/package-lock.json b/package-lock.json index f378344..8032f76 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 3d3dd7a..22a5782 100644 --- a/package.json +++ b/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" }, diff --git a/src/pages/20181112t6/config.json b/src/pages/20181112t6/config.json index 557259f..b854ebc 100644 --- a/src/pages/20181112t6/config.json +++ b/src/pages/20181112t6/config.json @@ -1,7 +1,9 @@ { "template": "react", - "style": "css", - "proxy": { - "/api": "http://localhost:3000" - } + "https": false, + "proxy":[{ + "context": ["/chat", "/socket.io","/res"], + "target": "https://node.dengtongyu.com", + "secure": false + }] } \ No newline at end of file diff --git a/src/pages/20181112t6/src/components/MessageList.js b/src/pages/20181112t6/src/components/MessageList.js new file mode 100644 index 0000000..03879cd --- /dev/null +++ b/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[i].msg}
+
+ +
+ + ); + }else{ + msgElements.push( +
+
+ +
+
{list[i].msg}
+
+ ); + } + + } + return msgElements; + } + + componentDidMount() { + + } + + componentDidUpdate() { + if(this.element) { + this.element.scrollTop = this.element.scrollHeight; + } + } + + componentWillUnmount() { + + } + + render() { + return ( +
this.element = element}> + {this.renderList(this.props.list)} +
+ ); + } + } + export default MessageList; \ No newline at end of file diff --git a/src/pages/20181112t6/src/components/MessageList.styl b/src/pages/20181112t6/src/components/MessageList.styl new file mode 100644 index 0000000..0790d55 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/pages/20181112t6/src/components/app.css b/src/pages/20181112t6/src/components/app.css deleted file mode 100644 index 4c2fba7..0000000 --- a/src/pages/20181112t6/src/components/app.css +++ /dev/null @@ -1,5 +0,0 @@ -.app { - width: 100%; - height: 100%; - font-size: 16px; -} diff --git a/src/pages/20181112t6/src/components/app.js b/src/pages/20181112t6/src/components/app.js index c645302..583694e 100644 --- a/src/pages/20181112t6/src/components/app.js +++ b/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 (
- Hello World! +
+

当前在线人数：{this.state.onlineUsers}

+
+ +
+
+
+ +
+
+ 发送 +
+
+
); } diff --git a/src/pages/20181112t6/src/components/app.styl b/src/pages/20181112t6/src/components/app.styl new file mode 100644 index 0000000..6d52394 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/pages/20181112t6/src/index.css b/src/pages/20181112t6/src/index.css deleted file mode 100644 index ab0b271..0000000 --- a/src/pages/20181112t6/src/index.css +++ /dev/null @@ -1,10 +0,0 @@ -body { - margin: 0; - padding: 0; - font-family: sans-serif; -} - -#root { - width: 100%; - height: 100%; -} \ No newline at end of file diff --git a/src/pages/20181112t6/src/index.html b/src/pages/20181112t6/src/index.html index f650d57..a8a0938 100644 --- a/src/pages/20181112t6/src/index.html +++ b/src/pages/20181112t6/src/index.html @@ -3,17 +3,21 @@ - Examples - + + +
+ \ No newline at end of file diff --git a/src/pages/20181112t6/src/index.js b/src/pages/20181112t6/src/index.js index 72daeff..6f1e673 100644 --- a/src/pages/20181112t6/src/index.js +++ b/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(, document.getElementById('root')); diff --git a/src/pages/20181112t6/src/index.styl b/src/pages/20181112t6/src/index.styl new file mode 100644 index 0000000..2206c53 --- /dev/null +++ b/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;} \ No newline at end of file diff --git a/task/task.js b/task/task.js index a91dc40..ad8a218 100644 --- a/task/task.js +++ b/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); } } diff --git a/task/webpack.react.js b/task/webpack.react.js index 1973ab2..4a34e74 100644 --- a/task/webpack.react.js +++ b/task/webpack.react.js @@ -27,14 +27,18 @@ let _webpackConfig = { { test: /\.css$/, use: ['style-loader', 'css-loader'] - } + }, + { + test: /\.styl$/, + use: ['style-loader', 'css-loader', 'stylus-loader'] + } ] }, plugins:[] }; exports.run = (paths, command) => { - + //入口文件 _webpackConfig.entry = path.join(paths.targetPath, 'src', 'index.js'); @@ -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)); } }); diff --git a/template/react/config.json b/template/react/config.json index 557259f..cefa755 100644 --- a/template/react/config.json +++ b/template/react/config.json @@ -1,7 +1,9 @@ { "template": "react", - "style": "css", - "proxy": { - "/api": "http://localhost:3000" - } + "https": false, + "proxy":[{ + "context": ["/api"], + "target": "http://localhost:8080/", + "secure": false + }] } \ No newline at end of file