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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 8 ~# i8 n6 M! k7 \$ p9 K6 a
//创建socket服务
/ X# M Y6 C I% R n+ Y1 L( [* Y
$ws = new swoole_websocket_server("0.0.0.0", 9502);
//监听WebSocket连接打开事件( T: m0 N( Q+ I0 ^5 h, F& f" p
$ws->on('open', function ($ws, $request) {3 d/ a# g. l& a" @( q
var_dump($request->fd, $request->get, $request->server);
2 a2 k) l9 `/ a* j y( z* L; P0 @
$ws->push($request->fd, "hello, welcome\n");4 N# I' H2 t3 m! }6 w, y# Y
});
' P$ ^# M9 E/ Q: ?8 e6 P
, p/ R) O% O% V8 J2 s9 z0 I
//监听WebSocket消息事件
3 |; @& D- v& w1 y
$ws->on('message', function ($ws, $frame) {9 K' Y& y& B" D, U
//推送消息给所有用户
; n p& O: ^8 A B& N8 A
foreach($ws->connections as $fd){) P; l; m) a1 E7 D8 E! P# {
$ws->push($fd, $frame->data);- s3 C, G6 L7 @* ^' k" H' d
}
$ |) p$ ^3 g" q, M6 n
});
8 k. j" `- I( J8 s6 _; }9 k
2 j6 R- ~4 p$ Y0 r6 Y3 B2 T
//监听WebSocket连接关闭事件
) @7 J- R, q C, a! q
$ws->on('close', function ($ws, $fd) {
; U$ J+ m% m T
echo "client-{$fd} is closed\n";
" c; }9 L, F; s7 m. O
});- C' k* R/ Z4 A0 k8 G* s
//启动服务, V6 w) e8 q! Y3 \
$ws->start();( `9 E+ F2 ?. D; v" t5 C0 o
. \8 @: _4 W1 f' a* w1 p7 L

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
' J7 q' t- Z Y. X
const socket = new WebSocket('ws://lm.com:9502');1 R0 `& F7 Q" s
//Connection opened, `* a# Q1 T2 Q4 S4 }
socket.addEventListener('open', function (event) {1 m/ [3 Q& J, V( j9 G
//发送消息给服务器. l- V; \6 z7 ?% Z' M) ]4 @
socket.send('Hello Server! im websockt');- T' O% A& r& \/ ^7 K3 \/ x E2 }
});( t, J9 h& D* @2 Y
// Listen for messages
) Q3 i4 f( \! K p2 w1 r( L
socket.addEventListener('message', function (event) {
0 s" U( J' O& x
//接收服务器返回信息
, @+ o2 {( q6 z5 @ |; n% W
console.log('Message from server ', event.data);
* U+ d4 n( ^5 B% ?) }0 E* ]$ ]
});
! O8 r4 @2 W7 x ?
, k: S' {% d& L1 {

复制代码

伪直播主播页面

html

<body>
+ s+ C/ ~$ h9 ~' j& G
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>% f# V! F& [6 Z' ^
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">, f* j" ^5 y2 Q# r
画布
+ `5 V* ?* g' J2 @7 m
</canvas>
6 ^. J1 q9 ?! h7 k) ~- |
<img src="" id="videoImage" width="350" height="700">
5 m' ?: N7 B9 {. j* H" h6 r3 y
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
7 U2 h5 ?$ R/ D+ y9 e
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
6 U$ t. T3 K! M5 T6 d1 e1 ]
</body>4 A# u6 d% ~! L$ U; ?- a

复制代码

javascript

var v = document.getElementById("myVideo");5 t! m3 i: s# j; W5 l: ~( t
var c = document.getElementById("myCanvas");
o; c; l- t6 H5 r9 y! h: n" O
// var c = document.createElement("canvas");
5 N; P: d# N; L5 k
var img = document.getElementById("videoImage");- R! o! L3 C5 s6 R# Y/ i/ X" T# J
ctx = c.getContext('2d');
# C: E& A* a; a5 Z( Y
var dataUrl;
* V, {$ o1 ~& t. j9 r3 T' I3 r7 o
const socket = new WebSocket('ws://xxxx.com:9502');" ^" f; {6 ^( |7 ^4 \5 {
//Connection opened% p; F/ a) m# x* f6 a
socket.addEventListener('open', function (event) {
+ c% m* y5 B; l+ k1 |4 Y% a
// socket.send('Hello Server! im websockt');9 s5 ?' o3 A6 ]
});. \$ d# X. V1 M" [( ~# R* u' h/ t- m
// Listen for messages, I$ G8 M4 X, c1 G4 U9 ~- t8 ~& }* \
socket.addEventListener('message', function (event) {" |$ Y m( t4 i3 a. m' ~1 }
console.log('Message from server ', event.data);: |8 j, C/ Q, D- ?4 f8 X
img.src = event.data;
]& r1 p- Q- e0 ]; x4 q, c3 J
});
8 u$ v" v: ?. H: `$ ~! e
y4 r8 g. n9 F* u6 D
function playVideo() {# [) t$ P1 e: P7 l8 \7 M% I" P. Q
ctx.drawImage(v, 0, 0, 350, 700);' F; `1 K6 E& Q# X
dataUrl = c.toDataURL("image/png");
& e$ X: _% j$ x9 A4 l, Q( G, ]
// img.src = dataUrl;/ s+ G4 r/ m' d0 }& ?
socket.send(dataUrl);7 k/ t( Y! A; `
}
2 ?& y- H* r7 L) j
var tick;8 ]: ?$ p$ L5 W) p% { p
function aphla() {! U' W% x7 Q8 r3 @
tick = setInterval(function () {
( t _6 ` q7 U8 H) a
playVideo();6 J4 }7 k3 Y$ N& r8 L" k6 B0 Y
}, 1);
1 U8 d4 U! I+ f* B2 w' q
}
" O4 `, B) l2 W0 S
function vdStop() {
4 w7 c. Y% y* E) O
clearInterval(tick);0 ~5 B$ M" r" \# P1 \& e
}
2 r5 N: U& M) U

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");' @" s! A/ i( S
const socket = new WebSocket("ws://lm.com:9502");
$ @9 K; P: L. c5 L; ~
//: {6 A9 C+ l* W P8 Q; J
socket.addEventListener('open',function(){* L7 e( Z% Y' h) k. x
socket.send('Hello Server! Im live.html');
: L! e( ?' t4 l: Q& f/ U! S4 ~
});5 @: z7 K9 n0 N# L; i3 i
// Listen for messages
3 N7 r4 u0 a- p# E0 z: X
socket.addEventListener('message', function (event) {
6 Y1 ^6 M$ w6 o5 z) y& d r$ \
//图片地址
. Z( W1 Z. {- f/ m8 W3 g! H0 G
img.src = event.data;0 p: |+ n. }9 {! I, p
});- E- }" N: V7 [: f/ M

复制代码

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

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

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