Skip to content

Commit 9290ac7

Browse files
author
unknown
committed
调整完样式和头像、昵称业务模型、准备接入redis数据
1 parent 3f5af5f commit 9290ac7

File tree

3 files changed

+73
-37
lines changed

3 files changed

+73
-37
lines changed

‎chat.html‎

Lines changed: 51 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link href="./static/css/chat.css" rel="stylesheet">
1111
</head>
1212
<body>
13-
<div class="container bootstrap snippet">
13+
<div id="chat" class="container bootstrap snippet">
1414
<div class="tile tile-alt" id="messages-main">
1515
<div class="ms-menu">
1616
<div class="ms-user clearfix">
@@ -30,7 +30,7 @@
3030
</div>
3131
</div>
3232

33-
<div class="list-group lg-alt">
33+
<div id="user-list" class="list-group lg-alt">
3434
<a class="list-group-item media" href="">
3535
<div class="pull-left">
3636
<img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-avatar">
@@ -192,14 +192,14 @@
192192
</div>
193193
<div class="media-body">
194194
<div class="mf-content">
195-
{{msg}}
195+
{{msg.body}}
196196
</div>
197-
<small class="mf-date"><i class="fa fa-clock-o"></i> 20/02/2015 at 09:00</small>
197+
<small class="mf-date"><i class="fa fa-clock-o"></i> {{new Date(parseInt(msg.timestamp) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ')}}</small>
198198
</div>
199199
</div>
200200
</div>
201201
<div class="msb-reply">
202-
<textarea placeholder="What's on your mind..."></textarea>
202+
<textarea placeholder="[Ctrl+enter 发送消息]"></textarea>
203203
<button id="send"><i class="fa fa-paper-plane-o"></i></button>
204204
</div>
205205
</div>
@@ -208,35 +208,52 @@
208208
<script src="./static/bootstrap/js/bootstrap.min.js"></script>
209209
<script src="./static/vue/vue.min.js"></script>
210210
<script type="text/javascript">
211-
var msgvm = new Vue({
212-
el: '#msg-content',
213-
data: {
214-
msgs: [
215-
]
216-
}
217-
})
218-
$(function () {
219-
$('.ms-body').height($(window).height());
220-
var ws = new WebSocket("ws://192.168.1.7:9502");
221-
ws.onopen = function (event) {
222-
console.log('成功连接ws服务器!');
223-
ws.send("接入服务器");
224-
};
225-
ws.onmessage = function (event) {
226-
console.log(event.data);
227-
msgvm.msgs.push(event.data);
228-
};
229-
$('#send').click(function () {
230-
var content = $(this).prev().val();
231-
console.log(content);
232-
ws.send(content);
233-
});
234-
if ($('#ms-menu-trigger')[0]) {
235-
$('body').on('click', '#ms-menu-trigger', function () {
236-
$('.ms-menu').toggleClass('toggled');
237-
});
238-
}
239-
});
211+
var msgvm = new Vue({
212+
el: '#msg-content',
213+
data: {
214+
msgs: [
215+
]
216+
}
217+
});
218+
$(function () {
219+
var ws = new WebSocket("ws://192.168.33.10:9502");
220+
setHeight();
221+
$(window).bind('resize', function () {
222+
setHeight();
223+
});
224+
$(document).keydown(function (e) {
225+
if (e.which === 13&&e.ctrlKey) {
226+
$('#send').trigger('click');
227+
}
228+
});
229+
ws.onopen = function (event) {
230+
ws.send("接入服务器");
231+
};
232+
ws.onmessage = function (event) {
233+
console.log(event.data);
234+
var data = JSON.parse(event.data);
235+
msgvm.msgs.push(data);
236+
$('.msg-content').animate({scrollTop:$(".msg-content").get(0).scrollHeight},'slow'); //滚动条自动到底部
237+
};
238+
$('#send').click(function () {
239+
var content = $(this).prev().val();
240+
if(content){
241+
ws.send(content);
242+
$(this).prev().val('');
243+
}
244+
});
245+
if ($('#ms-menu-trigger')[0]) {
246+
$('body').on('click', '#ms-menu-trigger', function () {
247+
$('.ms-menu').toggleClass('toggled');
248+
});
249+
}
250+
});
251+
function setHeight() {
252+
$('.ms-body').height($(window).height() - 200);
253+
$('.ms-menu').height($(window).height() - 67 - 200);
254+
$('#user-list').height($(window).height() - 67 - 200 - 67 - 62);
255+
$('.msg-content').height($(window).height() - 60 - 120 - 200);
256+
}
240257
</script>
241258
</body>
242259
</html>

‎static/css/chat.css‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ body {
1515
color: #767676;
1616
background-color: #edecec;
1717
}
18-
18+
#chat{
19+
margin-top:100px;
20+
margin-bottom:100px;
21+
}
1922
#messages-main {
2023
position: relative;
2124
margin: 0 auto;
@@ -35,6 +38,9 @@ body {
3538
width: 240px;
3639
background: #fff;
3740
}
41+
#user-list{
42+
overflow-y: scroll;
43+
}
3844
@media (min-width:768px) {
3945
#messages-main .ms-body {
4046
padding-left: 240px;
@@ -105,11 +111,17 @@ body {
105111
.message-feed.right .mf-content {
106112
background: #eee;
107113
}
114+
#msg-content{
115+
overflow-y: scroll;
116+
}
108117
.mf-content {
109118
padding: 12px 17px 13px;
110119
border-radius: 2px;
111120
display: inline-block;
112-
max-width: 80%
121+
min-width:120px;
122+
/*max-width: 80%;*/
123+
word-wrap: break-word;
124+
word-break: break-all;
113125
}
114126
.mf-date {
115127
display: block;

‎websocket.php‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,14 @@
1616
// $server->push($frame->fd, json_encode(["hello", "world"]));
1717
var_dump($server->connections);
1818
foreach ($server->connections as $fd) {
19-
$server->push($fd, json_encode($frame->data,JSON_UNESCAPED_UNICODE));
19+
$data = [
20+
'body'=>$frame->data,
21+
'nick'=>'张三',
22+
'avatar'=>'1.jpg',
23+
'timestamp'=> time(),
24+
'unique'=> md5(uniqid()),
25+
];
26+
$server->push($fd, json_encode($data,JSON_UNESCAPED_UNICODE));
2027
}
2128
});
2229

0 commit comments

Comments
 (0)