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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
1 C; f, O. p7 w% ^3 o. Z0 f* @
//创建socket服务
, ]( W" |4 Y& V6 N! W! C* I
$ws = new swoole_websocket_server("0.0.0.0", 9502);
- ^+ t' e7 \8 ?; @
//监听WebSocket连接打开事件
5 f) S8 D' K+ J% O* r
$ws->on('open', function ($ws, $request) { Z6 z! u* c9 m, ^# f* @
var_dump($request->fd, $request->get, $request->server);4 I0 T2 s( S, v" L$ X" ?; j
$ws->push($request->fd, "hello, welcome\n");
" V: W+ i/ f. w
});! }7 N8 ^# I+ h5 @1 }
$ c, k4 b- u$ R g% |6 O
//监听WebSocket消息事件
* v x4 _0 l( a3 p) {$ |, P) {( x
$ws->on('message', function ($ws, $frame) {+ Z) d% X9 D8 A0 n( l' R/ q6 E
//推送消息给所有用户
' y6 W+ i1 ]! f5 C8 @1 q
foreach($ws->connections as $fd){
" T7 G9 q2 M3 }! x% l0 E
$ws->push($fd, $frame->data);+ Z. Y, y) C& F( v
}, x% C8 F3 [) C% K' x5 m
});
, j- v4 a) M$ N
4 J: G& ~& ~, ~( p u' d! \
//监听WebSocket连接关闭事件0 V, ~5 J) J9 ~2 ^/ @( p! M
$ws->on('close', function ($ws, $fd) {
: P1 t4 {0 e( m: D
echo "client-{$fd} is closed\n";
+ [, I7 C; \- C, B8 M
});% l& @6 M m6 v" C) b& B
//启动服务8 W3 O* M% h: E3 s
$ws->start();7 a% Y! z8 g3 b- F9 A, J& z+ `
# |8 y" i$ J: b9 W P5 d; Z

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器! y2 g! C( E! `+ X
const socket = new WebSocket('ws://lm.com:9502');
2 n [! I& L- c" C3 ]& Y
//Connection opened
; E" t6 z; e( I$ L$ p
socket.addEventListener('open', function (event) {& J+ T! w1 ~+ y) z
//发送消息给服务器
6 w: w7 U2 X7 m' ]# u2 e
socket.send('Hello Server! im websockt');9 i/ U4 a0 i8 x3 c3 }) @ U
});
" g" S; ?" \4 o) K; J4 K
// Listen for messages
- t `3 f! G% E9 U2 R5 u3 b, @/ X
socket.addEventListener('message', function (event) {3 d2 }: [* ]9 [5 D. U
//接收服务器返回信息
' }" ?* r: x& I% x8 S
console.log('Message from server ', event.data);) Q* k. t: p) s h2 X
});8 C& E* x3 o% e& E8 O. [
% s$ E# ?/ [0 Z. ?$ i- \1 i

复制代码

伪直播主播页面

html

<body>
5 Y, ]# M9 T+ ^) Z
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>( u( \0 ~! H% J! T+ H
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
* Q0 b; y% v; H: g
画布+ o$ Q: N) `4 F6 V
</canvas>1 \5 R8 ?" ^2 ^$ ^3 |8 m/ v5 E
<img src="" id="videoImage" width="350" height="700">" }6 F4 M. S- g% [
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>2 h* ~2 `% _* D% ~1 J
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
" |$ I) Y; }3 ^8 U* X& E& I
</body>
$ N" l/ w, F, c% r. e8 H1 r

复制代码

javascript

var v = document.getElementById("myVideo");
6 u8 L7 g; |) }/ [$ Q- o& B
var c = document.getElementById("myCanvas");
, ]" w1 S- f0 W G- }( @2 i
// var c = document.createElement("canvas");. |- L: L" |7 L& f% X
var img = document.getElementById("videoImage");; I* ?7 E/ u* w5 F+ O
ctx = c.getContext('2d');4 Q; o5 C8 ^) w) G7 n
var dataUrl;, S0 {, C7 w; H, q+ L
const socket = new WebSocket('ws://xxxx.com:9502');* P h3 a3 B' s& b$ V8 O- _! g, o8 s
//Connection opened1 a) y3 N5 S9 F
socket.addEventListener('open', function (event) {
' C, n6 ^& e" f* f5 k
// socket.send('Hello Server! im websockt');
2 N! y, E+ f# [( {: z, l) d8 w
});
( N l! _2 ` ?# \- |4 g+ h4 S/ X
// Listen for messages4 E" l1 q" N+ _7 Y
socket.addEventListener('message', function (event) {
: m2 I' K8 f- n( l2 N
console.log('Message from server ', event.data);
9 B9 A+ _5 ^/ R) Z" w9 l% V; \
img.src = event.data;6 n5 T' J* q, Q3 D& g2 @2 I. w* a
});0 s% [, H* o# i2 D I
% B+ O1 r# w& Y$ ^
function playVideo() {$ {; ~% |4 t: Z, z( u9 U- v0 M
ctx.drawImage(v, 0, 0, 350, 700);
; }$ O: l& N. _+ s8 u( F
dataUrl = c.toDataURL("image/png");
. D; S v( a [3 e
// img.src = dataUrl;, K) G6 E5 T9 J- d/ Q
socket.send(dataUrl);
( c( T8 s- s& ]
}. v2 |) c: \5 i4 i+ G
var tick;
1 _$ ]* O) B, Q& W; X4 {. \
function aphla() {2 S' o" i. M9 Z( B
tick = setInterval(function () {8 k* }: J4 T8 [6 f4 v9 `
playVideo();6 Y/ W, [9 Q$ ^* a% w+ g( _
}, 1);% ^* }& ]0 _. L% \" O8 Q3 ]
}4 h$ ^+ @* l8 u* C
function vdStop() {
# W- J: R: ^! Y+ R0 U
clearInterval(tick);
6 X9 n, X; ?- c6 @6 e# x" G* T; i8 V
}9 F) v& I* n$ g4 N. X2 x

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
& n& s' m0 U2 f3 z+ D* A z
const socket = new WebSocket("ws://lm.com:9502");% L. s% {1 E u1 P( W. |4 d* u& Y) Q& V3 r
//
% B' \" c _$ b8 x; @
socket.addEventListener('open',function(){# W* j1 u2 ~1 {
socket.send('Hello Server! Im live.html');
* O' N/ G$ m9 a/ N( ]& e
});. \- N0 g# j& s5 l- i; C# W
// Listen for messages0 ^+ R% n+ _ q3 \ ]2 |
socket.addEventListener('message', function (event) {
# y( G/ ]5 R- o! q! B7 c
//图片地址( j B1 w9 s2 D6 h1 O; S% x
img.src = event.data;
3 Q7 f$ j M. l* d1 J0 t# S
});! G$ N7 N8 u! N# m5 g

复制代码

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

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

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

浏览过的版块