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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); $ ~5 w; K8 i1 u) \0 }" a
//创建socket服务6 u, ]$ ^/ n9 Q0 d- N- F8 k
$ws = new swoole_websocket_server("0.0.0.0", 9502);
: X/ q) k& i7 _7 z) T$ c
//监听WebSocket连接打开事件
0 j3 Y/ [( B% `. G. b- E
$ws->on('open', function ($ws, $request) {0 |& }5 ]' F0 k$ B! y) R
var_dump($request->fd, $request->get, $request->server);
" s0 ]3 `0 {6 p' _9 |+ b$ P
$ws->push($request->fd, "hello, welcome\n");8 W0 C$ U9 w I
});
3 h [) W7 K% S7 e* s `4 Q
) ?0 N+ o+ S9 V x: R
//监听WebSocket消息事件, W0 z1 M# p. a3 \- P+ |8 c
$ws->on('message', function ($ws, $frame) {; g% G& S6 B4 g; U B k
//推送消息给所有用户 e0 K4 z0 a! U: n4 o, K1 o
foreach($ws->connections as $fd){' N8 x6 p/ y" { {+ }# \
$ws->push($fd, $frame->data);
# I i5 e2 {( z- G
}
; ]3 H( Q# b" M1 y6 r2 H
});& Y g" s: R4 |: D Q
( l0 J( t3 H9 z2 P( N
//监听WebSocket连接关闭事件
* A5 r* ]- a- ?$ u
$ws->on('close', function ($ws, $fd) {# U# {, a5 T9 y. M, F. ^
echo "client-{$fd} is closed\n";
1 \$ D6 f: p# e8 q
});
& g# q- l' n) Z# n: ^
//启动服务: j0 d% ~& C- J9 u4 {, C$ ?3 M% \
$ws->start();9 a+ u( z6 U$ U$ L
" w) w( Q, k$ d, ]+ t; Q

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
n1 E& i$ e: S$ C# V" I
const socket = new WebSocket('ws://lm.com:9502');
5 R' q- f# [6 {, O$ z3 B: o3 [3 }
//Connection opened9 `3 |: L1 i: J: M9 ~# w7 N
socket.addEventListener('open', function (event) {3 H! ]! c$ _2 U4 G$ ?2 R
//发送消息给服务器
& m/ I. C" L9 S0 h( A$ y
socket.send('Hello Server! im websockt');
4 N$ {9 _& U0 B( O
});
7 X" r- {6 ~6 s& Y% t+ F4 m l# J
// Listen for messages
+ @9 f- |1 C* y# v/ h, g" {2 ?; d
socket.addEventListener('message', function (event) {4 j' x1 S! d- W1 r9 Q7 j: ~
//接收服务器返回信息5 F' G6 r% e2 E8 H4 \
console.log('Message from server ', event.data);
! {' X$ U3 D6 ]3 Y8 ~: A
});
- K- t. q( K1 b) X) R) l: m8 ?
. s2 `, H+ P; |

复制代码

伪直播主播页面

html

<body>( F. G/ g. s i+ O" o: Y
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
7 C" s1 ~3 u) d' [! u7 s
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">6 X6 \: K* n1 _! g
画布& M0 [0 o0 ~6 U4 | b) O+ `
</canvas>7 ~' I; B R5 O
<img src="" id="videoImage" width="350" height="700">
8 R$ x" c5 Q$ ]; z
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
( s% @ O! r1 n0 |6 D e5 ?: e0 t
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>/ S: v" H5 W! y% q
</body>
- x+ r' p* z- U% m: T' F# G/ J