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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
x; ]5 \' X8 v9 `4 e' \& a
//创建socket服务
5 h2 H; b& S1 N' z
$ws = new swoole_websocket_server("0.0.0.0", 9502);6 {; x" n! Z' U8 X: n
//监听WebSocket连接打开事件1 W$ h( A5 q) W. y3 M" v
$ws->on('open', function ($ws, $request) {: ?% e; H% j* _0 E* q/ {' C
var_dump($request->fd, $request->get, $request->server);
4 @. }8 ? Q+ \) D& K) ~& |
$ws->push($request->fd, "hello, welcome\n");" \/ ]# I9 U6 _- q- l5 b
});, x5 N! n. V( a2 v- [( ?
' Q% \- s1 f V0 T D$ u
//监听WebSocket消息事件
9 J% k9 H- d. a+ Z' S
$ws->on('message', function ($ws, $frame) {. [- f1 V% B y% @% K2 |( O
//推送消息给所有用户
, @& b% ~! W, R" q) S& Q
foreach($ws->connections as $fd){6 T0 }3 n3 J% e7 X& u7 T" t
$ws->push($fd, $frame->data);# |" f% x1 A) S7 I, Q3 _
}
( P9 m) V! @3 g$ A2 b) ~1 @
});
2 X7 G# e, g, Q1 J) s
6 r; D; H# M0 O, f" R2 _
//监听WebSocket连接关闭事件
7 n- O4 _/ b$ K) K* G
$ws->on('close', function ($ws, $fd) {
" s+ S% c9 [7 i; t& v F
echo "client-{$fd} is closed\n";& U v7 e$ q0 J0 ]& s1 c
});4 [9 E ^1 d8 c0 R9 L
//启动服务
, f& y( I+ t. T7 z2 E
$ws->start();
9 E; C1 N$ u7 T' J5 o$ Q3 M
8 `/ Z: f! G+ e; P4 p3 z; G

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器* ~/ O8 G+ l9 Z/ i/ x
const socket = new WebSocket('ws://lm.com:9502');+ |! L: `2 ?9 u G) t% O
//Connection opened
- l" E- j0 O1 Q i' d1 R
socket.addEventListener('open', function (event) {/ J! K( B4 q! h0 @
//发送消息给服务器
6 c- l2 l: X& L9 ]) G
socket.send('Hello Server! im websockt');
, d. v) F& F% H3 B% P, ]
});
! i9 f% O$ {/ Q2 ^( o2 s: c
// Listen for messages- B. Q& z! z* s' D8 p9 }6 M2 Q1 _
socket.addEventListener('message', function (event) {
5 i* W- |2 G& ]: n
//接收服务器返回信息
# s- }' }8 n! _* A2 D4 { A9 e
console.log('Message from server ', event.data);6 t$ n2 [# {& K1 T
});
8 u: ~2 e+ O' A! S. H4 H# w5 e
1 L+ N% V! U( K

复制代码

伪直播主播页面

html

<body>
* j# s/ w- U$ t
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>: C/ Y* Y6 t H# ?$ Y
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">( A& y7 D9 S6 z$ \" F( i
画布9 J) y) }5 `2 l; d- z6 ?9 g8 C1 C
</canvas>! A7 n2 g# f: ?
<img src="" id="videoImage" width="350" height="700">' K2 T Q# ?7 u+ j' a! d' p
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
" X6 Y6 o( F1 @/ t: u
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>+ \" t0 l. \0 g" F+ e
</body>
0 n* o$ z; P- c" T( m2 N

复制代码

javascript

var v = document.getElementById("myVideo");
" [! t$ q0 g" e& D; ]0 {3 B3 a
var c = document.getElementById("myCanvas");
: \5 e: u4 r% y& ?7 x) [/ n
// var c = document.createElement("canvas");
0 F6 h3 ]- {- F7 P
var img = document.getElementById("videoImage");
7 W- W: h1 j8 W1 C4 f/ [' s: _
ctx = c.getContext('2d');; h: ^; l6 z5 J2 y: D; }! H" o: W. E( c
var dataUrl;
1 v i- H2 @0 \- W3 v
const socket = new WebSocket('ws://xxxx.com:9502');
1 s4 [+ H) z( V( y; j7 h& k" h
//Connection opened
8 y5 g6 w% O, T9 P N
socket.addEventListener('open', function (event) {
: ?+ P. W4 H8 C$ t7 [3 I F$ P
// socket.send('Hello Server! im websockt');
& k+ b4 @$ n$ K" ~# l# ?
});
0 L4 B ~' p& U( t8 v4 f
// Listen for messages4 ] n9 r; B3 J
socket.addEventListener('message', function (event) {
\6 C. }, ?5 a! a* `1 B' m
console.log('Message from server ', event.data);" F6 c5 O! d5 F0 L. y. \
img.src = event.data;9 c( Y N1 q) C, B. b
});
( \' s( X" L3 y. u; `
' E0 w/ Q: O) i, G3 V
function playVideo() {0 E* {: R2 H7 k
ctx.drawImage(v, 0, 0, 350, 700);0 K8 n) E4 E8 ^
dataUrl = c.toDataURL("image/png");
5 m g5 l& c% ~8 c4 V' O" Y- x G
// img.src = dataUrl;; F/ G8 N! m0 B. I0 [1 B/ k% n
socket.send(dataUrl);
% O6 o6 X% `% z Z! w3 p- Z; Z
}
( z) M4 D) T7 J/ F7 G6 \* @
var tick;
. {, r1 a6 F6 }. f/ X/ }6 F
function aphla() {
tick = setInterval(function () {
4 S2 l" p7 Q) L" t; m
playVideo();( z0 e1 n' A! ~; O9 h4 J9 t
}, 1);
2 t: U# Q: r& s+ b" B7 @
}$ L, f! N& \( h; p
function vdStop() {
0 T! g) o5 O6 \# d$ q! j
clearInterval(tick);
& y& B5 B7 x* o
}5 O& f9 F: M1 t4 C0 x% [5 i

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
0 Y) c; r0 i& T( a- f
const socket = new WebSocket("ws://lm.com:9502");
$ [3 y# B4 f, h
//
4 Y a% s4 U) l
socket.addEventListener('open',function(){3 c, W$ V, N! x
socket.send('Hello Server! Im live.html');
3 m/ H. K# c/ r7 t0 j5 q' @6 G6 S
});
" _9 o! }2 ~- V, N
// Listen for messages$ F5 I) } k) S( v& j: e) [- F
socket.addEventListener('message', function (event) {# e1 b) G, k' Z# T
//图片地址! B: c% S: |1 d: ?* L# s. O
img.src = event.data;8 ]4 X' ~' U4 y+ a
});+ P- b4 ^" C# [! n! [

复制代码

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

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

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