1。后端利用php安装swoole不会的自行百度不再赘述 创建websocket。php文件?php创建websocket服务器对象,监听0。0。0。0:9505端口自行修改端口wsnewswoolewebsocketserver(192。168。18。15,9505);监听WebSocket连接打开事件wson(open,function(ws,request){vardump(requestfd,requestget,requestserver);相当于记录一个日志吧,有连接时间和连接iproomIdrequestget〔roomid〕;echorequestfd。time:。date(YmdH:i:s,requestserver〔requesttime〕)。IP。requestserver〔remoteaddr〕。;wspush(requestfd,roomId);});监听WebSocket消息事件wson(message,function(ws,frame){记录收到的消息,可以写到日志文件中echoMessage:{framedata};遍历所有连接,循环广播foreach(wsconnectionsasfd){如果是某个客户端,自己发的则加上isnew属性,否则不加if(framefdfd){wspush(framefd,framedata。,isnew:);}else{wspush(fd,{framedata});}}});监听WebSocket连接关闭事件wson(close,function(ws,fd){echoclient{fd}});wsstart(); 直接执行phpwebsocket。php运行后端websocket服务 2。前端利用github大神写的danmu。js地址为:https:github。comchiruomjquery。danmu。js内有文档demo可以自行研究需要的功能WebSocketvarroomGetRequest();房间号varwsServerws:192。168。18。15:9505?roomidroom。varwebsocketnewWebSocket(wsServer);websocket。onopenfunction(evt){console。log(ConnectedtoWebSocketserver。);websocket。send(gaga);连上之后就打开弹幕(danmu)。danmu(danmuResume);};websocket。onclosefunction(evt){console。log(Disconnected);};websocket。onmessagefunction(evt){console。log(Retrieveddatafromserver:evt。data);vartime(danmu)。data(nowTime)1;vartextobjevt。data,time:time};获取加上当前时间console。log(textobj);varnewobjeval((textobj));console。log(newobj。roomid);判断房间号是否一致展示在该房间if(newobj。roomidroom。roomid){(danmu)。danmu(addDanmu,newobj);添加弹幕}};websocket。onerrorfunction(evt,e){console。log(Erroroccured:evt。data);};初始化(danmu)。danmu({left:0,top:0,height:100,width:100,speed:7000,opacity:1,fontsizesmall:16,fontsizebig:24,topbottondanmutime:6000});一个定时器,监视弹幕时间并更新到页面上functiontimedCount(){(time)。text((danmu)。data(nowTime));tsetTimeout(timedCount(),50)}timedCount();functionstarter(){(danmu)。danmu(danmuStart);}functionpauser(){(danmu)。danmu(danmuPause);}functionresumer(){(danmu)。danmu(danmuResume);}functionstoper(){(danmu)。danmu(danmuStop);}functiongetime(){alert((danmu)。data(nowTime));}functiongetpaused(){alert((danmu)。data(paused));}发送弹幕,使用了文档README。md第7节中推荐的方法functionsend(){vartextdocument。getElementById(text)。varcolordocument。getElementById(color)。varpositiondocument。getElementById(position)。varposition0;vartime(danmu)。data(nowTime)1;varsizedocument。getElementById(textsize)。varsize1;vartextobj{text:text,color:color,size:size,position:position,time:time};为了处理简单,方便后续加time,和isnew,就先酱紫发一半吧。注:time为弹幕出来的时间,isnew为是否加边框,自己发的弹幕,常理上来说是有边框的。vartextobj{text:text,color:color,size:size,position:position,roomid:room。利用websocket发送websocket。send(textobj);清空相应的内容document。getElementById(text)。}调整透明度函数functionop(){varopdocument。getElementById(op)。(danmu)。danmu(setOpacity,op100);}调隐藏显示functionchangehide(){varopdocument。getElementById(op)。opop100;if(document。getElementById(ishide)。checked){(danmu)。danmu(setOpacity,1)}else{(danmu)。danmu(setOpacity,0)}}设置弹幕时间functionsettime(){vartdocument。getElementById(settime)。tparseInt(t)(danmu)。danmu(setTime,t);}获取url房间号functionGetRequest(urlStr){if(typeofurlStrundefined){varurldecodeURI(location。search);获取url中?符后的字符串}else{varurl?urlStr。split(?)〔1〕;}vartheRequestnewObject();if(url。indexOf(?)!1){varstrurl。substr(1);strsstr。split();for(vari0;istrs。i){theRequest〔strs〔i〕。split()〔0〕〕decodeURI(strs〔i〕。split()〔1〕);}}returntheR} 基础弹幕功能不再多说,说一下分房间弹幕: 第一种方法,原理js获取到roomid在通讯时加上?roomidxxx此时在后端open方法内可以拿到房间号roomIdrequestget〔roomid〕;通过push传递给前端进行操作wspush(requestfd,roomId);前端拿到房间号进行与当前房间号对比判断是否为本房间进行弹幕显示。 第二种方法,直接在前端send时把房间号加上varxx{xxx:xxx,roomid:roomid};websocket。send(xx);此时在后端message方法内获取到前端data然后直接push到前端,前端在onmessage方法内拿到后端push的数据进行房间号对比判断,是否为本房间进行弹幕显示。 两种方法原理都为判断roomid深入研究可以存放弹幕(redis,系统内存,变量。。。。。。),判断用户权限,轮播弹幕等,以上代码只为基础代码,有需要的同学可以学习一下。