前端页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>在线直播弹幕测试</title>
<link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
* {
padding: 0;
margin: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wrapBox {
width: 800px;
height: 550px;
border: 1px solid #000;
margin: 50px auto 0;
}
.videoBox {
height: 500px;
position: relative;
overflow: hidden;
}
.videoBox img {
width: 100%;
height: 100%;
}
video {
width: 100%;
}
.danmuSend {
width: 480px;
display: flex;
height: 50px;
}
#content {
flex: 1;
}
#send {
width: 100px;
}
.danmu {
color: #f00;
font-size: 20px;
position: absolute;
left: 800px;
top: 0;
white-space: nowrap;
}
.danmu img {
width: 30px;
height: 30px;
border-radius: 50%;
}
</style>
</head>
<body>
<!--<div class="wrapBox">-->
<div id="id_test_video" style="width:100%; height:auto;" class="videoBox">
<span class="danmu">我是弹幕</span>
</div>
<div class="danmuSend">
<input id="content" type="text">
<button id="send">发送</button>
</div>
<!--</div>-->
</body>
</html>
<script src="https://web.sdk.qcloud.com/player/tcplayerlite/release/v2.4.1/TcPlayer-2.4.1.js" charset="utf-8"></script>
<script src="49.234.23.21/live/TcPlayer-2.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
var player = new TcPlayer('id_test_video', {
"m3u8": "webrtc://lll.long666.xyz/live/wsl",
"flv": "http://lll.long666.xyz/live/wsl.flv", //增加了一个 flv 的播放地址,用于PC平台的播放 请替换成实际可用的播放地址
"autoplay" : true, //iOS 下 safari 浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
"poster" : "http://www.test.com/myimage.jpg",
"width" : '480',//视频的显示宽度,请尽量使用视频分辨率宽度
"height" : '320'//视频的显示高度,请尽量使用视频分辨率高度
});
</script>
<script>
//这里的124.222.236.210:9501为你自己的服务器或者宝塔地址 9501为端口号 需要在服务器或者宝塔放行
const ws = new WebSocket('ws://124.222.236.210:9501');
ws.onopen = () => {
console.log('客户端建立了链接')
}
ws.onmessage = ({data}) => {
// 返回的是一个json字符串,json字符串转为对象 es6提供一个方法
let json = JSON.parse(data)
// vm.msgList.push(json);
console.log(json.data.data)
let text = json.data.data
// oSpan.innerHTML = text
var oSend = document.querySelector('#send');
var oContent = document.querySelector('#content');
var oVideoBox = document.querySelector('.videoBox');
//点击发送按钮时触发此事件
// oSend.onclick = function () {
// //获取文本框输入的内容
var content = json.data.data;
// createDanmu(content)
// }
// function createDanmu(content) { // 创建弹幕 => 移动 => 消失
//新建一个span类型的标签
var oSpan = document.createElement('span');
//将获取的输入的内容传入标签
// oSpan.innerHTML = '<img src="longmao.jpg">' + content;
oSpan.innerHTML = content;
//添加其class属性,对头像图片进行样式修改
oSpan.classList.add('danmu');
//设置其字体颜色属性随机
oSpan.style.color = randomColor();
//在oVideoBox所代表的的标签内添加该元素
oVideoBox.appendChild(oSpan);
//使该新标签出现的位置随机
oSpan.style.top = Math.round(Math.random() * (oVideoBox.clientHeight - oSpan.offsetHeight)) + 'px';
//设置定时器,使其位置改变
var timer = setInterval(function () {
// 初始位置
var start = oSpan.offsetLeft;
// 偏移量
start -= 10;
//先判断,使其向左移动相对父元素的距离最终小于其右边时移除该元素,并清除该定时器
if (start < -oSpan.offsetWidth) {
clearInterval(timer);
oSpan.remove();
}
// 赋值新位置
oSpan.style.left = start + 'px';
}, 100);
// }
//用来生成随机颜色
function randomColor() {
return 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')';
}
};
var oSend = document.querySelector('#send');
var oContent = document.querySelector('#content');
var oVideoBox = document.querySelector('.videoBox');
//点击发送按钮时触发此事件
oSend.onclick = function () {
//获取文本框输入的内容
var content = oContent.value;
// createDanmu(content)
var oSpan = document.createElement('span');
//将获取的输入的内容传入标签
// oSpan.innerHTML = '<img src="longmao.jpg">' + content;
oSpan.innerHTML = content;
let msg = oSpan.innerHTML
console.log(msg)
//进行发送到websocket服务器
ws.send(msg)
}
</script>
把以下代码单独写一个文件server.php
<?php
$server = new Swoole\WebSocket\Server("0.0.0.0", 9501);
$server->on('open', function (Swoole\WebSocket\Server $server, $request) {
echo "欢迎进入{$request->fd}我们的聊天室\n";
// $server->push($request->fd, '欢迎进入我们的聊天室~');
});
//接收客户端发送的信息
//$frame 是 Swoole\WebSocket\Frame 对象,包含了客户端发来的数据帧信息
//$frame->fd 代表客户端的唯一标识 客户id
//$frame->data 代表客户端发送的消息
$server->on('message', function (Swoole\WebSocket\Server $server, $frame) {
//获取客户端发送的消息
$result['data'] = $frame->data;
// $server->connections 遍历所有websocket连接用户的fd,给所有用户推送
foreach ($server->connections as $client) {
//循环所有的客户端连接数据
//$client代表每一个用户的连接id
//如果是同一个人
if ($client == $frame->fd) {
$result['style'] = 'bubble me';
} else {
$result['style'] = 'bubble you';
}
$data = [
'msg' => '操作成功',
'data' => $result,
'error_code' => 0
];
//push推送给客户端信息
//进行广播,推送给所有用户
$server->push($client, json_encode($data, 256));
}
});
$server->on('close', function ($ser, $fd) {
echo "client {$fd} closed\n";
});
$server->start();
放到宝塔或者服务器上
效果