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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
9 J. C* l: K+ p. k7 [9 M1 e# v# G
//创建socket服务' \/ q' f/ Q; X" ~/ J
$ws = new swoole_websocket_server("0.0.0.0", 9502);0 ?' o0 ~6 z/ z4 c8 v b
//监听WebSocket连接打开事件
7 p2 C0 Q- N+ z% L9 b( [
$ws->on('open', function ($ws, $request) {6 [) O5 J6 ]4 O) N
var_dump($request->fd, $request->get, $request->server);
j) m6 [4 G! ? X4 Y) m
$ws->push($request->fd, "hello, welcome\n");
$ b4 C" _4 j4 U3 H3 ^$ z
});
- u6 u9 t: `0 ^4 F+ f! }# u
! l! J) h5 v) M. G. E' E5 _
//监听WebSocket消息事件+ y8 V5 Y8 ^- v& C8 x
$ws->on('message', function ($ws, $frame) {+ S, Z( A5 D* T1 h g+ b- `; X
//推送消息给所有用户8 E8 m! N2 h1 ~' g6 Z7 a
foreach($ws->connections as $fd){& f6 E, X2 r2 L% Q9 j
$ws->push($fd, $frame->data);! M) U7 ]8 N7 z: y# n5 h
}
& n& X, O5 l- | s6 Q4 V! Y9 k& G
});
6 Y7 y& C$ J9 N' a- ?) ?4 X
! u* A1 f* ` s( D! i8 A
//监听WebSocket连接关闭事件
* e5 A+ G; K4 C& q$ B2 \
$ws->on('close', function ($ws, $fd) {" C: D! }( h4 P( F* r) M7 g
echo "client-{$fd} is closed\n";! O4 I5 {. @/ K8 F( Z* O5 m& V$ d
});
/ f1 W4 Z4 K' m' ]5 J, ]0 ?
//启动服务( F: l! D0 v! G, Z! E
$ws->start();
2 ^& f7 d' X4 ^! D
8 W+ |% P9 B7 u

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
1 z0 }* i/ h/ f7 f$ X
const socket = new WebSocket('ws://lm.com:9502'); {" Q1 Q1 @" k( n7 V: @- _: t
//Connection opened* d6 ~8 n' _' ^3 l
socket.addEventListener('open', function (event) {
5 D' B3 Q' ^8 t& o% F
//发送消息给服务器8 b0 n8 S+ w3 C9 L
socket.send('Hello Server! im websockt');
3 u+ q4 H4 w8 }( \5 q. a/ Y
});
J( w0 |7 B1 V- n4 C5 V* b
// Listen for messages. M* n* W7 w# G( u
socket.addEventListener('message', function (event) {
9 ? a5 w2 r2 p$ i
//接收服务器返回信息7 |; |1 s% I9 J! F
console.log('Message from server ', event.data);
: D) r" `# Y8 j3 G/ W
});
) h3 L7 h; K( |
7 {) C; @/ B! \2 b

复制代码

伪直播主播页面

html

<body>
5 ?' e* H$ i6 ]& A1 M3 L1 K
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
4 e4 Q) L' w+ l- X& f# E
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">8 D$ v- i$ s Y+ J5 p
画布
6 d) T3 x8 H. |0 I2 J# @
</canvas>
: S5 A: N7 ?5 n- }/ }+ s
<img src="" id="videoImage" width="350" height="700">1 Q7 M* Q' g3 n+ \- S J
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
2 g4 d. u# z( T4 _
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>( ?$ J: R$ ?! o4 w, }
</body>1 i( s. P2 r# x }

复制代码

javascript

var v = document.getElementById("myVideo");* y, [8 k" i5 T1 E! r+ i
var c = document.getElementById("myCanvas");
7 i$ ^8 \% V3 b& v D
// var c = document.createElement("canvas");
5 K9 g% u9 l( l
var img = document.getElementById("videoImage");
" ~+ M+ m. Q+ j6 ~( Q* B% F" T* d' q
ctx = c.getContext('2d');4 v) B( q% q2 ^6 Q7 q( M2 o# j
var dataUrl;& c, ^$ j( x* D) M1 M; [( u, C
const socket = new WebSocket('ws://xxxx.com:9502');
2 z: b3 Y) W, r4 V
//Connection opened
p+ }3 e3 e0 J. u$ z+ b/ q' O
socket.addEventListener('open', function (event) {
$ W7 v( @' }* L# D# K
// socket.send('Hello Server! im websockt');. F7 W% r1 {; W' q& Q0 ?5 q
});
# o. F8 j a4 `5 `$ o: s
// Listen for messages% `# V1 s6 U, L9 i
socket.addEventListener('message', function (event) {
2 ~/ s! R2 l1 h b* _0 x
console.log('Message from server ', event.data);) P @2 A" d2 |" \7 m" W
img.src = event.data;
8 x( H( @' t+ r2 i# U& f8 F$ |+ K
});4 O4 ~: `, K0 q" y; {% Y
" U) }5 W5 x/ {/ r$ G
function playVideo() {
2 O. w3 t1 I% f) q, n6 \ _% K
ctx.drawImage(v, 0, 0, 350, 700);
/ a, F8 j$ J9 ^! U5 i& n }+ D) t
dataUrl = c.toDataURL("image/png");
8 t' H c% V1 g8 E1 v
// img.src = dataUrl;, M" b; z! L! L& m
socket.send(dataUrl);# g. |! H! K5 u4 a
}
6 g* u+ o/ c5 |1 C1 N( k6 y3 R
var tick;: B6 v2 d( h- n1 f+ a
function aphla() {
. V3 b7 @+ p" M }) Q" H
tick = setInterval(function () {2 J7 q0 g* m( @
playVideo();
. V$ x, e; A' }8 s3 a" E! s
}, 1);$ j2 ]0 \& @& r) C
}
$ d: @% r' A0 Y$ w) z
function vdStop() {
& e1 i9 k! g5 q" \
clearInterval(tick);
D2 s8 d$ _( S$ |5 s
}; v7 p4 V% E, c9 B6 A. y' V8 n

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
3 D6 Y2 i& z# l4 K+ }
const socket = new WebSocket("ws://lm.com:9502");) c6 w4 C8 t c& c P' n- o$ n1 B* q
//
1 `8 \. @! w& X7 @
socket.addEventListener('open',function(){
/ Z* p- G( w2 L6 l
socket.send('Hello Server! Im live.html');
5 u5 y, Y, n4 j t7 ?$ }3 d. S
}); z1 f- w* D7 ^3 C9 r1 E, D) l
// Listen for messages' n8 U4 h/ I1 e7 f9 `
socket.addEventListener('message', function (event) {
$ V: M9 q$ l4 H2 `1 b
//图片地址
! e- V. u2 X& I$ I4 S( G* W
img.src = event.data;
6 f5 y- p8 I: }' _' ^
});9 i* s, `, e& l9 }/ G4 G

复制代码

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

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

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

浏览过的版块