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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
4 V' @9 ]- K% m' C1 j
//创建socket服务7 D, q: i( a/ a" k: B, H) S
$ws = new swoole_websocket_server("0.0.0.0", 9502);
1 y( o8 e6 Y% T7 \
//监听WebSocket连接打开事件
; c1 l+ Y$ e8 J
$ws->on('open', function ($ws, $request) {1 Z, {) |6 v1 n" `3 R
var_dump($request->fd, $request->get, $request->server);
. z* }5 y! i6 C/ L7 @0 h6 x
$ws->push($request->fd, "hello, welcome\n");
+ r; g; N- c2 T q2 }$ u
});
6 b/ c$ m: F% p
0 R) F( R9 e8 C9 P l: c
//监听WebSocket消息事件
$ }0 N. R$ ~5 U$ E
$ws->on('message', function ($ws, $frame) {
- H) [: y6 j' G* e2 k0 |$ h
//推送消息给所有用户
! H9 _+ B6 m1 `& f* ?0 Q
foreach($ws->connections as $fd){
5 n7 x9 U9 b* c5 d
$ws->push($fd, $frame->data);* F4 M0 W- U1 l4 L$ C) W$ q
}
" g1 v* {2 k2 |, }$ W. l/ T7 O
});
7 h# U% [0 Z9 H
' }+ f) S2 I% s. v; @
//监听WebSocket连接关闭事件: q+ p' A' S1 B6 Y
$ws->on('close', function ($ws, $fd) {: A, t' ]$ M( k+ h
echo "client-{$fd} is closed\n";
6 A0 y( o! F8 t0 f* M+ ?, l3 Z
});: X! K" Y" D# G9 T0 O: N
//启动服务8 c) g( e1 R# b T5 p) Y
$ws->start();' D2 f( @, L8 q% b
6 _) B* c! r0 V6 P. K: L- G

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
6 b1 T) [: K% F$ k/ `
const socket = new WebSocket('ws://lm.com:9502');9 g: l- x3 C: b( z- p7 j: X1 }, ~
//Connection opened) M' h4 V* i( q& P( d% R1 J- J3 M
socket.addEventListener('open', function (event) {4 {* e# J `: J- s' a/ w5 B$ z" ], [4 O
//发送消息给服务器# m: O4 H# F! c
socket.send('Hello Server! im websockt');
3 U {. T7 Z0 i' n% [2 z+ }
});
! d2 N2 P/ M6 B- ^$ o! {! d4 L
// Listen for messages
5 L7 a4 [+ r( u: x0 s$ f [
socket.addEventListener('message', function (event) {4 w: i ? Y+ h( B3 \" x
//接收服务器返回信息1 m) I5 m F( m1 s6 w! P4 a: i
console.log('Message from server ', event.data);
1 [( c) Z* b- S0 D
});
4 U/ n3 o. e; S( T' X5 U
2 \- i2 ]) ?+ R S

复制代码

伪直播主播页面

html

<body>, y; e, `) p- l# v$ k
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>- \( \ }( n$ y C% k* R- c
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">2 _9 U5 |: P: c4 z! G7 ?" p
画布9 v* n6 ?* ]# s, F( `. y9 b- U) {
</canvas>
7 q9 |3 K, \* ~, K( j
<img src="" id="videoImage" width="350" height="700">. A1 |: C/ }% M( C( a/ t: o8 Y
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>8 p( d1 B4 c/ Z3 [
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>* V# |. Q6 h4 |- p% t
</body>2 j( ~* j7 S/ r& \1 u* f; Z! c6 J# l

复制代码

javascript

var v = document.getElementById("myVideo");
# ^+ g& `" u8 J
var c = document.getElementById("myCanvas");" d9 O5 X2 x2 i+ I
// var c = document.createElement("canvas");/ }% r( b5 s4 w* r
var img = document.getElementById("videoImage");
6 d. b* ~- U3 v# Z
ctx = c.getContext('2d');
3 o" U s7 T0 n- U+ F& d% B x/ B
var dataUrl;' X4 ?& k" B1 V* \. ?' y: j. t
const socket = new WebSocket('ws://xxxx.com:9502');' B: F* T V* B& V% k; ~* J
//Connection opened
+ r. i! b2 c* ^ K9 g& L( Z
socket.addEventListener('open', function (event) {' V' F+ J* E$ l3 B5 F
// socket.send('Hello Server! im websockt');
( r+ |2 ]) _# x G
});# N5 h# Z7 v* S% {1 Y5 B- o
// Listen for messages
- \5 W- W4 l8 h0 P3 c
socket.addEventListener('message', function (event) {1 Q+ F3 M- p; R% p$ L1 c- I+ v& j9 y
console.log('Message from server ', event.data);; O2 p8 u. z9 K ]5 \# i
img.src = event.data;# p( d3 ^: a" Q" q+ f
});
& {$ e7 {3 w+ @; W7 o6 f$ l
& Q: [6 R0 d" c
function playVideo() {
3 t0 Z. g" k9 I e) [) I2 s
ctx.drawImage(v, 0, 0, 350, 700);
3 L _2 I: V9 h, R+ l2 U/ D
dataUrl = c.toDataURL("image/png");
8 v- e5 S' R3 K( g& D! ~
// img.src = dataUrl;2 y* F% x/ Z0 l# ?" r2 X
socket.send(dataUrl);
6 E$ A. Z0 Y% v5 o: F" Y2 l( z2 B3 \
}
' O2 h5 U) e: Y y
var tick;1 p# T# ?: H+ }% T
function aphla() {$ q& i) l% B) x+ p9 H. l
tick = setInterval(function () {$ V$ ?. k. J6 y
playVideo();
. h1 i; t/ s: E1 P
}, 1);5 o% F* K/ w: A# p
}, `6 y) Y J. ^
function vdStop() {4 {! V1 i0 h) |8 L( m0 f7 Q/ t6 Y! k
clearInterval(tick);
$ E' v4 P4 { f- T" e2 N2 y
}
3 a2 E" G3 B* {5 k2 G3 V1 ~

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
) W* S2 Q' t& X
const socket = new WebSocket("ws://lm.com:9502");
# ~; b9 ^7 w N9 }
//- ~3 o6 A+ l( ^
socket.addEventListener('open',function(){4 I* D3 M3 Z x1 O3 }
socket.send('Hello Server! Im live.html');8 _; O3 H+ _6 N/ h/ a- Z
});
. k$ k, E' F* Q9 Y3 q6 b- N
// Listen for messages! j$ K/ ^3 a, |7 J7 `: x# B& q5 }
socket.addEventListener('message', function (event) {( p+ }; n; X; \( y a$ L
//图片地址6 D1 k: X: i) Y! X; v4 r" K( `, i
img.src = event.data;
8 T: Q. A# H; s9 P$ _3 t- I# R
});0 z8 M" S9 k& c$ |4 N, e* ]

复制代码

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

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

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