服务端：
|
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
|
<?php//send用户加入//send1发送信息//send2退出登录error_reporting(E_ALL ^ E_NOTICE);ob_implicit_flush();//file_put_contents('lz.text','123', FILE_APPEND);$sk=new Sock('127.0.0.1',8000);$sk->run();class Sock{ public $sockets; public $users; public $master; private $sda=array();//已接收的数据 private $slen=array();//数据总长度 private $sjen=array();//接收数据的长度 private $ar=array();//加密key private $n=array(); public function __construct($address, $port){ $this->master=$this->WebSocket($address, $port);//resource(2, Socket) //服务器监听 var_dump("master:"); var_dump($this->master); $this->sockets=array($this->master);//array (size=1) 0 => resource(2, Socket) 。运行两个php还是这样 //var_dump($this->sockets); //file_put_contents('lz.text',var_dump($this->sockets), FILE_APPEND); } function run(){ while(true){ $changes=$this->sockets;//$changes由多变1,但$this->sockets却只是稳定的+1; $write=NULL; $except=NULL; //1.运行select()系统调用在给定阵列插座与指定的超时 //2.没有接收到数据就会一直处于阻塞状态, //3.若没有client过来,直阻塞进程,直到有client访问,返回1。 //4.此时返回的changes,不是曾经的changes。虽然还只是一条记录,但已经不是服务器而是客户端 /*select的特殊作用：！！！！！！！ 初始为array(0=>resource(2, Socket)) 1,初始状态返回为array(0=>resource(2, Socket))。但socket_accept可以得到resource(3, Socket) 2,初始状态返回为array(0=>resource(2, Socket),1=>resource(3,Socket))。 客户来的客户为resource(3,Socket)。则返回的数据为resource(3,Socket).!!! */ var_dump($changes); $rr=socket_select($changes,$write,$except,NULL); var_dump($changes); var_dump("---*---"); //exit; /* file_put_contents('lz.text',json_encode($changes), FILE_APPEND); file_put_contents('lz.text','-----', FILE_APPEND);*/ foreach($changes as $sock){ //连接主机的client //$this->master永远是 resource(2, Socket)。相当于一个缓存。两种情况,1:为空,使进程阻塞。2：存刚接收的client。 if($sock==$this->master){ //---此处只用来存数据了//在socket套接字已创建使用socket_create()，必将与socket_bind()名字，告诉听连接socket_listen()，这个函数将接受传入的连接，插座。//一旦成功连接，将返回一个!!新的套接字资源！！，该资源可用于通信。如果套接字上有多个连接，则第一个将被使用。//如果没有挂起的连接，socket_accept()将阻塞直到连接成为现在。如果使用了非阻塞套接字已socket_set_blocking()或socket_set_nonblock()，错误将返回。//返回socket_accept()插座资源不得用于接受新的连接。原来的听插座插座，但是,仍然是开放的，可以重复使用。 $client=socket_accept($this->master); //resource(3, Socket)。表示接受请求,并创建一个子链接!! //var_dump($client); //exit; $key=uniqid(); $this->sockets[]=$client; $this->users[$key]=array( 'socket'=>$client, 'shou'=>false ); /* array (size=1) '57d607085f92a' => //$key array (size=2) 'socket' => resource(3, Socket) //$socket的表现都一样,只有通过$key区分 'shou' => boolean false */ // file_put_contents('lz.text',json_encode($this->users), FILE_APPEND); }else{ //---此处服务器与客户端发信息 $len=0; $buffer=''; do{ /* int socket_recv ( resource socket, string &buf, int len, int flags ) resource socket 是生成的套接字 string &buf 是接收缓冲区 int len 是你打算接收的长度 int flags 是一个标志 0x1 数据应该带外发送，所谓带外数据就是TCP紧急数据 0x2 使有用的数据复制到缓冲区内，但并不从系统缓冲区内删除。 0x4 不要将包路由出去。 以上三项与sock.h文件中定义完全相同 0x8 数据完整记录 0x100 数据完整处理 */ $l=socket_recv($sock,$buf,1000,0);//原来取数据是一个缓慢的过程,要一次一次取数据,并计算每次buf的长度,让总长度不超过设定值 //var_dump($l); // exit; // file_put_contents('lz.text','socket_recv', FILE_APPEND); $len+=$l; $buffer.=$buf; }while($l==1000); $k=$this->search($sock);//跟据sock返回key值 if($len<7){ //发过来的消息太短了,系统就判断 断了,断掉链接。 $this->send2($k);//用户退出。1关闭这个$key值对应的socket、删除这条key记录。将sockets数组对象重新排列。 //2 continue; } if(!$this->users[$k]['shou']){//判断用户的握手字段是true？否则重新握手。 $this->woshou($k,$buffer); //file_put_contents('lz.text','woshou', FILE_APPEND); }else{ //如果用户已经握手,则与用户之间进行通信。终于可以发消息了！ $buffer = $this->uncode($buffer,$k); //返编译 if($buffer==false){ continue; } //var_dump($bufffer); //exit; $this->send($k,$buffer); } } } } } function close($k){ socket_close($this->users[$k]['socket']); unset($this->users[$k]); $this->sockets=array($this->master); foreach($this->users as $v){ $this->sockets[]=$v['socket']; } $this->e("key:$k close"); } function search($sock){ foreach ($this->users as $k=>$v){ if($sock==$v['socket']) return $k; } return false; } function WebSocket($address,$port){ //服务器监听 //创建并返回一个套接字resource，也称作一个通讯节点。一个典型的网络连接由 2 个套接字构成，一个运行在客户端，另一个运行在服务器端。 //协议，类型，具体协议 $server = socket_create(AF_INET, SOCK_STREAM, SOL_TCP); //resource(2, Socket) //file_put_contents('lz.text',$server, FILE_APPEND);//supplied resource is not a valid stream resource //返回bool.套接字resource,协议级别,可用的socket选项,值。 $r=socket_set_option($server, SOL_SOCKET, SO_REUSEADDR, 1);//boolean true //绑定 address 到 socket。 该操作必须是在使用 socket_connect() 或者 socket_listen() 建立一个连接之前。 $r2=socket_bind($server, $address, $port);//boolean true //在socket套接字已创建使用socket_create()定界与socket_bind()名称，它可以告诉听套接字传入的连接. $r3=socket_listen($server);//boolean true $this->e('Server Started : '.date('Y-m-d H:i:s')); $this->e('Listening on : '.$address.' port '.$port); return $server; } function woshou($k,$buffer){ //对接收到的buffer处理,并回馈握手！！ $buf = substr($buffer,strpos($buffer,'Sec-WebSocket-Key:')+18); $key = trim(substr($buf,0,strpos($buf,"\r\n"))); $new_key = base64_encode(sha1($key."258EAFA5-E914-47DA-95CA-C5AB0DC85B11",true)); $new_message = "HTTP/1.1 101 Switching Protocols\r\n"; $new_message .= "Upgrade: websocket\r\n"; $new_message .= "Sec-WebSocket-Version: 13\r\n"; $new_message .= "Connection: Upgrade\r\n"; $new_message .= "Sec-WebSocket-Accept: " . $new_key . "\r\n\r\n"; socket_write($this->users[$k]['socket'],$new_message,strlen($new_message));//sokcet,buffer(缓冲区),长度 $this->users[$k]['shou']=true; return true; } function uncode($str,$key){ //返编译 $mask = array(); $data = ''; $msg = unpack('H*',$str);//unpack() 函数从二进制字符串对数据进行解包。 $head = substr($msg[1],0,2); if ($head == '81' && !isset($this->slen[$key])) { $len=substr($msg[1],2,2); $len=hexdec($len); if(substr($msg[1],2,2)=='fe'){ $len=substr($msg[1],4,4); $len=hexdec($len);//hexdec() 函数把十六进制转换为十进制。 $msg[1]=substr($msg[1],4); }else if(substr($msg[1],2,2)=='ff'){ $len=substr($msg[1],4,16); $len=hexdec($len); $msg[1]=substr($msg[1],16); } $mask[] = hexdec(substr($msg[1],4,2)); $mask[] = hexdec(substr($msg[1],6,2)); $mask[] = hexdec(substr($msg[1],8,2)); $mask[] = hexdec(substr($msg[1],10,2)); $s = 12; $n=0; }else if($this->slen[$key] > 0){ $len=$this->slen[$key]; $mask=$this->ar[$key]; $n=$this->n[$key]; $s = 0; } $e = strlen($msg[1])-2; for ($i=$s; $i<= $e; $i+= 2) { $data .= chr($mask[$n%4]^hexdec(substr($msg[1],$i,2))); $n++; } $dlen=strlen($data); if($len > 255 && $len > $dlen+intval($this->sjen[$key])){ $this->ar[$key]=$mask; $this->slen[$key]=$len; $this->sjen[$key]=$dlen+intval($this->sjen[$key]); $this->sda[$key]=$this->sda[$key].$data; $this->n[$key]=$n; return false; }else{ unset($this->ar[$key],$this->slen[$key],$this->sjen[$key],$this->n[$key]); $data=$this->sda[$key].$data; unset($this->sda[$key]); return $data; } } function code($msg){ //编译 $frame = array(); $frame[0] = '81'; $len = strlen($msg); if($len < 126){ $frame[1] = $len<16?'0'.dechex($len):dechex($len); }else if($len < 65025){ $s=dechex($len); $frame[1]='7e'.str_repeat('0',4-strlen($s)).$s; }else{ $s=dechex($len); $frame[1]='7f'.str_repeat('0',16-strlen($s)).$s; } $frame[2] = $this->ord_hex($msg); $data = implode('',$frame); return pack("H*", $data); } function ord_hex($data) { $msg = ''; $l = strlen($data); for ($i= 0; $i<$l; $i++) { $msg .= dechex(ord($data{$i})); } return $msg; } //用户加入 function send($k,$msg){ parse_str($msg,$g);//把查询字符串解析到变量中 $ar=array(); if($g['type']=='add'){ $this->users[$k]['name']=$g['ming']; $ar['type']='add'; $ar['name']=$g['ming']; $key='all'; }else{ $ar['nrong']=$g['nr']; $key=$g['key']; } $this->send1($k,$ar,$key); } function getusers(){ $ar=array(); foreach($this->users as $k=>$v){ $ar[]=array('code'=>$k,'name'=>$v['name']); } return $ar; } //$k 发信息人的code $key接受人的 code function send1($k,$ar,$key='all'){ $ar['code1']=$key; $ar['code']=$k; $ar['time']=date('m-d H:i:s'); $str = $this->code(json_encode($ar)); if($key=='all'){ $users=$this->users; if($ar['type']=='add'){ $ar['type']='madd'; $ar['users']=$this->getusers(); $str1 = $this->code(json_encode($ar)); socket_write($users[$k]['socket'],$str1,strlen($str1));//发送者 unset($users[$k]); } foreach($users as $v){ socket_write($v['socket'],$str,strlen($str));//接收者 } }else{ socket_write($this->users[$k]['socket'],$str,strlen($str));//发送者 socket_write($this->users[$key]['socket'],$str,strlen($str));//接收者 } } //用户退出 function send2($k){ $this->close($k); $ar['type']='rmove'; $ar['nrong']=$k; $this->send1(false,$ar,'all'); } function e($str){ //$path=dirname(__FILE__).'/log.txt'; $str=$str."\n"; //error_log($str,3,$path); echo iconv('utf-8','gbk//IGNORE',$str); }}?> |
客户端：
|
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
|
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/><title>HTML5 websocket 网页聊天室 javascript php</title><style type="text/css">body,p{margin:0px; padding:0px; font-size:14px; color:#333; font-family:Arial, Helvetica, sans-serif;}#ltian,.rin{width:98%; margin:5px auto;}#ltian{border:1px #ccc solid;overflow-y:auto; overflow-x:hidden; position:relative;}#ct{margin-right:111px; height:100%;overflow-y:auto;overflow-x: hidden;}#us{width:110px; overflow-y:auto; overflow-x:hidden; float:right; border-left:1px #ccc solid; height:100%; background-color:#F1F1F1;}#us p{padding:3px 5px; color:#08C; line-height:20px; height:20px; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}#us p:hover,#us p:active,#us p.ck{background-color:#069; color:#FFF;}#us p.my:hover,#us p.my:active,#us p.my{color:#333;background-color:transparent;}button{float:right; width:80px; height:35px; font-size:18px;}input{width:100%; height:30px; padding:2px; line-height:20px; outline:none; border:solid 1px #CCC;}.rin p{margin-right:160px;}.rin span{float:right; padding:6px 5px 0px 5px; position:relative;}.rin span img{margin:0px 3px; cursor:pointer;}.rin span form{position:absolute; width:25px; height:25px; overflow:hidden; opacity:0; top:5px; right:5px;}.rin span input{width:180px; height:25px; margin-left:-160px; cursor:pointer}#ct p{padding:5px; line-height:20px;}#ct a{color:#069; cursor:pointer;}#ct span{color:#999; margin-right:10px;}.c2{color:#999;}.c3{background-color:#DBE9EC; padding:5px;}.qp{position:absolute; font-size:12px; color:#666; top:5px; right:130px; text-decoration:none; color:#069;}#ems{position:absolute; z-index:5; display:none; top:0px; left:0px; max-width:230px; background-color:#F1F1F1; border:solid 1px #CCC; padding:5px;}#ems img{width:44px; height:44px; border:solid 1px #FFF; cursor:pointer;}#ems img:hover,#ems img:active{border-color:#A4B7E3;}#ems a{color:#069; border-radius:2px; display:inline-block; margin:2px 5px; padding:1px 8px; text-decoration:none; background-color:#D5DFFD;}#ems a:hover,#ems a:active,#ems a.ck{color:#FFF; background-color:#069;}.tc{text-align:center; margin-top:5px;}</style></head><body><div id="ltian"> <div id="us" class="jb"></div> <div id="ct"></div> <a href="javascript:;" class="qp" onClick="this.parentNode.children[1].innerHTML=''">清屏</a></div><div class="rin"> <button id="sd">发送</button> <span><img src="http://www.yxsss.com/ui/sk/t.png" title="表情" id="imgbq"><img src="http://www.yxsss.com/ui/sk/e.png" title="上传图片"><form><input type="file" title="上传图片" id="upimg"></form></span> <p><input id="nrong"></p></div><div id="ems"><p></p><p class="tc"></p></div><script>if(typeof(WebSocket)=='undefined'){ alert('你的浏览器不支持 WebSocket ，推荐使用Google Chrome 或者 Mozilla Firefox'); }</script><script src="http://www.yxsss.com/ui/p/a.js" type="text/javascript"></script><script>(function(){ var key='all',mkey; var users={}; var url='ws://127.0.0.1:8000'; var so=false,n=false; var lus=A.$('us'),lct=A.$('ct'); function st(){ n=prompt('请给自己取一个响亮的名字：'); n=n.substr(0,16); if(!n){ return ; } so=new WebSocket(url); so.onopen=function(){ if(so.readyState==1){ alert('888'); so.send('type=add&ming='+n); } } so.onclose=function(){ so=false; lct.appendChild(A.$$('<p class="c2">退出聊天室</p>')); } so.onmessage=function(msg){ eval('var da='+msg.data); var obj=false,c=false; if(da.type=='add'){ var obj=A.$$('<p>'+da.name+'</p>'); lus.appendChild(obj); cuser(obj,da.code); obj=A.$$('<p><span>['+da.time+']</span>欢迎<a>'+da.name+'</a>加入</p>'); c=da.code; }else if(da.type=='madd'){ mkey=da.code; da.users.unshift({'code':'all','name':'大家'}); for(var i=0;i<da.users.length;i++){ var obj=A.$$('<p>'+da.users[i].name+'</p>'); lus.appendChild(obj); if(mkey!=da.users[i].code){ cuser(obj,da.users[i].code); }else{ obj.className='my'; document.title=da.users[i].name; } } obj=A.$$('<p><span>['+da.time+']</span>欢迎'+da.name+'加入</p>'); users.all.className='ck'; } if(obj==false){ if(da.type=='rmove'){ var obj=A.$$('<p class="c2"><span>['+da.time+']</span>'+users[da.nrong].innerHTML+'退出聊天室</p>'); lct.appendChild(obj); users[da.nrong].del(); delete users[da.nrong]; }else{ da.nrong=da.nrong.replace(/{\\(\d+)}/g,function(a,b){ return '<img src="sk/'+b+'.gif">'; }).replace(/^data\:image\/png;base64\,.{50,}$/i,function(a){ return '<img src="'+a+'">'; }); //da.code 发信息人的code if(da.code1==mkey){ obj=A.$$('<p class="c3"><span>['+da.time+']</span><a>'+users[da.code].innerHTML+'</a>对我说：'+da.nrong+'</p>'); c=da.code; }else if(da.code==mkey){ if(da.code1!='all') obj=A.$$('<p class="c3"><span>['+da.time+']</span>我对<a>'+users[da.code1].innerHTML+'</a>说：'+da.nrong+'</p>'); else obj=A.$$('<p><span>['+da.time+']</span>我对<a>'+users[da.code1].innerHTML+'</a>说：'+da.nrong+'</p>'); c=da.code1; }else if(da.code==false){ obj=A.$$('<p><span>['+da.time+']</span>'+da.nrong+'</p>'); }else if(da.code1){ obj=A.$$('<p><span>['+da.time+']</span><a>'+users[da.code].innerHTML+'</a>对'+users[da.code1].innerHTML+'说：'+da.nrong+'</p>'); c=da.code; } } } if(c){ obj.children[1].onclick=function(){ users[c].onclick(); } } lct.appendChild(obj); lct.scrollTop=Math.max(0,lct.scrollHeight-lct.offsetHeight); } } A.$('sd').onclick=function(){ if(!so){ return st(); } var da=A.$('nrong').value.trim(); if(da==''){ alert('内容不能为空'); return false; } A.$('nrong').value=''; so.send('nr='+esc(da)+'&key='+key); } A.$('nrong').onkeydown=function(e){ var e=e||event; if(e.keyCode==13){ A.$('sd').onclick(); } } function esc(da){ da=da.replace(/</g,'<').replace(/>/g,'>').replace(/\"/g,'"'); return encodeURIComponent(da); } function cuser(t,code){ users[code]=t; t.onclick=function(){ t.parentNode.children.rcss('ck',''); t.rcss('','ck'); key=code; } } A.$('ltian').style.height=(document.documentElement.clientHeight - 70)+'px'; st(); var bq=A.$('imgbq'),ems=A.$('ems'); var l=80,r=4,c=5,s=0,p=Math.ceil(l/(r*c)); var pt='sk/'; bq.onclick=function(e){ var e=e||event; if(!so){ return st(); } ems.style.display='block'; document.onclick=function(){ gb(); } ct(); try{e.stopPropagation();}catch(o){} } for(var i=0;i<p;i++){ var a=A.$$('<a href="javascript:;">'+(i+1)+'</a>'); ems.children[1].appendChild(a); ef(a,i); } ems.children[1].children[0].className='ck'; function ct(){ var wz=bq.weiz(); with(ems.style){ top=wz.y-242+'px'; left=wz.x+bq.offsetWidth-235+'px'; } } function ef(t,i){ t.onclick=function(e){ var e=e||event; s=i*r*c; ems.children[0].innerHTML=''; hh(); this.parentNode.children.rcss('ck',''); this.rcss('','ck'); try{e.stopPropagation();}catch(o){} } } function hh(){ var z=Math.min(l,s+r*c); for(var i=s;i<z;i++){ var a=A.$$('<img src="'+pt+i+'.gif">'); hh1(a,i); ems.children[0].appendChild(a); } ct(); } function hh1(t,i){ t.onclick=function(e){ var e=e||event; A.$('nrong').value+='{\\'+i+'}'; if(!e.ctrlKey){ gb(); } try{e.stopPropagation();}catch(o){} } } function gb(){ ems.style.display=''; A.$('nrong').focus(); document.onclick=''; } hh(); A.on(window,'resize',function(){ A.$('ltian').style.height=(document.documentElement.clientHeight - 70)+'px'; ct(); }) var fimg=A.$('upimg'); var img=new Image(); var dw=400,dh=300; A.on(fimg,'change',function(ev){ if(!so){ st(); return false; } if(key=='all'){ alert('由于资源限制 发图只能私聊'); return false; } var f=ev.target.files[0]; if(f.type.match('image.*')){ var r = new FileReader(); r.onload = function(e){ img.setAttribute('src',e.target.result); }; r.readAsDataURL(f); } }); img.onload=function(){ ih=img.height,iw=img.width; if(iw/ih > dw/dh && iw > dw){ ih=ih/iw*dw; iw=dw; }else if(ih > dh){ iw=iw/ih*dh; ih=dh; } var rc = A.$$('canvas'); var ct = rc.getContext('2d'); rc.width=iw; rc.height=ih; ct.drawImage(img,0,0,iw,ih); var da=rc.toDataURL(); so.send('nr='+esc(da)+'&key='+key); } })();</script></body></html> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
