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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
/ {3 Q6 G3 M2 {' B: c- O
//创建socket服务
" s0 u$ a4 ^- G6 g5 R4 x
$ws = new swoole_websocket_server("0.0.0.0", 9502);
* v' x. \9 g8 m# o
//监听WebSocket连接打开事件; E" n( b7 m( }) d$ D% g* k
$ws->on('open', function ($ws, $request) {6 C. \- `9 b# Y" S/ B! U( A/ C
var_dump($request->fd, $request->get, $request->server);+ u9 F+ ^6 @* M
$ws->push($request->fd, "hello, welcome\n");
0 t* E; x' `+ G+ t, J5 r
});
5 t3 v @! V5 c! c
, C% l! S+ p1 e6 _5 n
//监听WebSocket消息事件 ]4 y5 D. T1 N
$ws->on('message', function ($ws, $frame) {3 s$ B0 r7 `+ P0 h- V. F
//推送消息给所有用户8 u. s; ^( x8 Q1 e9 _, b4 s
foreach($ws->connections as $fd){' M) |) v# s: f- ]/ M+ M
$ws->push($fd, $frame->data);4 ]3 `5 k5 {2 N' [: ]. O& \
}
$ w! D r0 x3 Z! b0 b4 |% j
});6 G3 u" P3 s+ P, V) K, w, O
6 r: Z+ {. y. f8 R/ {- ~
//监听WebSocket连接关闭事件/ A+ Y; o3 p2 u/ R
$ws->on('close', function ($ws, $fd) {/ D6 a, b$ n$ p& i7 R
echo "client-{$fd} is closed\n";
) C; z, V) A4 g C4 D
});, z2 ]6 V% d8 v. ~1 }6 J) M4 P! ?' c& N8 k
//启动服务2 s+ }: [6 @- e3 F. s
$ws->start();) [7 g) u" o- U
6 k% Y9 |5 W' o! W5 f8 K( }$ k

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器. G2 P( W4 P3 g+ e7 \5 b
const socket = new WebSocket('ws://lm.com:9502');
/ }9 q$ e& r4 Z# O3 I. P
//Connection opened6 r$ A; W/ p; o& X
socket.addEventListener('open', function (event) {" k0 ~$ S7 q; E) S5 o: e
//发送消息给服务器. b" v3 k G4 S; d1 x" @( e
socket.send('Hello Server! im websockt');% y' B8 h- R" v' {; @
}); ~: R8 c+ Q/ t n* U1 C
// Listen for messages
& f+ u5 J5 q0 L( b {
socket.addEventListener('message', function (event) {
2 q0 B/ s+ y8 S, Z) ]' y
//接收服务器返回信息4 B1 a. Q: Z6 k; Q$ T: N& Z, S
console.log('Message from server ', event.data);
% [0 h, x& U& K3 U6 q( X6 J0 W
});
+ e# m/ D' J8 d- b$ j& f
* h4 J4 |5 v0 C* k; g) d0 D, D8 w

复制代码

伪直播主播页面

html

<body>
4 @; y$ Y) z5 e; K$ g
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
) a2 `5 M: N( u5 F9 S* B
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
6 F8 t, u" V% F* p/ p j, b2 \
画布
m& ]) P; ~# H
</canvas>
7 O, b6 F, i7 g; p! ^* @6 B3 x# c% I
<img src="" id="videoImage" width="350" height="700">
0 @% i ^; Z! t. G
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
1 S I! d* C8 ^: S
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
. B: o2 b6 z- p) m& s
</body>
: q, z# Z+ c; B- o# L" Q5 c7 G

复制代码

javascript

var v = document.getElementById("myVideo");
0 y3 [6 \) N* P9 j6 E& ^* V' a
var c = document.getElementById("myCanvas");6 U1 ~6 I2 X1 C1 u- b
// var c = document.createElement("canvas");
3 Q& P) y' q4 J1 k
var img = document.getElementById("videoImage");
" @+ ~9 f' g$ j% a# _+ o: ^) X5 p7 Z
ctx = c.getContext('2d');
+ W6 h3 G/ W; K' K6 L, K' e
var dataUrl;
9 k, T+ K2 F* |% h7 o$ J$ I
const socket = new WebSocket('ws://xxxx.com:9502');
{* G# Q1 n' H9 M v6 ]
//Connection opened
2 a3 k H) K7 `4 {" _6 }
socket.addEventListener('open', function (event) {
* t5 _" V" r4 U/ n3 G* N2 Q, R
// socket.send('Hello Server! im websockt');! o: h) [6 K: |3 i$ `: D
});
# ?' t% [+ w3 ?& J% n3 _0 R
// Listen for messages O2 R8 J8 Q' q: A7 g1 O8 `( D
socket.addEventListener('message', function (event) {0 ^9 `5 P3 h; ^4 `( j# g& [- g; k
console.log('Message from server ', event.data);
9 \5 ~1 K; ?) c; L! ~2 F
img.src = event.data;7 f! @3 p1 L' A& q9 m4 w. m
});- |8 X3 k( _4 x t8 }' _% O
+ B5 N f( P ]/ {
function playVideo() {
+ _ P+ E+ H$ h9 u
ctx.drawImage(v, 0, 0, 350, 700);
( f& ]4 e1 {1 q4 K
dataUrl = c.toDataURL("image/png");
! I. T" }/ U8 r L
// img.src = dataUrl;
- y' `" _7 [7 ~1 \4 N) o
socket.send(dataUrl);
4 Q# r5 }& {0 {# f8 N; T( @# }
}; l" |9 B2 ?% D
var tick;/ Z1 }% l9 j3 h4 |
function aphla() {: b" B- W6 }9 k4 }
tick = setInterval(function () {+ v8 k1 d/ o/ `, m+ J1 u
playVideo();
, @ @; o' E% s* C( G
}, 1);4 u# Z: g+ Y, k3 V9 @! x
}
$ K" z: m8 j$ e7 G3 r* m
function vdStop() {# S0 k) }' ~7 g8 Z) ~4 ? l# M1 [+ L
clearInterval(tick);2 m7 d( d- M5 ^1 p4 O2 f0 h
}- ~5 T% m! r3 i7 Z* i1 o) N( H8 |

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
. O) F$ c. Q7 T; R3 `' I' r% D, p
const socket = new WebSocket("ws://lm.com:9502");
- Y% C, m8 {4 a; Z* k* |
//# W# E. P+ l3 T$ }: h5 N: y9 d1 \
socket.addEventListener('open',function(){$ y |6 }& F$ u3 ]3 C) @% [* N; @# H
socket.send('Hello Server! Im live.html');
# K3 X& \+ ~; l; H; T
}); ^+ z+ ~+ i; d- e
// Listen for messages
2 _1 F. P* h* o' z- W' d0 z# L0 K. u
socket.addEventListener('message', function (event) {
4 K! J$ A! x+ ^3 V
//图片地址/ |$ Q% \, x% u- X' |7 w6 g' A
img.src = event.data;
. Y% O7 G' L& f( H& i
});4 k% n# x! I2 r" X8 W2 N4 W, G {

复制代码

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

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

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