首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

php+webSoket实现聊天室示例代码（附源码）

Posted in PHP onFebruary 17, 2017

最近在公司利用直播间搭建一个图文直播间时正好要用到chatsever，研究了一下html5的websocket 实现了双向通信，根据前人的经验折腾了几天弄了个聊天室，实现了发送图片，发送QQ表情，群聊私聊等功能，特地分享给各位新手参考学习，大牛可以忽略。

前端：client.html

<!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:;" rel="external nofollow" rel="external nofollow" 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(){
  var Arr1 = ["聪明的","狡猾的","可爱的","美丽的","狡猾的","善良的","帅气的","逗比的"]; 
  var Arr2 = ["大灰狼","小白兔","母老虎","外星人","皮卡丘","HelloKitty","吴亦凡","薛之谦"]; 
  var ran1 = Math.floor(Math.random() * Arr1.length + 1)-1; 
  var ran2 = Math.floor(Math.random() * Arr2.length + 1)-1; 
  var n=Arr1[ran1]+Arr2[ran2]; 
  //以上五行是用来随机生成用户昵称的方法，参考一下 ，如果想自定义用户名可以将以上五行注释，然后以下两行取消注释
  //n=prompt('请给自己取一个霸气的名字：');
  //n=n.substr(0,16);
  //console.log(n);
  if(!n){
   return ; 
  }
  so=new WebSocket(url);
  so.onopen=function(){
   if(so.readyState==1){
    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+'.jpg">';
     }).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:;" rel="external nofollow" rel="external nofollow" >'+(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+'.jpg">');
   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>

后端代码：webserver.php

<?php
error_reporting(E_ALL ^ E_NOTICE);
ob_implicit_flush();

$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);
 $this->sockets=array($this->master);
 }
 
 
 function run(){
 while(true){
 $changes=$this->sockets;
 $write=NULL;
 $except=NULL;
 socket_select($changes,$write,$except,NULL);
 foreach($changes as $sock){
 if($sock==$this->master){
  $client=socket_accept($this->master);
  $key=uniqid();
  $this->sockets[]=$client;
  $this->users[$key]=array(
  'socket'=>$client,
  'shou'=>false
  );
 }else{
  $len=0;
  $buffer='';
  do{
  $l=socket_recv($sock,$buf,1000,0);
  $len+=$l;
  $buffer.=$buf;
  }while($l==1000);
  $k=$this->search($sock);
  if($len<7){
  $this->send2($k);
  continue;
  }
  if(!$this->users[$k]['shou']){
  $this->woshou($k,$buffer);
  }else{
  $buffer = $this->uncode($buffer,$k);
  if($buffer==false){
  continue;
  }
  $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){
 $server = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
 socket_set_option($server, SOL_SOCKET, SO_REUSEADDR, 1);
 socket_bind($server, $address, $port);
 socket_listen($server);
 $this->e('Server Started : '.date('Y-m-d H:i:s'));
 $this->e('Listening on : '.$address.' port '.$port);
 return $server;
 }
 
 
 function woshou($k,$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));
 $this->users[$k]['shou']=true;
 return true;
 
 }
 
 function uncode($str,$key){
 $mask = array(); 
 $data = ''; 
 $msg = unpack('H*',$str);
 $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);
 $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);
 }
}
?>

很多童鞋反应用我的源码项目还是报错，不能运行，说下详细安装部署步骤。

首先把下载下来的源代码解压放到web目录下，比如我的就是applications/Xampp/xamppfiles/htdocs/phpb/websocket,

php+webSoket实现聊天室示例代码（附源码）

路径

然后使用命令行工具cd进这个目录，运行命令：

php websocket.php

运行效果图：

php+webSoket实现聊天室示例代码（附源码）

命令行操作

接着打开Apache服务器，在浏览器访问http://localhost/phpb/websocket/client.html

运行效果图：

php+webSoket实现聊天室示例代码（附源码）

源码链接：webSoket-php-chatsever_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

php+webSoket实现聊天室示例代码（附源码）

- Author -

Ann子尘

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
php htmlspecialchars加强版
Feb 16 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
Apr 28 PHP
php实现简单洗牌算法
Jun 18 PHP
PHP修改session_id示例代码
Jan 08 PHP
PHP5多态性与动态绑定介绍
Apr 03 PHP
php微信开发之批量生成带参数的二维码
Jun 26 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
Oct 08 PHP
PHP自定义函数获取汉字首字母的方法
Dec 01 PHP
php安装扩展mysqli的实现步骤及报错解决办法
Sep 23 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
Sep 29 PHP
PHP实现求两个字符串最长公共子串的方法示例
Nov 17 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
Jan 07 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
Feb 17 #PHP
PHP常用的三种设计模式
Feb 17 #PHP
轻松实现php文件上传功能
Feb 17 #PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
Feb 17 #PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
Feb 17 #PHP
php使用parse_str实现查询字符串解析到变量中的方法
Feb 17 #PHP
php使用str_shuffle()函数生成随机字符串的方法分析
Feb 17 #PHP
macos(1) sout(1) svg(1) xps(1) Sentry(1) CAD(1) csgo(1) 403(1) 404(1) Stater(1)
You might like
手冲咖啡应该是现代精品咖啡店的必备选项吗？
2021/03/03 冲泡冲煮
php标签云的实现代码
2012/10/10 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
Python3遍历目录树实现方法
2015/05/22 Python
python距离测量的方法
2018/03/06 Python
Python 将pdf转成图片的方法
2018/04/23 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
pandas apply多线程实现代码
2020/08/17 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
护理学毕业生求职信
2013/11/14 职场文书
校园新闻广播稿
2014/01/10 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
写自荐信的注意事项
2014/03/09 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
2014年科普工作总结
2014/12/06 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS