纯粹copy来的哦。
要在php中使用socket，首先需要再php.ini中打开扩展，将extension=php_sockets.dll前的；去除。在PHPinfo（）中可以看到socket模块状态为enabled说明该模块可以启动。
创建一个聊天室。
client端代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=http://www.likecs.com/"utf-8"> 5 <meta name=http://www.likecs.com/"viewport" content=http://www.likecs.com/"width=device-width, initial-scale=1, user-scalable=no"/> 6 <title>HTML5 websocket 网页聊天室 javascript php</title> 7 <style type=http://www.likecs.com/"text/css"> 8 body,p{margin:0px; padding:0px; font-size:14px; color:#333; font-family:Arial, Helvetica, sans-serif;} 9 #ltian,.rin{width:98%; margin:5px auto;} 10 #ltian{border:1px #ccc solid;overflow-y:auto; overflow-x:hidden; position:relative;} 11 #ct{margin-right:111px; height:100%;overflow-y:auto;overflow-x: hidden;} 12 #us{width:110px; overflow-y:auto; overflow-x:hidden; float:right; border-left:1px #ccc solid; height:100%; background-color:#F1F1F1;} 13 #us p{padding:3px 5px; color:#08C; line-height:20px; height:20px; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} 14 #us p:hover,#us p:active,#us p.ck{background-color:#069; color:#FFF;} 15 #us p.my:hover,#us p.my:active,#us p.my{color:#333;background-color:transparent;} 16 button{float:right; width:80px; height:35px; font-size:18px;} 17 input{width:100%; height:30px; padding:2px; line-height:20px; outline:none; border:solid 1px #CCC;} 18 .rin p{margin-right:160px;} 19 .rin span{float:right; padding:6px 5px 0px 5px; position:relative;} 20 .rin span img{margin:0px 3px; cursor:pointer;} 21 .rin span form{position:absolute; width:25px; height:25px; overflow:hidden; opacity:0; top:5px; right:5px;} 22 .rin span input{width:180px; height:25px; margin-left:-160px; cursor:pointer} 23 24 #ct p{padding:5px; line-height:20px;} 25 #ct a{color:#069; cursor:pointer;} 26 #ct span{color:#999; margin-right:10px;} 27 .c2{color:#999;} 28 .c3{background-color:#DBE9EC; padding:5px;} 29 .qp{position:absolute; font-size:12px; color:#666; top:5px; right:130px; text-decoration:none; color:#069;} 30 #ems{position:absolute; z-index:5; display:none; top:0px; left:0px; max-width:230px; background-color:#F1F1F1; border:solid 1px #CCC; padding:5px;} 31 #ems img{width:44px; height:44px; border:solid 1px #FFF; cursor:pointer;} 32 #ems img:hover,#ems img:active{border-color:#A4B7E3;} 33 #ems a{color:#069; border-radius:2px; display:inline-block; margin:2px 5px; padding:1px 8px; text-decoration:none; background-color:#D5DFFD;} 34 #ems a:hover,#ems a:active,#ems a.ck{color:#FFF; background-color:#069;} 35 .tc{text-align:center; margin-top:5px;} 36 </style> 37 </head> 38 39 <body> 40 <div id=http://www.likecs.com/"ltian"> 41 <div id=http://www.likecs.com/"us" class=http://www.likecs.com/"jb"></div> 42 <div id=http://www.likecs.com/"ct"></div> 43 <a href=http://www.likecs.com/"javascript:;" class=http://www.likecs.com/"qp" onClick=http://www.likecs.com/"this.parentNode.children[1].innerHTML=\'\'">清屏</a> 44 </div> 45 <div class=http://www.likecs.com/"rin"> 46 <button id=http://www.likecs.com/"sd">发送</button> 47 <span><img src=http://www.likecs.com/"" title=http://www.likecs.com/"表情" id=http://www.likecs.com/"imgbq"><img src=http://www.likecs.com/"" title=http://www.likecs.com/"上传图片"><form><input type=http://www.likecs.com/"file" title=http://www.likecs.com/"上传图片" id=http://www.likecs.com/"upimg"></form></span> 48 <p><input id=http://www.likecs.com/"nrong"></p> 49 </div> 50 <div id=http://www.likecs.com/"ems"><p></p><p class=http://www.likecs.com/"tc"></p></div> 51 <script> 52 if(typeof(WebSocket)==http://www.likecs.com/\'undefined\'){ 53 alert(\'你的浏览器不支持 WebSocket ，推荐使用Google Chrome 或者 Mozilla Firefox\'); 54 } 55 </script> 56 <script src=http://www.likecs.com/"" type=http://www.likecs.com/"text/javascript"></script> 57 <script> 58 (function(){ 59 var key=http://www.likecs.com/\'all\',mkey; 60 var users=http://www.likecs.com/{}; 61 var url=http://www.likecs.com/\'ws://127.0.0.1:8000\'; 62 var so=http://www.likecs.com/false,n=http://www.likecs.com/false; 63 var lus=A.$(\'us\'),lct=A.$(\'ct\'); 64 function st(){ 65 n=prompt(\'请给自己取一个响亮的名字：\'); 66 n=n.substr(0,16); 67 if(!n){ 68 return ; 69 } 70 //创建socket，注意URL的格式：ws://ip:端口 71 so=http://www.likecs.com/new WebSocket(url); 72 //握手监听函数 73 so.onopen=http://www.likecs.com/function(){ 74 //状态为1证明握手成功，然后把client自定义的名字发送过去 75 if(so.readyState==http://www.likecs.com/1){ 76 so.send(\'type=add&ming=http://www.likecs.com/\'+n); 77 } 78 } 79 80 //握手失败或者其他原因连接socket失败，则清除so对象并做相应提示操作 81 so.onclose=http://www.likecs.com/function(){ 82 so=http://www.likecs.com/false; 83 lct.appendChild(A.$$(\'<p>退出聊天室</p>\')); 84 } 85 86 //数据接收监听，接收服务器推送过来的信息，返回的数据给msg，然后进行显示 87 so.onmessage=http://www.likecs.com/function(msg){ 88 eval(\'var da=http://www.likecs.com/\'+msg.data); 89 var obj=http://www.likecs.com/false,c=http://www.likecs.com/false; 90 if(da.type==http://www.likecs.com/\'add\'){ 91 var obj=A.$$(\'<p>\'+da.name+\'</p>\'); 92 lus.appendChild(obj); 93 cuser(obj,da.code); 94 obj=A.$$(\'<p><span>[\'+da.time+\']</span>欢迎<a>\'+da.name+\'</a>加入</p>\'); 95 c=http://www.likecs.com/da.code; 96 }else if(da.type==http://www.likecs.com/\'madd\'){ 97 mkey=http://www.likecs.com/da.code; 98 da.users.unshift({\'code\':\'all\',\'name\':\'大家\'}); 99 for(var i=http://www.likecs.com/0;i<da.users.length;i++){ 100 var obj=A.$$(\'<p>\'+da.users[i].name+\'</p>\'); 101 lus.appendChild(obj); 102 if(mkey!=http://www.likecs.com/da.users[i].code){ 103 cuser(obj,da.users[i].code); 104 }else{ 105 obj.className=http://www.likecs.com/\'my\'; 106 document.title=http://www.likecs.com/da.users[i].name; 107 } 108 } 109 obj=A.$$(\'<p><span>[\'+da.time+\']</span>欢迎\'+da.name+\'加入</p>\'); 110 users.all.className=http://www.likecs.com/\'ck\'; 111 } 112 113 if(obj==http://www.likecs.com/false){ 114 if(da.type==http://www.likecs.com/\'rmove\'){ 115 var obj=A.$$(\'<p><span>[\'+da.time+\']</span>\'+users[da.nrong].innerHTML+\'退出聊天室</p>\'); 116 lct.appendChild(obj); 117 users[da.nrong].del(); 118 delete users[da.nrong]; 119 }else{ 120 da.nrong=da.nrong.replace(/{\\(\d+)}/g,function(a,b){ 121 return \'<img src="sk/\'+b+\'.gif">\'; 122 }).replace(/^data\:image\/png;base64\,.{50,}$/i,function(a){ 123 return \'<img src="\'+a+\'">\'; 124 }); 125 //da.code 发信息人的code 126 if(da.code1==http://www.likecs.com/mkey){ 127 obj=A.$$(\'<p><span>[\'+da.time+\']</span><a>\'+users[da.code].innerHTML+\'</a>对我说：\'+da.nrong+\'</p>\'); 128 c=http://www.likecs.com/da.code; 129 }else if(da.code==http://www.likecs.com/mkey){ 130 if(da.code1!=http://www.likecs.com/\'all\') 131 obj=A.$$(\'<p><span>[\'+da.time+\']</span>我对<a>\'+users[da.code1].innerHTML+\'</a>说：\'+da.nrong+\'</p>\'); 132 else 133 obj=A.$$(\'<p><span>[\'+da.time+\']</span>我对<a>\'+users[da.code1].innerHTML+\'</a>说：\'+da.nrong+\'</p>\'); 134 c=http://www.likecs.com/da.code1; 135 }else if(da.code==http://www.likecs.com/false){ 136 obj=A.$$(\'<p><span>[\'+da.time+\']</span>\'+da.nrong+\'</p>\'); 137 }else if(da.code1){ 138 obj=A.$$(\'<p><span>[\'+da.time+\']</span><a>\'+users[da.code].innerHTML+\'</a>对\'+users[da.code1].innerHTML+\'说：\'+da.nrong+\'</p>\'); 139 c=http://www.likecs.com/da.code; 140 } 141 } 142 } 143 if(c){ 144 obj.children[1].onclick=http://www.likecs.com/function(){ 145 users[c].onclick(); 146 } 147 } 148 lct.appendChild(obj); 149 lct.scrollTop=Math.max(0,lct.scrollHeight-lct.offsetHeight); 150 151 } 152 } 153 A.$(\'sd\').onclick=http://www.likecs.com/function(){ 154 if(!so){ 155 return st(); 156 } 157 var da=A.$(\'nrong\').value.trim(); 158 if(da==http://www.likecs.com/\'\'){ 159 alert(\'内容不能为空\'); 160 return false; 161 } 162 A.$(\'nrong\').value=http://www.likecs.com/\'\'; 163 so.send(\'nr=http://www.likecs.com/\'+esc(da)+\'&key=http://www.likecs.com/\'+key); 164 } 165 A.$(\'nrong\').onkeydown=http://www.likecs.com/function(e){ 166 var e=e||event; 167 if(e.keyCode==http://www.likecs.com/13){ 168 A.$(\'sd\').onclick(); 169 } 170 } 171 function esc(da){ 172 da=da.replace(/</g,\'<\').replace(/>/g,\'>\').replace(/\"/g,\'"\'); 173 return encodeURIComponent(da); 174 } 175 function cuser(t,code){ 176 users[code]=http://www.likecs.com/t; 177 t.onclick=http://www.likecs.com/function(){ 178 t.parentNode.children.rcss(\'ck\',\'\'); 179 t.rcss(\'\',\'ck\'); 180 key=http://www.likecs.com/code; 181 } 182 } 183 A.$(\'ltian\').style.height=(document.documentElement.clientHeight - 70)+\'px\'; 184 st(); 185 186 187 var bq=A.$(\'imgbq\'),ems=A.$(\'ems\'); 188 var l=http://www.likecs.com/80,r=http://www.likecs.com/4,c=http://www.likecs.com/5,s=http://www.likecs.com/0,p=Math.ceil(l/(r*c)); 189 var pt=http://www.likecs.com/\'sk/\'; 190 bq.onclick=http://www.likecs.com/function(e){ 191 var e=e||event; 192 if(!so){ 193 return st(); 194 } 195 ems.style.display=http://www.likecs.com/\'block\'; 196 document.onclick=http://www.likecs.com/function(){ 197 gb(); 198 } 199 ct(); 200 try{e.stopPropagation();}catch(o){} 201 } 202 203 for(var i=http://www.likecs.com/0;i<p;i++){ 204 var a=A.$$(\'<a href="javascript:;">\'+(i+1)+\'</a>\'); 205 ems.children[1].appendChild(a); 206 ef(a,i); 207 } 208 ems.children[1].children[0].className=http://www.likecs.com/\'ck\'; 209 210 function ct(){ 211 var wz=http://www.likecs.com/bq.weiz(); 212 with(ems.style){ 213 top=wz.y-242+\'px\'; 214 left=wz.x+bq.offsetWidth-235+\'px\'; 215 } 216 } 217 218 function ef(t,i){ 219 t.onclick=http://www.likecs.com/function(e){ 220 var e=e||event; 221 s=i*r*c; 222 ems.children[0].innerHTML=http://www.likecs.com/\'\'; 223 hh(); 224 this.parentNode.children.rcss(\'ck\',\'\'); 225 this.rcss(\'\',\'ck\'); 226 try{e.stopPropagation();}catch(o){} 227 } 228 } 229 230 function hh(){ 231 var z=Math.min(l,s+r*c); 232 for(var i=s;i<z;i++){ 233 var a=A.$$(\'<img src="\'+pt+i+\'.gif">\'); 234 hh1(a,i); 235 ems.children[0].appendChild(a); 236 } 237 ct(); 238 } 239 240 function hh1(t,i){ 241 t.onclick=http://www.likecs.com/function(e){ 242 var e=e||event; 243 A.$(\'nrong\').value+=http://www.likecs.com/\'{\\\'+i+\'}\'; 244 if(!e.ctrlKey){ 245 gb(); 246 } 247 try{e.stopPropagation();}catch(o){} 248 } 249 } 250 251 function gb(){ 252 ems.style.display=http://www.likecs.com/\'\'; 253 A.$(\'nrong\').focus(); 254 document.onclick=http://www.likecs.com/\'\'; 255 } 256 hh(); 257 A.on(window,\'resize\',function(){ 258 A.$(\'ltian\').style.height=(document.documentElement.clientHeight - 70)+\'px\'; 259 ct(); 260 }) 261 262 var fimg=A.$(\'upimg\'); 263 var img=http://www.likecs.com/new Image(); 264 var dw=http://www.likecs.com/400,dh=http://www.likecs.com/300; 265 A.on(fimg,\'change\',function(ev){ 266 if(!so){ 267 st(); 268 return false; 269 } 270 if(key==http://www.likecs.com/\'all\'){ 271 alert(\'由于资源限制 发图只能私聊\'); 272 return false; 273 } 274 var f=ev.target.files[0]; 275 if(f.type.match(\'image.*\')){ 276 var r = new FileReader(); 277 r.onload =http://www.likecs.com/ function(e){ 278 img.setAttribute(\'src\',e.target.result); 279 }; 280 r.readAsDataURL(f); 281 } 282 }); 283 img.onload=http://www.likecs.com/function(){ 284 ih=img.height,iw=http://www.likecs.com/img.width; 285 if(iw/ih > dw/dh && iw > dw){ 286 ih=ih/iw*dw; 287 iw=http://www.likecs.com/dw; 288 }else if(ih > dh){ 289 iw=iw/ih*dh; 290 ih=http://www.likecs.com/dh; 291 } 292 var rc = A.$$(\'canvas\'); 293 var ct = rc.getContext(\'2d\'); 294 rc.width=http://www.likecs.com/iw; 295 rc.height=http://www.likecs.com/ih; 296 ct.drawImage(img,0,0,iw,ih); 297 var da=http://www.likecs.com/rc.toDataURL(); 298 so.send(\'nr=http://www.likecs.com/\'+esc(da)+\'&key=http://www.likecs.com/\'+key); 299 } 300 301 })(); 302 </script> 303 </body> 304 </html>