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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
, p$ x. \# c. E7 Y$ A7 G8 a
//创建socket服务+ L& y: u. L6 Y/ y4 o
$ws = new swoole_websocket_server("0.0.0.0", 9502);
8 U$ D$ V+ A5 t4 ^& K2 Z* c) L
//监听WebSocket连接打开事件
6 }% l8 u" j5 y9 b* p- L& _
$ws->on('open', function ($ws, $request) {
4 Q$ q; x0 J% f2 f8 S
var_dump($request->fd, $request->get, $request->server);
: O4 U7 X, L% L0 l
$ws->push($request->fd, "hello, welcome\n");' v5 B5 G/ ]8 ]! b
});
" s) |, K. P- n& d( C
3 ~! Y9 y. b7 K$ K6 M
//监听WebSocket消息事件. H5 ^! J* d& G/ V/ u
$ws->on('message', function ($ws, $frame) {2 C. e2 i" n8 ~1 R' @+ T- U# Q; X
//推送消息给所有用户* q u8 g% Y" x* j- ~" U+ \& ^$ B Q. o
foreach($ws->connections as $fd){; {. {* d8 `/ I$ v, F9 r
$ws->push($fd, $frame->data);
6 r6 i6 H `2 F( J, U
}
7 v9 j& @" [ x$ x) c) k
});
9 g5 \4 a+ C' e% Z0 `4 c
, y+ O2 `% M" l5 b$ s$ h8 V. G0 f; ~
//监听WebSocket连接关闭事件
9 v$ s9 x, b& b/ m" n
$ws->on('close', function ($ws, $fd) {
* b" I3 ^8 r0 H L! r
echo "client-{$fd} is closed\n";, K7 a: T" O4 D; K3 B( N+ n: C* z
});
* {1 [# ?6 `* [+ [' I1 R/ P5 I
//启动服务2 j8 ^3 T" b5 n; p+ ?/ N
$ws->start();
" W R. [) P- F) n
+ x8 b2 H0 O: U' a( ~1 O

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器' w% L. q- @5 C2 C7 f; U# t
const socket = new WebSocket('ws://lm.com:9502');6 |- ~" H: q: k& t6 n# N3 X1 y1 p4 H
//Connection opened/ o. f- j! c$ E& V9 S3 B
socket.addEventListener('open', function (event) {! L; W' v; R$ j& Y6 S- P. x
//发送消息给服务器3 Y) a/ a2 c% Z& ~" T
socket.send('Hello Server! im websockt');9 D4 A% a* n3 b" V
});1 L! ]2 V& J5 ]% m" n5 y0 f
// Listen for messages
& C/ V- `2 b! r7 G6 t5 ~8 s
socket.addEventListener('message', function (event) {: u' B$ o$ C* l& c! @& p: i
//接收服务器返回信息, H# T' T" K! [6 D3 E1 B
console.log('Message from server ', event.data);
- ]9 l3 A" ]" E% j9 j
});" g2 _8 ]+ U. I3 X
' Y- j, ^. }5 K6 ?. Z

复制代码

伪直播主播页面

html

<body>! m- m* ^* m5 n& F: z, }
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>6 p# a6 V% b5 E% b4 _
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
u1 a% {( o r- P/ h$ ?/ U
画布3 d) o9 {! k% N/ C
</canvas>
7 o3 P7 ~) d( V; {. |
<img src="" id="videoImage" width="350" height="700">
& y$ M) v1 n8 e( ]
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
! {$ d6 ]) Q& C
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>$ A3 S" R+ W w7 I% i
</body>
# N+ ^9 s+ m# |7 A6 c/ E) ~* q6 ~