优化工作流
This commit is contained in:
dengtongyu committed
1 parent
b7c0e5e2ac
commit
3c07f2fd30
15 files changed
+442
-34
No files matched your search
@@ -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
|
||||
}]
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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'));
|
||||
@@ -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;}
|
||||
Reference in new issue
Block a user