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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 7 _# x/ G# L: l" h/ Q& l* T& |2 b* V
//创建socket服务- v" [/ X6 O4 l
$ws = new swoole_websocket_server("0.0.0.0", 9502);5 E3 G9 g2 H8 A: U
//监听WebSocket连接打开事件
2 O% t8 S z+ ~7 E6 W# p+ t& a1 ?0 p
$ws->on('open', function ($ws, $request) {
8 s+ i* R3 C; b# t% m. q4 r% E( J3 ]
var_dump($request->fd, $request->get, $request->server);9 `- c/ W+ m* d; ^) v) E8 \9 p
$ws->push($request->fd, "hello, welcome\n");3 B4 `( \1 M$ L5 a3 u: N2 L3 Z
});
0 G5 T. C+ D- b i6 t
0 U+ d/ I( n0 V; i% P3 l0 o
//监听WebSocket消息事件
: s/ w% D4 E: n o* l6 j
$ws->on('message', function ($ws, $frame) {4 Z( Y9 d. g3 B% } h
//推送消息给所有用户
1 Z' m' P2 L, D; P& ~4 B$ T/ q/ `
foreach($ws->connections as $fd){
( g1 b0 @' [6 @/ I
$ws->push($fd, $frame->data);! N/ K2 f& o) H
}4 j7 L' z8 Y( ^ m$ ]
});3 V3 w/ F, }% S J
1 @4 }# H p5 `! ?; j1 E( C
//监听WebSocket连接关闭事件( E7 }, D, R. L& T$ N; C6 H- ?
$ws->on('close', function ($ws, $fd) {
3 O% p7 I3 ?, |5 s
echo "client-{$fd} is closed\n";3 h( R+ N6 w& X$ S
});
; P0 u1 W. y- {& y
//启动服务1 N3 _3 Z. y, g; D; u2 D) ~9 H
$ws->start();7 i; T; o3 L: g7 L
* v0 U- V% Y. r$ s9 K9 h# l! Q

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器/ f/ Z& }# f) U2 t- P
const socket = new WebSocket('ws://lm.com:9502');" J+ [' }8 A6 N' S
//Connection opened
2 ?" y: [" s! A( B3 \
socket.addEventListener('open', function (event) {; j1 R4 u/ G/ N3 l* w/ ?' Y
//发送消息给服务器9 m7 L# \0 g; |: v4 y7 P1 R) Q
socket.send('Hello Server! im websockt');
9 C: }# y5 O/ `' B# }
});
x, N3 t# i" z& P8 t* }
// Listen for messages
1 c5 E( R0 G' E; a; v
socket.addEventListener('message', function (event) {
4 [% b( Y2 l; h( J* e. ]4 \. @
//接收服务器返回信息
3 {6 `; D9 l) q5 J/ M0 V
console.log('Message from server ', event.data);3 E/ \+ X$ @6 i/ t* Y4 i
});
; F: x! G8 c, g% t+ N
& `/ y+ x" o9 j6 J

复制代码

伪直播主播页面

html

<body>3 k! Q# b" t1 S& V* m$ Q7 i
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
" t) l. I; X+ A( y7 Q
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;"> E+ o2 \9 P0 B
画布
+ P2 V$ C* W5 l) d, r4 a
</canvas> u' {+ h( P, j* s6 `3 ]
<img src="" id="videoImage" width="350" height="700">
4 T" ^9 R# x7 U2 e7 a* H) v
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
6 G5 S* R& K+ D" I
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
* D9 h1 k" a s& E: \8 W4 w
</body>4 @7 @3 a. G9 M, Y* @+ y