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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
: T7 V- X5 Z4 \6 G9 T
//创建socket服务9 m5 @+ H C6 j
$ws = new swoole_websocket_server("0.0.0.0", 9502); j. ]5 J7 j/ Y* K
//监听WebSocket连接打开事件
* u) P! }2 x# s
$ws->on('open', function ($ws, $request) {
V4 Y& w# Y& S) z9 e$ l
var_dump($request->fd, $request->get, $request->server);1 d8 o: N9 e# H) G
$ws->push($request->fd, "hello, welcome\n");
2 s5 q4 g1 _- z1 ~* P/ A& W
});
* _- m- ]: E( o; y. R" h9 k! X
' f! i% @$ L5 u+ A
//监听WebSocket消息事件
7 K+ ^; v. l( T: s/ f: W! Z$ ?6 @
$ws->on('message', function ($ws, $frame) {
0 U+ Q* |* }% g8 _: A
//推送消息给所有用户& a) V0 a' a4 k/ Z; w% D" Z
foreach($ws->connections as $fd){
1 c* P8 g2 P5 l! X
$ws->push($fd, $frame->data);# `8 f O4 ^& o/ @% k! C- q" R/ h8 q
}
) K% R/ f3 h7 X, \, R
});
: ]: ]3 u3 @8 k6 K0 D# F
5 c& l6 \- i( C
//监听WebSocket连接关闭事件' K6 y2 q2 p9 {8 q3 _& `# b: G/ e
$ws->on('close', function ($ws, $fd) {, L" h- v# Z9 V6 a
echo "client-{$fd} is closed\n";( [. U3 |) Q" q Z9 M# H1 O
});
: U" u! p# @/ Y3 m7 X
//启动服务
, b( }7 t) {! C9 \0 B/ {7 s
$ws->start();+ O' P# _5 H6 D0 H+ }6 V0 Q. T2 c8 C
9 H) w T/ t$ k. \/ |4 o+ i% c. O

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器8 F8 I9 Z0 i4 u! c! y2 T) J5 H
const socket = new WebSocket('ws://lm.com:9502');
3 d& c' b" o# s& Y
//Connection opened7 q5 w- h/ G _, A5 F
socket.addEventListener('open', function (event) {5 w6 O/ @8 j( D& Y
//发送消息给服务器! ~ `5 z" W3 [9 C T' x1 e2 U
socket.send('Hello Server! im websockt');
$ ^& C! _1 K) Z( I; F. Q) \
});
+ d! R% c2 m( g+ `- j
// Listen for messages
3 U# s# l) k4 s
socket.addEventListener('message', function (event) {) y/ |3 F0 i( v* h1 \% H$ r
//接收服务器返回信息
( K, Z# W9 [( L4 W6 B
console.log('Message from server ', event.data);
Q# H2 V& ?/ ]
});# y9 U4 r; Z5 ?7 J+ T2 f
" a! M% B2 Y8 e+ p; E9 G7 g

复制代码

伪直播主播页面

html

<body># S6 {! M1 X/ c6 t7 N
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
( U2 {8 r1 O1 a' ~+ @
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">: \. ~+ t" v% j- H& L
画布6 b1 O8 a3 I0 h- \
</canvas>
' T7 j) P+ L8 Z/ ^& y2 B) J
<img src="" id="videoImage" width="350" height="700">
1 N7 Z b! i" } M6 F
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
3 W) B& I2 @8 J* H8 g" }& g
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>; ~0 |7 n; g% }, G' }) _2 V- B! s7 S" ]
</body>. p/ g9 G7 q0 U" R6 q

复制代码

javascript

var v = document.getElementById("myVideo");4 K# C1 H; o$ l. n' F! e ^* z
var c = document.getElementById("myCanvas");0 d4 J0 v8 ?0 I* i* R4 j
// var c = document.createElement("canvas");
1 ^* B! e3 l* Y) S
var img = document.getElementById("videoImage");& a& n, G) Y& P7 J. L% @
ctx = c.getContext('2d');
1 C5 r/ p2 R+ ]4 X- `/ }# I
var dataUrl;) F8 V( U# O2 R4 p4 E4 G1 T
const socket = new WebSocket('ws://xxxx.com:9502');
; U( [9 t- ^7 `! m, W2 v
//Connection opened2 k8 ^- U( W: r) P! i& w
socket.addEventListener('open', function (event) {# n6 H R4 c8 ]; f
// socket.send('Hello Server! im websockt');
) a Z6 X% k9 M( |! N
});
) y" c& Q& H+ |$ s$ C/ T
// Listen for messages7 z0 D7 n& R! P- e$ k
socket.addEventListener('message', function (event) {
5 m3 W+ Y: t0 y% k6 U7 V1 ]# b8 Q
console.log('Message from server ', event.data);" f$ C6 P$ b" L
img.src = event.data;
/ H+ Z7 r% A( n% M& w% h
});6 u0 k. w- ]: p \8 m( l
l1 A( p4 u6 u& g- R% t& d
function playVideo() {
* L- e% w+ R& ]
ctx.drawImage(v, 0, 0, 350, 700);# M- k& K0 v+ C4 u
dataUrl = c.toDataURL("image/png");7 G2 H7 F [# a
// img.src = dataUrl;3 s" o3 [# J1 x3 b1 {
socket.send(dataUrl);
7 g7 _$ p3 a% L+ b# S% U
}' j3 @3 L# B C
var tick;
- Y3 v2 A* S, F0 d0 s
function aphla() {
' @* h3 U- U+ P% y/ {# N: I+ h
tick = setInterval(function () {/ y; v4 w- {0 i, G
playVideo();
/ [5 u7 R5 `. H2 A+ x* b# V
}, 1);
. K% k8 i' [+ ?& H; `
}
$ w/ Y3 T7 A! J9 l9 e. P: n- g4 O* Q
function vdStop() {
+ a' x7 k U* N
clearInterval(tick);
; B; o! y, {& S' R- s# p0 H( Y L
}
) b, c0 }# J, @7 J7 \

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
4 E9 r/ U" Q- P6 ~' E# D
const socket = new WebSocket("ws://lm.com:9502");7 N/ C% E1 d4 m B
//) F' D$ }) q3 b# y- N
socket.addEventListener('open',function(){3 J9 _7 y) P, j7 S0 Q/ P
socket.send('Hello Server! Im live.html');1 K* Z$ d. y, p+ S. P5 w
});4 |- n) Q7 Y7 K. x( G/ y6 Y
// Listen for messages
' Z0 Z4 B, O7 T- s. t
socket.addEventListener('message', function (event) {$ V; y3 g" V6 R8 t' N! ?
//图片地址& I% ~7 D, e( D# n. G, O# \: b
img.src = event.data;$ c: m9 e( J3 b
});. R# M+ q5 X0 Z5 ^2 P% l

复制代码

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

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

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