socket弹幕

html页面

<!DOCTYPE html>
<html>
<head>
<script src="./jquery-1.8.3.js"></script>
<meta charset="utf-8">
<title></title>
</head>

<style type="text/css">

*{
margin: 0;
padding: 0;
}


#navBar{
width: 50%;
height: 400px;
padding-bottom:40px;
border: 1px solid #000;
margin: 5% auto 0;
position: relative;
background: #ccc;
}

#navBar #video{
width:100%;
height:100%;
background:#fcfcfc;
text-align:center;
}

#navBar .dm_tool{
width: 100%;
height: 40px;
background: #ccc;
margin-top:1px;
bottom: 0;
display: flex;
}

#navBar .dm_tool .dm_con{
width: 89%;
height: 38px;
outline: none;
border: 1px solid #ccc;
padding-left: 10px;
float: left;
}

#navBar .dm_tool .sendToDm{
width: 9.7%;
background: limegreen;
color: white;
outline: none;
border: 0;
cursor:pointer;
}

#navBar .dmArea{
width:100%;
height:400px;
top:0;
left:0;
position:absolute;
z-index:10;
overflow:hidden;
}

#navBar .dmArea span{
white-space:nowrap;
position:absolute;
}
</style>

<body>

<div id="navBar">
<div id="video"><span style="position:absolute;top:45%;left:45%;">假装在播放视频</span></div>
<div class="dm_tool">
<input type="text" placeholder="say something..." name="dm_con" class="dm_con" />
<button class="sendToDm">发一弹</button>
</div>
<div class="dmArea">

</div>
</div>


</body>
<script type="text/javascript">

var DmClass = {
"Dm_H":0, //弹幕区域高度
"Dm_W":0,//弹幕区域宽度
"DmObj":"",//弹幕区对象

//初始化方法
init : function(){
var _this = this;

_this.DmObj = $(".dmArea");
_this.Dm_H = _this.DmObj.height();
_this.Dm_W = _this.DmObj.width();

//发送弹幕方法
_this.sendToDmFunc();
},

sendToDmFunc : function(){
var _this = this;

$(".sendToDm").click(function(){


var sendCon = $('input[name="dm_con"]').val();
if($.trim(sendCon) == "") {
var testList = ["hello world!","你好","视频真好看","吹牛我就服你！！","哈哈哈"];
var _s = Math.floor(Math.random()*5);
sendCon = testList[_s];
//return false;
}

//json 数据格式
var sData = '{"data":"'+sendCon+'"}';
//发送到sockey服务器
SocketClass.websocket.send(sData);



});
},

//往弹幕区域添加从服务器广播过来的弹幕数据
addToDm : function(rdata){
var _this = this;

//json转对象
var newObj = eval('(' + rdata + ')');

//定义新的弹幕对象
var newDom = $("<span></span>");

//随机取一个位置
var p = _this.randPosition();

//放入弹幕内容
newDom.html(newObj.data);
_this.DmObj.append(newDom);

//设置初始位置为弹幕区的最右边
newDom.css({"left":_this.Dm_W+"px","top":p+"px"});


//当前单条弹幕位置
var tR = _this.Dm_W;
//定时器 20毫秒执行一次
var newTimer = setInterval(function(){

tR -= 2;

//当弹幕走出弹幕区将之删除，并清除当前的定时器
if(tR <= -newDom.width()){
newDom.remove();
clearInterval(newTimer);
}
//新位置
newDom.css("left",tR+"px");
},20);

},

//随机获取位置
randPosition : function(){
var _this = this;
var rn = Math.floor(Math.random()*(_this.Dm_H - 20));
return rn;
},

}

//sockey 服务
var SocketClass = {
"wsServer":"ws://47.93.20.195:7887", //服务地址
"websocket":"", //socket 对象
init : function(){
var _this = this;

//连接docket
_this.socketServerInit();
},

socketServerInit : function(){
var _this = this;
_this.websocket = new WebSocket(_this.wsServer);

//连接上socket
_this.websocket.onopen = function (evt) {
console.log("Connected to WebSocket server.");
};

//socket 服务器关闭
_this.websocket.onclose = function (evt) {
alert("socket server closed");
console.log("Disconnected");
};

//接收socket服务器的广播数据
_this.websocket.onmessage = function (evt) {
console.log('Retrieved data from server: ' + evt.data);

//将接收到的弹幕数据调用addToDm方法添加到弹幕区域
DmClass.addToDm(evt.data);
};

//连接错误
_this.websocket.onerror = function (evt, e) {
console.log('Error occured: ' + evt.data);
};
},


}

//初始执行方法
$(function(){
DmClass.init();
SocketClass.init();
});


</script>

</html>

php页面

<?php

//创建websocket服务器对象，监听0.0.0.0:9502端口
$ws = new swoole_websocket_server("0.0.0.0",7887);

//监听WebSocket连接打开事件
$ws->on('open', function ($ws, $request) {
var_dump($request->fd, $request->get, $request->server);
$ws->push($request->fd, '{"data":"socket server connected"}');
});

//监听WebSocket消息事件
$ws->on('message', function ($ws, $frame) {
//echo "Message: {$frame->data}\n";
echo "<pre>";
print_r($frame);

//遍历所有连接,将接到的消息广播出去
foreach($ws->connections as $fd){
$ws->push($fd, "{$frame->data}");
}
//$ws->push($frame->fd, "{$frame->data}");
});

//监听WebSocket连接关闭事件
$ws->on('close', function ($ws, $fd) {
echo "client-{$fd} is closed\n";
});

$ws->start();

?>

猜你喜欢