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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
3 x+ V( W; t/ V
//创建socket服务6 m9 z `) W: F+ a1 i/ _
$ws = new swoole_websocket_server("0.0.0.0", 9502);, G8 m K6 r G# b: ]! j. Y' d- I
//监听WebSocket连接打开事件
: Z p2 ]+ l; A* \+ D
$ws->on('open', function ($ws, $request) {4 W+ W0 Y4 X) }0 ^
var_dump($request->fd, $request->get, $request->server);
/ a9 }; w8 [4 V1 S- C) a
$ws->push($request->fd, "hello, welcome\n");
/ j5 N- d+ Q, t7 L5 } o) [% Z
});5 Y' \2 X/ _" T0 y! H6 |" R
5 f# u4 N* `+ v) S! g
//监听WebSocket消息事件
( N2 n, L( ` q i0 N
$ws->on('message', function ($ws, $frame) {
' ~, o: Y2 O: n1 o5 c# v( ~1 p
//推送消息给所有用户
) N; Y+ t. ~# ]5 f) g( o9 K% u
foreach($ws->connections as $fd){* l$ K- n9 m7 G" C! v+ j& ?$ P
$ws->push($fd, $frame->data);
% f% w" I$ _2 w+ a
}: o8 r7 ]/ M: ?7 O
});4 I# @0 d `' _3 H, U7 T
) n: h$ Y+ \9 z- [0 m, S& Q d( i( [
//监听WebSocket连接关闭事件1 j% Y& v3 S1 R. c
$ws->on('close', function ($ws, $fd) {
/ J+ k x# X% T
echo "client-{$fd} is closed\n";4 \) n: i* R0 ]* N% R9 N2 A( b
});
- K/ P) d+ p: A! P2 K
//启动服务0 I, R! p) r- s6 L, M2 T
$ws->start();+ R5 k9 D% t4 b, U7 `
- K; l* h1 i0 r5 q# Y

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器4 B5 O* e' }, U+ p8 J% Q
const socket = new WebSocket('ws://lm.com:9502');
$ ?( ^. Z r8 j$ Z* b
//Connection opened6 [/ p) I3 O# j+ a1 c, X
socket.addEventListener('open', function (event) {
! P {4 Z9 \8 e* m
//发送消息给服务器2 S# |) l& T& X* \ ?
socket.send('Hello Server! im websockt');
7 R# r4 a* l% ]
});8 @- B: W/ U3 i" o
// Listen for messages, ], b: ]4 y& |4 n6 Z3 U6 ~
socket.addEventListener('message', function (event) {) `% R l" X3 {5 F% L* D5 ^3 f
//接收服务器返回信息
7 O- B, u q* M$ V
console.log('Message from server ', event.data);
9 m; V8 q4 T2 G% `
});
6 F. w% _ i6 o5 |; O& N0 Z- Z
# D$ i5 G6 e1 k0 \

复制代码

伪直播主播页面

html

<body>
/ s. ?7 F9 p% h5 P, T
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>+ R1 r6 m) @9 t% B' Q* g6 u( n
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">$ `$ y( ~% T( U M6 w4 Z, ~1 R7 ~0 @
画布
6 d+ J2 t8 r% ]' i8 r. T
</canvas>
' l+ P& l! \. @% H/ ~
<img src="" id="videoImage" width="350" height="700"># a X |) n( r1 ~, o+ ~
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>0 i' {" `; v5 Q8 O. y0 z0 C/ t
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
7 b! O4 @, Y2 Z0 `
</body>
- ~4 F1 [9 ]: m' }( b

复制代码

javascript

var v = document.getElementById("myVideo");
$ f* }8 U) j/ e: Y+ ?7 ^# C5 r. \
var c = document.getElementById("myCanvas");
" H. m" C9 ^0 K: l! R2 V
// var c = document.createElement("canvas");" X- ?' R2 l0 o
var img = document.getElementById("videoImage");
: ]4 @2 F1 y: G& \- ]/ C9 }
ctx = c.getContext('2d');
2 p, x, Q/ H- n
var dataUrl;
# S' q, J; j" p. R1 P5 [
const socket = new WebSocket('ws://xxxx.com:9502');
, z* Q7 ?; a5 Y" d' f" ]7 O- R( J8 z1 o
//Connection opened
3 h2 ^* f4 I, T
socket.addEventListener('open', function (event) {
4 @4 n0 u6 F1 S4 M; G) G7 q- z
// socket.send('Hello Server! im websockt');( W6 Q3 I" L y
});' ~ p$ J" ^/ K) b, S
// Listen for messages+ u5 l( O1 G5 u. ]
socket.addEventListener('message', function (event) {
+ J: O8 l+ S/ X- t
console.log('Message from server ', event.data);/ Y% W9 D+ Z# g' _* f) O
img.src = event.data;
/ U/ X3 ] f1 Q, G4 Z
});; i$ h) i2 ~7 Y [3 L* F0 P0 f
% r+ I6 z- N2 e- A$ d
function playVideo() {
b+ D0 _- I; K; \# ^/ d
ctx.drawImage(v, 0, 0, 350, 700);, W% [. I( k8 f$ b0 W0 H. M
dataUrl = c.toDataURL("image/png");$ L0 w; d; n" Y5 L z
// img.src = dataUrl;5 O1 ]9 V, ^* H" O: q: Q, ^' x
socket.send(dataUrl);6 K! M0 |$ J8 k: J/ C3 @; P
}
5 \8 F3 I. j' D
var tick;6 e6 l2 |2 d4 R u1 W/ f7 q! K$ `
function aphla() {
5 T. V, Z) A. \. S
tick = setInterval(function () {
( A/ k' t6 ?) Q T! v
playVideo();
- A/ ?7 \( Q( @
}, 1);- G. k9 [. H% Q0 K
}
+ B( ?$ h7 P' V- U
function vdStop() {1 Q8 ?( |7 ^5 _1 \7 G; R! j
clearInterval(tick);9 X4 [+ Q9 A) Q
}: F0 b# Q( I8 d1 [

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");& [) g2 z; g; [- z- a6 V
const socket = new WebSocket("ws://lm.com:9502");* n3 g6 F* v8 F' o; S+ z
//
) k9 l- V3 V! m; P# T
socket.addEventListener('open',function(){( S* i% x: _; J0 O' @6 s+ Q% H
socket.send('Hello Server! Im live.html');
8 @' J6 y8 {: h- p/ Y, Z
});
0 K. j/ P$ h$ v
// Listen for messages& y9 m9 D6 Q6 e/ h7 s: D
socket.addEventListener('message', function (event) {
5 B" D1 J: b# S$ I. p5 _
//图片地址
2 x3 }4 G; H" Q7 o) V
img.src = event.data;6 s' o% a$ s; a3 S( v) g \
});
+ c g2 J# Z. v$ T; O

复制代码

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

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

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