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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
1 K; Y0 p& m* ]. i
//创建socket服务( g+ I D' V) x, Y! ]6 v
$ws = new swoole_websocket_server("0.0.0.0", 9502);
& {' L! W( J; Y/ |$ l) T
//监听WebSocket连接打开事件
# {9 j( x# r# S& \) s8 E( v
$ws->on('open', function ($ws, $request) {# V- ^* @' w; f' ?( M
var_dump($request->fd, $request->get, $request->server);
+ m* R4 r- I- p/ Y6 J4 a# V6 T/ B
$ws->push($request->fd, "hello, welcome\n");
+ g# a- [' t# g7 ?' N* e3 G
});: i5 d6 M# Z( Z: Z
/ \- [% L% u5 [# l) ]1 x5 m7 H+ J
//监听WebSocket消息事件
) u6 Y6 t% H& x( v% _9 E
$ws->on('message', function ($ws, $frame) {
: m. \+ ]$ l( M1 P
//推送消息给所有用户
Q& G8 y# G' P2 W5 \5 |+ k
foreach($ws->connections as $fd){
T( v3 N7 ]$ u' w( ?' T4 u
$ws->push($fd, $frame->data);
. n. Q6 w! v& p' Z
}* k7 q6 V: m& k3 W: r) l R
});
% u' K1 m+ s2 {5 k: i
! b- T$ j/ c; H
//监听WebSocket连接关闭事件
3 Z# O6 @1 W& S/ [5 G2 ~* J0 C
$ws->on('close', function ($ws, $fd) {
" _$ R* i4 n x+ r
echo "client-{$fd} is closed\n";& F8 u6 `* `9 o/ V# }& N8 S* g+ T3 T
});
& j% {* K5 K& k4 @
//启动服务4 { ~: B9 @9 R% Y2 U
$ws->start();8 }: a. \: q" K, n- C" A
, P: `1 Y8 [5 B) {* Z7 P

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
; E, ~$ p% p1 \$ f4 ^
const socket = new WebSocket('ws://lm.com:9502');6 _1 Z3 X6 V v9 `8 |
//Connection opened; P8 g+ j' y9 h6 |2 v2 G
socket.addEventListener('open', function (event) {
3 G/ I; [5 N' s. u( x" z: A' P
//发送消息给服务器
1 N! i, b# k% Y* X5 |3 k) w9 t
socket.send('Hello Server! im websockt');
$ e) H; D) G% Q+ A5 m* I* j
});
3 M2 \0 p: F# F H4 ]$ K3 E
// Listen for messages x& H) O# U4 l+ k& p$ H
socket.addEventListener('message', function (event) {
4 w: B: r% B4 f; t& p" j( `
//接收服务器返回信息7 c3 x. W% Z, `6 W5 ?) |% {
console.log('Message from server ', event.data);. e3 _" l9 p- o+ n1 J2 Z
});2 x; d, Y9 `1 M. J1 _6 W' t4 y
! W# U* U4 w& r& F8 U

复制代码

伪直播主播页面

html

<body>
2 F$ E( M9 d2 B" b3 W
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>( A: w$ j; j7 H
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
) T+ t7 n" w! M& L. ]
画布& T0 G, L! u* d( ?
</canvas>! O2 o6 J. u% Q/ I" p2 e' e
<img src="" id="videoImage" width="350" height="700">
) p7 q# I$ o9 j. a6 i. C0 m' O
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>- ^' H- x' @ G1 \3 M8 O
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
/ z" G$ E& `! U* g* s) L
</body>

复制代码

javascript

var v = document.getElementById("myVideo");
& b4 b4 Y5 k- C" y& L
var c = document.getElementById("myCanvas");. r2 O$ v- m" X# W. r ]- D' N" ^+ r8 k C
// var c = document.createElement("canvas");$ g0 K7 K5 W& Q7 m
var img = document.getElementById("videoImage");1 [- X, J* H5 m9 Q
ctx = c.getContext('2d');
/ U3 G- H0 P+ ] g8 {5 m
var dataUrl;
+ Z5 c3 @. V8 d7 F& Q
const socket = new WebSocket('ws://xxxx.com:9502');
6 t+ D) `/ V+ @9 t: a2 d
//Connection opened
0 ]% ~8 H: P9 S' _! X& V
socket.addEventListener('open', function (event) {. n t3 D9 ]# B3 O5 f( t0 u7 G
// socket.send('Hello Server! im websockt');( }3 h' `. j3 u
});
+ o/ s! z5 Y, A5 G0 L$ Q' k! v
// Listen for messages
$ `; o) b; \3 Q/ s$ n3 P% H
socket.addEventListener('message', function (event) {
5 p7 b$ C& e" g+ H" Z, Y
console.log('Message from server ', event.data);
( H1 e/ N) q3 g
img.src = event.data;
# ^8 ]( L6 ^ U/ P9 ~
});& V; r8 ]$ [5 ~& O% `
4 J8 D( j* x2 I7 l% P; _
function playVideo() {
+ ]' {( i/ D- D# R4 _
ctx.drawImage(v, 0, 0, 350, 700);( b4 F$ P* `7 D4 Q" Z& v, `
dataUrl = c.toDataURL("image/png");
8 [* R! p3 A- m# R
// img.src = dataUrl;- Y1 I5 ]1 A/ ?* p
socket.send(dataUrl);/ B' ]3 ?$ `4 b/ h+ U
}' I/ R3 x o& o" k
var tick;1 g# ]: n; i4 k# b+ f8 K
function aphla() {1 l: g! z' z* Y/ ?( u' k
tick = setInterval(function () {( j& m2 K' ^& V
playVideo();
* Y9 e; S" p; f$ W
}, 1);
1 G! b, Z0 x1 c/ W8 J) [7 O. y
}
0 G: Q$ F# q! L; `0 h7 Q$ s+ `, u. U& Y
function vdStop() {
( N# G1 [" ~ g
clearInterval(tick);( T: T+ E2 l' I& g H8 I
}6 {% ~) {7 F! n3 L0 m

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");+ u; h% E# L! E! }
const socket = new WebSocket("ws://lm.com:9502");5 D! h$ J) d' S; R' Q8 W! A
//
1 t ]0 ]8 F! C
socket.addEventListener('open',function(){8 _# A) c7 f: {3 v6 @# H
socket.send('Hello Server! Im live.html');
8 z. \1 |/ x9 `9 @+ E6 e D
});& b' J* X* G [* C% Y M7 n8 ]9 T( U
// Listen for messages. H; \* [ U* i9 d3 \7 w7 v
socket.addEventListener('message', function (event) {
, c) M: A. ]! W/ Q: X8 R
//图片地址3 ~' `( [' n$ l& z ]. m& z* Y
img.src = event.data;/ Q2 {* H3 V3 [
});
9 ]9 {/ }& k( H3 N0 f! i

复制代码

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

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

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

浏览过的版块