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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); ! n$ ~; B" h( w! y$ P
//创建socket服务
- k6 }$ b$ P0 N& j
$ws = new swoole_websocket_server("0.0.0.0", 9502);
" p8 A3 n$ ?9 c2 G W
//监听WebSocket连接打开事件
/ Q: S5 i3 v& o% _8 i" v- h6 A
$ws->on('open', function ($ws, $request) {2 m E$ C" _7 X7 I+ p+ }! ?
var_dump($request->fd, $request->get, $request->server);1 f B2 W3 f! F! A6 o: k& E
$ws->push($request->fd, "hello, welcome\n");0 Y, v+ k) g/ ]* n* e
});; K9 O- j b3 P. @% p+ L* q
1 T2 z& R, z1 d
//监听WebSocket消息事件
7 ]- C6 i4 u+ z
$ws->on('message', function ($ws, $frame) {" u5 i: a: u, s7 g3 K6 _
//推送消息给所有用户5 B0 n# g. w7 `
foreach($ws->connections as $fd){
9 h% M, S5 r, o* }
$ws->push($fd, $frame->data);
% \' P6 p8 Y* s$ X
}
$ h k/ [$ M+ M! c0 \6 W
});( x1 j3 l1 h" E4 z! z/ L3 U
, L5 ^6 N- ^+ a* l, A! S7 ]
//监听WebSocket连接关闭事件
`6 J( v4 ?; Z- c1 T7 p M* x
$ws->on('close', function ($ws, $fd) {! V: }4 s$ ^: S" y M( [& z5 G
echo "client-{$fd} is closed\n";" s* p9 L, l4 |% \1 W
});" n3 @( C4 C% c: K" J) V! l) Y# A7 |
//启动服务
! T8 k7 u) o/ B/ w G* a3 c; J
$ws->start();4 A8 t: R1 s0 m+ G1 Y0 }& e \
; P4 t! a/ C K( i/ L8 K

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
% j5 g5 M" V$ i. n( F+ _) O1 F
const socket = new WebSocket('ws://lm.com:9502');$ M& v( ]) k' B7 P# C
//Connection opened4 G# M( W; E) s) l! M
socket.addEventListener('open', function (event) {
9 j5 [( e( i+ L" c
//发送消息给服务器
9 u( k7 N j$ w# V7 P
socket.send('Hello Server! im websockt');: V9 B# x- ^9 S
});
4 _2 b: T s+ L% R
// Listen for messages. z+ k1 J% H( b9 R/ x% j" E
socket.addEventListener('message', function (event) {
" B) c5 t3 n9 i- ~! V# u2 }; e2 o
//接收服务器返回信息
+ W8 Y; K3 D I) V
console.log('Message from server ', event.data);
' Y+ W: B8 s5 \+ }
});( d, X ~0 m- b
. v- L9 n6 S" o

复制代码

伪直播主播页面

html

<body>& j+ Q, o% Q& H1 _: N
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
1 T' v1 P# u6 h M3 u X+ `
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">3 y( @3 Z I( w7 V. E
画布- X% [$ R! \5 E$ C1 g J- ~
</canvas>
, a ^6 M. b7 G. s4 p* F% }
<img src="" id="videoImage" width="350" height="700">
) I1 y9 M/ y/ Q. Z* V: C2 o) `+ Q
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>( o4 ~% {& l( D3 q
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>* r$ j1 d3 o y- {8 {
</body>
: q* O: R2 @" Z* J2 v

复制代码

javascript

var v = document.getElementById("myVideo");
, E: j; g3 G+ [8 z' v8 ]8 v
var c = document.getElementById("myCanvas");
1 Z4 l- [. G! M# D( B; T
// var c = document.createElement("canvas");
' `7 n! c) D) V' B+ u& K j" M
var img = document.getElementById("videoImage");. F5 O" E4 X6 ~
ctx = c.getContext('2d');' l2 G* _+ Y9 V6 D) \: u0 @$ ~
var dataUrl;
. g! R8 b; n% O# W6 @& L8 }5 I
const socket = new WebSocket('ws://xxxx.com:9502');
7 K% u4 h1 ^+ k" e- n; Y
//Connection opened! k0 s+ R9 X" g; i" v
socket.addEventListener('open', function (event) {
! ~% ^* P% K( z6 L M
// socket.send('Hello Server! im websockt');
6 M2 l& J# F5 y; a+ x6 l, n
});
! O: R0 T4 I+ e( s. S
// Listen for messages
0 s u5 O7 g2 ?, P% x. u
socket.addEventListener('message', function (event) {" a0 e& t4 |3 h! |" w1 D6 D& O
console.log('Message from server ', event.data);4 b6 {1 {7 P: n' Q+ Q, k
img.src = event.data;
6 {- }- f7 l& f5 f( f
});
* ~0 X* M5 B6 K: n$ G
' |; n% T9 {- H- @" N/ T
function playVideo() {
: R0 y# y0 q: i# W; S2 n, G
ctx.drawImage(v, 0, 0, 350, 700);
9 i9 e2 ?4 l- m0 E3 w# G: z
dataUrl = c.toDataURL("image/png");1 U4 h0 S& a o7 @) A- o
// img.src = dataUrl;
- z# T/ Q% {% ~
socket.send(dataUrl);3 g7 _0 c3 a% N; x* Y
}
3 \' z) \$ Z, w/ h. H' S
var tick;
/ X9 K7 U4 {! [; q8 A( G
function aphla() {% P" r6 `7 k# _$ b' n5 \) @2 X4 [
tick = setInterval(function () {
" Q# g2 p8 i5 F& m
playVideo();
8 d) m/ X. [( n* E$ M+ i
}, 1);
' y9 z9 @% p8 d' J$ x
}
. [5 c) f2 u, s$ u: S
function vdStop() {4 U2 L2 ?! {# g
clearInterval(tick);
2 ~4 S( O5 J s( t% G1 Z3 q; i- N
}
2 C# s: |8 f- ?+ f3 _, `8 h

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");1 k! i! Z8 n$ `, L
const socket = new WebSocket("ws://lm.com:9502");
! }2 `; [* d. J/ n1 [* D: R# u
//
& M% g3 B% X! H) {) V
socket.addEventListener('open',function(){0 M. R5 @; p& c2 H# L" F7 ~; H9 t
socket.send('Hello Server! Im live.html');; V$ O9 h: }" `: O% z% A1 ~
});
! k: O3 o% K4 { t+ d
// Listen for messages
- E. F" S) i2 B/ l/ b7 ?* O
socket.addEventListener('message', function (event) {
$ l* A+ N+ p; K- L+ s
//图片地址5 ]8 Z4 i1 x3 Y
img.src = event.data;
: Z3 f# X& G8 c' r0 N$ R
});7 i' K6 Y' L+ L

复制代码

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

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

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