-
Notifications
You must be signed in to change notification settings - Fork 0
/
a.html
153 lines (148 loc) · 4.57 KB
/
a.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html ng-app>
<head>
<title>在线聊天</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="js/controllers.js"></script>
<link rel="shortcut icon" href="img/favicon.ico">
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>
<!--<script src="js/togetherjs-min.js"></script>-->
<script type="text/javascript" src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js">
<script src="js/angular.min.js"></script>
<script>
var socket=new WebSocket('ws://192.168.0.38:80');
socket.onopen=function(event){
socket.send('来了一个人a');
};
socket.onclose=function(event){
socket.send('走了一个人');
console.log('close',event);
};
socket.onmessage=function(event){
console.log('world',event);
time=new Date();
box=document.getElementById("talkbox");
$("#result").append('<p style="font-size:20px;font-family:Microsoft Yahei,Consolas;">'+time.toLocaleTimeString()+'<br>'+event.data+'</p><hr>');
box.scrollTop=box.scrollHeight;
};
$(document).ready(function(){
$("#btn").click(function(){
if($('#nickname').val() == "")
{
$("#innick").show();
return false;
}
$("#innick").hide();
if($("#txt").val() == "")
{
$("#in").show();
$('#txt').focus();
return false;
}
else
{
socket.send($("#txt").val());
$('#txt').val('');
$('#txt').focus();
$("#in").hide();
}
});
});
$(document).ready(function(){
$("#test").click(function(){
$.post("/a.c",
{name:"abc",city:"bj"},
function(data,status){
$("#result").append(data+status);
});
});
});
</script>
</head>
<body style="background-image:url(img/index_back.jpg)">
<a href="https://github.com/larusx/http_server.git"><img style="position: fixed; top: 0; left: 0; border: 0;" src="img/forkme.png" alt="Join us on GitHub"/></a>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="page-header" ng-controller="PhoneListCtrl">
<h1>
在线聊天 <small style="color:#FF0066">HTML5!</small>
</h1>
<!--<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
</li>
</ul>-->
<!--<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>-->
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#f">
上传文件点我
</button>
</div>
<div id="f" class="collapse">
<form enctype="multipart/form-data" action="/" method="POST"
style="font-family:Microsoft Yahei;font-size:20px;">
上传文件:
<input type="file" multiple size="80" name="file1" id='f1'>
<input type="submit" value="确定">
</form>
</div>
<textarea id="txt"></textarea>
<button class="btn btn-primary" id="btn">发送</button>
<button class="btn btn-info" id="clr">清空</button>
<div class="alert alert-danger fade in" style="display:none" id='in'>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4>请输入内容</h4>
</div>
<div class="alert alert-danger fade in" style="display:none" id='innick'>
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>请输入昵称</h4>
</div>
<br>
<button class="btn btn-success" id="name" type="button" data-toggle="collapse" data-target="#nick">输入昵称
</button>
<div id="nick" class="collapse">
<input id="nickname" type="text" placeholder="请输入昵称..按回车确定.">
<button class='btn btn-inverse' id='nickOK'>确定</button>
</div>
<h3>聊天窗口，按回车发送消息</h3>
<div id="talkbox"
style="overflow:auto;height:350px;width:650px;background-color:#996699;color:#ffffff;border:2px solid #666666;padding:5px;">
<p id="result"></p>
</div>
</div>
</div>
<div>
<script>
$("#clr").click(function () {
$('#result').text("");
$('#txt').focus();
});
$("#txt").keydown(function (event) {
if (event.keyCode == 13) {
$("#btn").trigger("click");
/*$("#txt").focus();*/
}
});
$("#txt").keyup(function () {
if (event.keyCode == 13)
$("#txt").val('');
$("#txt").focus();
});
$("#nickname").keypress(function (event) {
if (event.keyCode == 13)
$("#nickOK").trigger("click");
});
$('#nickOK').click(function () {
if ($('#nickname').val() == "")
$('#innick').show();
else {
$('#innick').hide();
$("#name").trigger("click");
socket.send('/nick' + $('#nickname').val());
$('#txt').focus();
}
});
</script>
</body>
</html>