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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
6 P1 ?, I2 m, _ n, p& p/ ^
//创建socket服务, h0 S# G* O7 u& h% `" k( N, a
$ws = new swoole_websocket_server("0.0.0.0", 9502);6 M$ _+ V- L2 x0 g
//监听WebSocket连接打开事件
1 J: I/ b' ]( h, h
$ws->on('open', function ($ws, $request) {+ {7 j, N6 M. E; Q" \7 n# b$ I8 f
var_dump($request->fd, $request->get, $request->server);" z/ R9 M6 B4 \( S) X; c
$ws->push($request->fd, "hello, welcome\n");
) B4 Q1 e9 N S5 d9 o' a% V
});% m9 X4 Z/ a4 \' H/ N
: W2 v* q; @$ N5 s! Q5 d' R
//监听WebSocket消息事件7 `8 Z* L* Z1 y/ g
$ws->on('message', function ($ws, $frame) {
% F3 X/ z: S4 a& E; R
//推送消息给所有用户
1 s" b3 l [7 R7 f! S2 L. L
foreach($ws->connections as $fd){; Y3 P3 b% C$ x6 n+ a
$ws->push($fd, $frame->data);8 g) l1 t6 l- ?9 k) t4 ~
}
2 }# a' y! d: F+ Q7 A1 r
});
7 r0 }! `( I" R: z8 w" M2 n
, Q8 H) j& W# Q4 D6 } ?
//监听WebSocket连接关闭事件8 a2 q# v4 M; s& X9 s3 v
$ws->on('close', function ($ws, $fd) {! H/ _- \4 h2 E+ C; m5 I+ U, z
echo "client-{$fd} is closed\n";
7 x/ H: _5 c3 _1 m) W3 L3 s5 C
});
- G1 S; {0 [3 S+ D. m) m, o
//启动服务
6 d8 J. Z) {" j* c: c" b
$ws->start();
4 S' `2 Z' q$ |
& T" I5 T, f0 l

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
+ k. |6 Y9 X8 u1 T
const socket = new WebSocket('ws://lm.com:9502');
$ ~7 r3 Q$ i# @
//Connection opened
6 S; k4 z; ^$ d- Z; G4 s7 B/ B, u6 @
socket.addEventListener('open', function (event) {! i2 |* {. m" g
//发送消息给服务器0 q# l+ n5 |8 w& {( ?. L# Q
socket.send('Hello Server! im websockt');
! C7 ~1 `, S- r2 e* J
});/ d% x# }% x7 m
// Listen for messages7 m. {: [3 O% q- E; j$ [" Y
socket.addEventListener('message', function (event) {
, T4 t4 f2 J3 t$ w! A- j4 G6 i7 R
//接收服务器返回信息
% A q% C5 n; R) k6 H
console.log('Message from server ', event.data);* V6 J# o; a9 \# q5 N: w" l; b% U
});
) d; ~' \7 H- D0 K5 a! _
+ Z% p5 |9 i; c

复制代码

伪直播主播页面

html

<body>
g7 O5 K* `! {. J+ L/ {
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>6 q! }) ] R% n4 N" j: Q
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
: f5 E6 U. z. s) ?7 b: \# F6 N! Q2 ?
画布
' `- C! \# V& ~/ a- H
</canvas>! T# d+ V: ?* b4 g
<img src="" id="videoImage" width="350" height="700">* E: o( B$ v/ y% T2 B" j V# A
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
- P, I, ^: h" o& b' C$ w8 J9 n( D
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>9 v- u) Z/ N* k; \+ L% A( w( E
</body>
B$ d. M3 m7 a! y) C