forked from zhaochl/HTML5
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathchatClient.html
More file actions
107 lines (99 loc) · 3.08 KB
/
chatClient.html
File metadata and controls
107 lines (99 loc) · 3.08 KB
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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#cc,#cb{margin:10px auto; width:800px; border:solid 1px #CCCCCC; height:500px; font-size:14px;}
#cc p{line-height:1.8; margin:0px; padding:0px;}
#cb{height:30px; border:0px;}
#aaad{display:none;}
#aaas{display:block;}
.a{color:#008040;}
.e{color:#F33;}
.b{color:#333;}
.c{color:#999;}
#autors{float:right; width:200px; height:480px; padding:10px 0px; overflow:auto; background-color:#F2F2F2;}
#content{float:left; width:580px; height:480px; padding:10px; }
#autors a{display:block; line-height:25px; color:#03C; text-decoration:none; padding:0px 10px;}
#autors .userck,#autors a:hover{background-color:#999; color:#FFF;}
</style>
</head>
<body>
<h2><a href="http://www.oschina.net/code/snippet_230665_21329">原文网址</a></h2>
<div id="cc">
<div id="content"></div>
<div id="autors">
<a href="javascript:;" 0nClick="ac('all',this)" class="userck">所有人</a>
</div>
</div>
<div id="cb">
<p id="aaas">
<span class="an1">设置昵称：</span>
<input type="text" maxlength="10" size="10" id="nicheg">
<input type="button" value="进入聊天室" 0nClick="aa()">
</p>
<p id="aaad">
<input type="text" maxlength="50" size="50" id="texts">
<input type="button" value="发送" 0nClick="ab()">
<input type="button" value="退出聊天室" 0nClick="az()">
</p>
</div>
<script src="http://www.yxsss.com/ui/p/a.js" type="text/javascript"></script>
<script>
var socket=null,content=A.$('content'),autors=A.$('autors'),key='all',user=[];
var an1s=document.getElementsByClassName('an1'),an2s=document.getElementsByClassName('an2');
function aa(){
var url='ws://115.28.78.184:8000';
var ming=A.$('nicheg').value.trim();
if(ming==''){
alert('昵称不能为空');
return false;
}
socket=new WebSocket(url);
socket.onopen=function(){
if(socket.readyState==1){
socket.send('type=add&ming='+ming);
}else{
content.appendChild('<p class="e">进入失败！<p>');
}
}
socket.onmessage=function(msg){
eval('var da='+msg.data);
if(da.add){
for(i in da.users){
if(typeof(user[i])=='undefined'){
var ob=A.$$('<a href="javascript:;" 0nClick="ac(\''+i+'\',this)">'+da.users[i]+'</a>');
user[i]=ob;
autors.appendChild(ob);
}
}
A.$('aaad').style.display='block';
A.$('aaas').style.display='none';
}
if(da.remove){
user[da.removekey].del();
content.appendChild(A.$$('<p class="c">'+da.nrong+'</p>'));
return ;
}
content.appendChild(A.$$('<p class="b">'+da.nrong+'</p>'));
}
socket.onclose=function(){
content.appendChild(A.$$('<p class="c">退出聊天室</p>'));
}
}
function ac(k,t){
key=k;
t.parentNode.children.rcss('userck','');
t.rcss('','userck');
}
function ab(){
socket.send('type=ltiao&nr='+A.$('texts').value+'&key='+key);
}
function az(){
socket.close();
socket=null;
}
</script>
</body>
</html>