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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 0 v. `" s. t' t
//创建socket服务2 u |0 u/ Y% [' R
$ws = new swoole_websocket_server("0.0.0.0", 9502);' P J4 u y% W d- u' Y
//监听WebSocket连接打开事件& l8 }8 R; ~& Q8 w1 p
$ws->on('open', function ($ws, $request) {
$ K+ ?! \& e" z- l
var_dump($request->fd, $request->get, $request->server);
' R+ b; o* s1 F' I* _* l6 h7 x
$ws->push($request->fd, "hello, welcome\n");6 ^- O+ E4 v3 ?7 Y w# A$ e* |
}); |7 P* D0 v( W$ g: [, }" x; D
- n y) O: v( ^7 T! } k
//监听WebSocket消息事件
; `, Y* n. w- F! g5 i- M8 s( G4 S
$ws->on('message', function ($ws, $frame) {
$ i' B! \' b7 A$ M8 Y9 G
//推送消息给所有用户
foreach($ws->connections as $fd){
$ d% O$ H% e& G
$ws->push($fd, $frame->data);
, a. Q+ S& l; ^& r2 @
}' @! v, T# q$ Q5 Q) R3 f" u
});# y4 K* B4 f$ t& A# p7 y
; r$ V" B; x [9 \7 p: a
//监听WebSocket连接关闭事件/ I" k F0 d- G) ^
$ws->on('close', function ($ws, $fd) {, |2 h& i2 | |6 n
echo "client-{$fd} is closed\n";
9 n4 ^( L% K/ [# o8 L
});
" O6 e- k3 a+ j4 V) q, t! n- c9 w- Z, W
//启动服务
8 e- B+ C- M7 f5 Y. ^+ _' [" z( m) N" d
$ws->start();
( F. K# _0 I! _7 k9 l2 `
4 t$ Q# N9 c; u3 t( w

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
6 f' g* ~% U1 E, W
const socket = new WebSocket('ws://lm.com:9502');$ U' N5 Q- G4 t q5 c
//Connection opened" c, A8 [# }* @* L! ]
socket.addEventListener('open', function (event) {
) R* U8 c9 M$ [6 Q" f6 {' M/ Q
//发送消息给服务器
) S8 P* N/ t$ M/ u
socket.send('Hello Server! im websockt');
& h2 D9 {& I( G: I5 l
});4 k9 N1 h( d N8 x
// Listen for messages
3 e* @& p+ Y4 R+ ?: J* _
socket.addEventListener('message', function (event) {
' ~; Y8 I0 g- J
//接收服务器返回信息# Q! J% O$ x/ f5 f& G
console.log('Message from server ', event.data);
; `0 V' M5 X3 _
});
8 s) \8 b: `4 T, ?. N6 a
?% a. E, w5 V/ t5 Y

复制代码

伪直播主播页面

html

<body>
+ `: n- `* j. M/ j4 ]' H* A
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
# O; X$ n( F# k! e8 h1 D, n3 [2 d
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">+ F- Z# ]- [1 z) g. T: x
画布7 k7 L5 S$ k s. J8 m' n
</canvas>( r. [7 y5 s* ~) @/ U
<img src="" id="videoImage" width="350" height="700">* s, ^# Z( M/ R$ L' O) o) Q
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
& r( Z- R3 o4 g; @3 Z
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
4 {8 ^% q- W7 l* p( B9 s; r
</body>: D) `3 C6 s/ r$ }' e( I; Q

复制代码

javascript

var v = document.getElementById("myVideo");& v% @& m6 k% D
var c = document.getElementById("myCanvas");
9 `+ @7 m/ \/ z7 V5 m0 v
// var c = document.createElement("canvas");
Y! j' i N' x9 k2 S
var img = document.getElementById("videoImage");
: j; T. c3 F$ Y2 B
ctx = c.getContext('2d');$ x2 x6 F1 F. s& E
var dataUrl;
4 ]6 L* Q% W/ E, j( }
const socket = new WebSocket('ws://xxxx.com:9502'); l$ z7 U& H) u3 Y" j: N5 j
//Connection opened: S4 [; A5 v& ^, c5 U8 V
socket.addEventListener('open', function (event) {
/ N, d: [, B# ?) _0 W
// socket.send('Hello Server! im websockt');5 d- |+ j: D3 a4 n- s
});
% a3 K- P- K: N. D% e% V4 ]2 P
// Listen for messages
0 ?$ N2 Z9 w2 M0 ]# p; ^' g
socket.addEventListener('message', function (event) {
$ B: a: E, d1 y j# W6 p+ t
console.log('Message from server ', event.data);
; B& W& o% E8 N# F; P% I
img.src = event.data;
. g ?7 [+ w$ ]
});
9 z3 ]2 i- k- f6 `3 W8 `; M
% u# T6 G% D& [) q. @7 ?
function playVideo() {
4 W( x7 e; I& w, f0 b
ctx.drawImage(v, 0, 0, 350, 700);# }" k4 A* J) a; l
dataUrl = c.toDataURL("image/png");
( y# N/ I7 Z, n5 _6 a
// img.src = dataUrl;8 E2 e: N5 _% ^; N* w
socket.send(dataUrl);6 w' H7 w7 ^) i% W. w+ c
}% T' @3 D& V+ C8 \. s) W
var tick;
4 Q: Z( z, ?. q/ r1 _
function aphla() {+ r% K* w* w( ?: T5 j9 W
tick = setInterval(function () {) e- n1 R/ x( Y8 e
playVideo();
* A" @8 h7 ]; y4 V O, S7 M
}, 1);
4 }. A" L1 ~) ~7 e0 s
}
7 ?& ?. o8 @( d, R C3 S
function vdStop() {- X5 D' O/ X1 L& n- x" ^9 n D
clearInterval(tick);
5 a3 G3 j1 d& u+ i; J
}
" p7 ~# W1 i- N" p

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
1 g1 ?* N. Y# {
const socket = new WebSocket("ws://lm.com:9502");5 D9 L9 h7 g% W
//8 D) d c3 h3 e6 J2 s' z. A
socket.addEventListener('open',function(){9 C; F5 @7 s- |) B) ?7 c
socket.send('Hello Server! Im live.html');$ X$ I1 Q" e4 `: v) A7 k
});
$ u4 T5 J* P* B5 t& C: j/ W y
// Listen for messages
$ U+ S/ M8 t" w# }9 P) |& O
socket.addEventListener('message', function (event) {7 N l+ B& H! G% n7 v9 M) ^% Z
//图片地址
1 R2 O& c$ j( i D# n! B" x8 _8 G
img.src = event.data;
: b7 Y3 k& n6 B7 l# ]
});9 h0 T* _3 F* K+ u- F. j+ f: z# n

复制代码

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

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

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

浏览过的版块