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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
5 v' T# H* t& x6 w/ J( j
//创建socket服务
7 X- r$ R% s7 o$ a# f
$ws = new swoole_websocket_server("0.0.0.0", 9502);
7 b) x/ `1 P; f
//监听WebSocket连接打开事件. D7 _ m b. t( v
$ws->on('open', function ($ws, $request) {( Q; c# B: x8 F3 [) t7 N
var_dump($request->fd, $request->get, $request->server);7 ^5 }5 V! q H! }+ `8 p9 I
$ws->push($request->fd, "hello, welcome\n");( r6 ~5 I8 K- v, @9 o3 B7 u
});7 ]# \+ s7 O& m
+ G" P- @* @0 n8 e' S8 e% c2 q6 l% e
//监听WebSocket消息事件1 S6 S% }9 U0 x4 \8 T; j0 T4 F0 H
$ws->on('message', function ($ws, $frame) {
% W5 i, S; ~% K! V
//推送消息给所有用户
! x) c0 k" B: y2 q. m! g1 c* s8 k
foreach($ws->connections as $fd){
8 ]- j6 a- m0 l2 Z [) n2 h9 x
$ws->push($fd, $frame->data);
4 E% U- Z7 p! @0 D9 b" R2 h! O
}
2 R3 u. T5 o; l" F* J
}); N. \, b; B; C! G1 }
' }. }% `6 U/ G
//监听WebSocket连接关闭事件9 }) \" _3 N% ?# Z
$ws->on('close', function ($ws, $fd) {" E6 J* y/ J p3 |- }) y
echo "client-{$fd} is closed\n";+ d# l2 \7 k k/ V: E. ^* E9 B
});
$ U m: `, H' a% B0 y
//启动服务
; Z/ y. P% b7 g3 @" f& V5 d3 t
$ws->start();
) r; Y8 a: R, m1 g+ E1 s- {- {
1 A4 R; ^2 _# Y$ D# H: r

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
( Q( @$ v. r w% G/ |4 P5 _5 }
const socket = new WebSocket('ws://lm.com:9502');! }; O6 ?4 S5 x' `2 `
//Connection opened. P$ w2 }1 D3 U. W& }& t8 d8 g
socket.addEventListener('open', function (event) {2 r7 p$ Y" I" C# m% c
//发送消息给服务器/ V0 w+ Y! H" q3 t/ c6 G n
socket.send('Hello Server! im websockt');
8 L/ I8 {: f( ^( q
});
4 }3 w& ~$ n5 N% U+ A! t' {& V6 v+ H
// Listen for messages' }$ y) I6 ` f) y
socket.addEventListener('message', function (event) {
. y( F, T8 _; G, ?0 L+ @ f
//接收服务器返回信息
. x. N3 Q5 X, g4 V
console.log('Message from server ', event.data);
: L; F3 N+ e0 X# C T/ O' [
});
, m7 H5 e$ ~6 g
& d+ t6 z3 h- ?3 _& X

复制代码

伪直播主播页面

html

<body>
# V' E4 {) F9 p* x/ h1 v
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
- Y+ z0 M/ i) d
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
& f8 o/ ]$ q! G* V
画布
% X! i3 l* \9 Q& o: r
</canvas>
8 p6 V7 j" h/ i: g9 x+ Q& K* C0 P
<img src="" id="videoImage" width="350" height="700">
5 g( Q& i* _* \
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>9 d7 S |$ h1 r4 ]
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>& |( ^+ W' O1 I2 {' b
</body>- i# d+ q, w& M0 m; j: l" K3 r1 K