PHP大道至简之Swoole伪直播功能

admin · 发表于 2020-3-31 19:50:03

伪直播功能Websocket服务器

socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。

复制代码

创建websockt服务

代码如下

error_reporting(-1);
+ [# W K% g3 k" K" Q9 ~0 p! {
//创建socket服务% X* ]. u! d2 n% i" k+ E
$ws = new swoole_websocket_server("0.0.0.0", 9502);
% A! x; x# n0 k8 a4 n: w
//监听WebSocket连接打开事件
- Z5 x2 R- c- I+ d3 Y3 f
$ws->on('open', function ($ws, $request) {6 h2 c6 b' l9 K: b0 S# \; C# O
var_dump($request->fd, $request->get, $request->server);; g( U; l, b' g4 n- ~7 g- ]4 L
$ws->push($request->fd, "hello, welcome\n");' Z A1 O1 a7 {" t/ b( X
});9 s5 y; v/ C2 N
9 D2 p) p' R' o5 F: k1 ~- v0 Y
//监听WebSocket消息事件2 Y% T) a" H+ n& h; h; V
$ws->on('message', function ($ws, $frame) {! \$ S6 u( ^* U* [) A* g, }) g
//推送消息给所有用户$ s" h; S( L! ?. G* l3 y$ x
foreach($ws->connections as $fd){
7 }. P% |+ K( y5 v5 E& }, u% m b
$ws->push($fd, $frame->data);
) |& ?; k4 a# V2 R/ y) o
}1 E( P D# ]1 c4 y4 Y# i( @
});6 ^, m2 f9 d' s& {+ o. {
% h- Y x5 i6 r% x( W
//监听WebSocket连接关闭事件
- e* [0 L/ d* C! B& R7 z
$ws->on('close', function ($ws, $fd) {
# a3 Q- s5 c8 ~2 K* ^5 z2 {/ R
echo "client-{$fd} is closed\n";7 J$ ~) h' I& R0 J
});% _/ G' y9 j( `! g2 u
//启动服务
& R P/ h+ U8 @, \
$ws->start();; `& w' X) E% H: K" |1 E
/ ]% @9 Y8 k2 e. u+ G% R6 C

复制代码

Websocket客户端

socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。

复制代码

创建websocket客户端

代码如下

//连接服务器7 m, z& E( ?* Q) f( F
const socket = new WebSocket('ws://lm.com:9502');
: ?+ v( k( V$ \
//Connection opened& b6 V& R( g% p# }5 _* Z
socket.addEventListener('open', function (event) {
: D. E+ ^' R) x2 ]3 B2 _1 D2 `* i$ L7 _
//发送消息给服务器
* ^8 P% ]1 D0 Q; w
socket.send('Hello Server! im websockt');
, N$ A$ K& e5 u2 k( x
});
3 v( G( R T @0 d( }, }# ]7 \ E
// Listen for messages
: F. M: _0 X9 ?! q" n
socket.addEventListener('message', function (event) {; `# i/ a% J2 m/ i, W8 k
//接收服务器返回信息; `5 A1 w$ |4 H0 \
console.log('Message from server ', event.data);' Z1 b, i9 K2 _6 O8 C
});! s4 `( @/ w/ a7 W" t& P! F( V7 ^+ v% O
) x8 G2 p2 C3 d# U1 u# ~2 Y

复制代码

伪直播主播页面

html

<body>
8 B5 s8 k3 y, B! Q+ U3 V, v; H
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>8 |2 c5 R/ Y% l9 a4 a% B# @
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
2 c- U- T( ~. d8 v* a4 t
画布( L7 ~0 ~- H& @6 u
</canvas>9 J) C0 N2 p* [5 p* t
<img src="" id="videoImage" width="350" height="700">
3 s. H# P; v6 O2 V
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
7 k! |6 @4 a( L" V$ ]: U
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>2 {4 [7 `& F- D9 r8 u! D7 ^
</body>- d4 C7 _8 J) H" T) j

复制代码

javascript

var v = document.getElementById("myVideo"); U6 p; [8 F! X1 E, J1 G
var c = document.getElementById("myCanvas");- \0 a( }' ^$ \; |: m- Y) y& d+ N
// var c = document.createElement("canvas");
7 T- \" F" g6 V$ z6 ]
var img = document.getElementById("videoImage");$ G: V, c( {' ~% v
ctx = c.getContext('2d');
9 k0 V: X; c! d& B& c6 ]
var dataUrl;
$ }( O% b6 X8 `9 t+ W
const socket = new WebSocket('ws://xxxx.com:9502');
2 [/ P4 P3 h) c+ x# F" s
//Connection opened
S& t+ T% z. b
socket.addEventListener('open', function (event) {
4 G' \3 S7 V) B7 k: i& z3 n
// socket.send('Hello Server! im websockt');
1 h1 A0 M& z! p2 Q' z
});
. S' h& j- [: u$ w5 I
// Listen for messages. P/ t* m9 i& W1 M, {
socket.addEventListener('message', function (event) {
% m4 r: p6 C Q$ s/ M% q. V) J
console.log('Message from server ', event.data);* x; r- O/ q' P( {5 e
img.src = event.data;7 T d$ W) n* E1 M L7 E
});6 F. c2 g4 X+ `+ n4 C2 p+ e
) F- [. F6 x! y, ]5 Q# F: [
function playVideo() {
. u0 |6 j6 z$ L# x8 z( m
ctx.drawImage(v, 0, 0, 350, 700);
8 \6 F$ v" R4 j2 w
dataUrl = c.toDataURL("image/png");* m) r3 i! s* K7 W( Y
// img.src = dataUrl;
0 F- i: ?' q* ~2 h: F. w* G
socket.send(dataUrl);# ]+ E- _: D% [2 j$ K* \6 M
}, K/ F {% y$ d0 Q' f
var tick;
: O6 k* |" u) _ w, }; j4 O
function aphla() {
% ~: v+ A2 [5 o j- F$ |
tick = setInterval(function () {
1 `# x }. |, {4 D6 q" N6 W5 Z) {
playVideo();
4 G; A/ g1 v. a
}, 1);7 |; ~0 o' L8 e7 n# C
}
, p% Z, N, k. X$ |+ p0 ~" ?
function vdStop() {2 ~* q" m, i; n( f- G( u7 C
clearInterval(tick);
Q( \* i h) D
}" V( g. a+ F8 d! U( }, Z& ~% g. _; ?% _

复制代码

用户页面

html

<img src="" id="liveImg">

复制代码

javascript

var img = document.getElementById("liveImg");& f. I0 c8 f; \$ H8 w
const socket = new WebSocket("ws://lm.com:9502");
7 A" R) I$ P5 f* E% x
//: q% N! L/ G& b7 I4 k& f
socket.addEventListener('open',function(){
' _. Y/ v! v2 O9 D G
socket.send('Hello Server! Im live.html');
- [- }. }" _' o7 ~- `" C+ O
});$ F0 B( O0 G) o$ b
// Listen for messages/ L5 a! X2 l% M* _7 O% P9 i3 q
socket.addEventListener('message', function (event) {
3 w1 e: ^( @( _3 T
//图片地址; @0 J$ I; h7 S! ?, Y
img.src = event.data;
4 K5 T# d2 h. p0 a0 |
});
0 h3 V4 e. V0 S. x

复制代码

真直播应是通过rtmp推流实现的，本次功能仅作为swoole框架的一个案例用法

帐号		自动登录	找回密码
密码			立即注册

[swoole] PHP大道至简之Swoole伪直播功能

浏览过的版块