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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
0 Z4 ?+ S3 j% G$ @. f8 G
//创建socket服务/ m' m2 w* {% H, P% A/ f3 H5 ^
$ws = new swoole_websocket_server("0.0.0.0", 9502); P/ `1 v6 K$ \+ v" @
//监听WebSocket连接打开事件; J7 K/ @5 X0 p4 ]5 Y' C" E; T1 ^
$ws->on('open', function ($ws, $request) {
. z9 Q- n& `% d1 b
var_dump($request->fd, $request->get, $request->server);9 y& |4 C: z6 z
$ws->push($request->fd, "hello, welcome\n");$ q) Z6 j7 x; }, r) v* X
});' D. V" B% I4 Q, X
) Z# B' M0 D; v
//监听WebSocket消息事件
8 W2 M% a! c! Q; V7 x
$ws->on('message', function ($ws, $frame) {1 ?8 W1 I( C8 g" O* [3 n
//推送消息给所有用户% I1 h& |1 q' ], E: h+ u+ ]) s
foreach($ws->connections as $fd){+ R! Q+ l, o3 R! V2 M3 T5 @/ q
$ws->push($fd, $frame->data);; r1 @7 i; N3 e/ E6 K* g6 K1 _" E
}
1 R4 E' R) G2 f4 I( I
});" B* x; a8 U" i: a8 j+ j
; ~8 `# D4 |* H p+ `
//监听WebSocket连接关闭事件) u4 [9 x4 p# C$ n
$ws->on('close', function ($ws, $fd) {3 V& @4 Q5 }3 D- @, s1 N- b
echo "client-{$fd} is closed\n";
9 I n1 t+ y- U
});
$ v- A' O$ k8 U
//启动服务. _# t& e- g) r+ J+ {+ k" P
$ws->start();
2 `0 k% S4 {% x$ r9 L
9 h( `* O+ r: B% ]. p3 r

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器( x. h, L4 {/ X9 z; \4 e& l
const socket = new WebSocket('ws://lm.com:9502');
- m( ?' d- ?6 v1 R" x
//Connection opened
6 ]( X( S) X1 d2 ~
socket.addEventListener('open', function (event) {( {" y3 n3 `$ x: |# r! X
//发送消息给服务器
; Z, q1 m# }& ]- V) p) T) N
socket.send('Hello Server! im websockt');3 {. j( u/ L! c% J
});
1 X* W2 f. a5 B5 q, X: q
// Listen for messages
2 }: L J* c# w% J) P e% }) Q2 Q
socket.addEventListener('message', function (event) {
6 V) A! Y: `% t. N8 e6 {3 }9 r
//接收服务器返回信息2 _- U$ h- T9 p6 ]! U$ I2 u4 `( H( @
console.log('Message from server ', event.data);9 ?0 g) s0 K4 Z/ D
});
% c" s: ?' R+ C Q6 ~0 _
7 @% _5 ^, q2 U" ^! b- r4 Q

复制代码

伪直播主播页面

html

<body>
0 D! P' s3 U6 E7 j% G+ X) a
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>3 n! V+ }& @% K* [( A
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
' J+ H! S/ w+ i! n: [* I
画布2 D3 U! u7 g$ ]7 P
</canvas>4 ~6 }' R3 c9 z0 N: P
<img src="" id="videoImage" width="350" height="700">8 \3 d7 u4 l u7 U% K3 ?& W8 S/ q; U
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>. j; A( {2 h2 `- k
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
) u: a4 s, f% E: y& t: r0 f9 a8 ?
</body>; x, @' o/ C$ }$ b* f& c8 ^

复制代码

javascript

var v = document.getElementById("myVideo");7 `* d; P5 m$ `$ ]4 \. u6 a! Q
var c = document.getElementById("myCanvas");
$ X& o" N4 y8 R6 z) a7 ]; `
// var c = document.createElement("canvas");
0 J" Z( y% [0 j0 t3 }0 F8 y6 g
var img = document.getElementById("videoImage");" h' H' m5 u: N, `3 b+ d5 f9 W
ctx = c.getContext('2d');
# ? O5 X* T: n7 h" {) P! o G1 u
var dataUrl;
2 @6 U! z3 m* Y7 c6 ^
const socket = new WebSocket('ws://xxxx.com:9502');+ H& L; ? E* B5 b- h" b
//Connection opened9 P3 O* R) Z& J0 s" C- \: u
socket.addEventListener('open', function (event) {
! q4 B8 |2 C7 s3 Z; v% r4 ~
// socket.send('Hello Server! im websockt');3 @0 f. j6 D/ V
});
/ p* P$ S& J1 m3 V
// Listen for messages6 e5 X, k7 J C( l4 x9 g4 ?. U
socket.addEventListener('message', function (event) {
, @) C" V3 k& L1 M$ o3 a
console.log('Message from server ', event.data);, r2 M- l3 l& ]7 K+ l' F. M, ]
img.src = event.data;
0 l9 N! ^& c/ y9 p$ w1 v% K1 R
});' ^, y! z& ?( s: V/ \, y: r% o
/ ?) `+ T4 B* ~- b
function playVideo() {
$ i9 c& q! u% w2 _. r
ctx.drawImage(v, 0, 0, 350, 700);
! y2 G L1 a: N" Z4 Y. t
dataUrl = c.toDataURL("image/png");: k; Y) x8 V9 N+ o' U( n
// img.src = dataUrl;
. @ x% V3 a6 n) C* E9 n
socket.send(dataUrl);
}
' F' ?7 `' a7 [4 Q9 _- h" D8 `
var tick;
( `1 I' k8 N) o7 ^' C C! i& h
function aphla() {" W2 X5 d. T; \' ?) a
tick = setInterval(function () {% W) ]: v. a! y
playVideo();
6 l$ [2 P, n$ `6 A5 h
}, 1);
6 B1 ?, P8 Z1 C, ?
}: V$ j0 `) Q( n; }- x$ l+ }
function vdStop() {0 `2 j- G5 ?! }% D' P
clearInterval(tick);
. B/ d$ f& h/ [, d! p
}
% F9 C5 e1 @: |. P6 q7 h, T7 N

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
1 _) G. S( v& u/ Q
const socket = new WebSocket("ws://lm.com:9502");
//
9 U8 p! L1 X% F: C4 e! }6 j
socket.addEventListener('open',function(){
; M+ S {3 c0 ?3 A
socket.send('Hello Server! Im live.html');! q- j: j, e/ `* ~: _
});0 p- R: m" M! R
// Listen for messages# A5 j! Q2 N8 Z d Y8 f1 A
socket.addEventListener('message', function (event) {1 Y4 B7 g2 V/ t; j$ a# l, |( y/ j
//图片地址
7 k$ V! N( Q% }+ N7 f
img.src = event.data;
/ V0 B& k* i. q( w8 @: }) m
});" Z9 [) e! O% K- b4 c( Y

复制代码

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

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

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