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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); $ z/ }4 n) P9 \5 ]
//创建socket服务
. ~; n- Z7 d% n+ V: {/ H
$ws = new swoole_websocket_server("0.0.0.0", 9502);
* x/ U1 I y0 h! g( f
//监听WebSocket连接打开事件, u5 ^/ w" A& t* f/ u" E7 j3 L
$ws->on('open', function ($ws, $request) {4 k6 e% j! L5 D9 J. n: z1 T! R
var_dump($request->fd, $request->get, $request->server);# J4 N7 w+ _& b# M9 x2 g' h
$ws->push($request->fd, "hello, welcome\n");
. H) X; h+ C* Q1 G
});
, g4 e0 S2 q: s
0 \- X/ K) m# |; V2 b8 ~4 S
//监听WebSocket消息事件, W, j% o# P% u
$ws->on('message', function ($ws, $frame) {
7 \' J- r8 P5 q. q$ p' E$ j, `
//推送消息给所有用户
* E/ K P$ v5 t' j# B
foreach($ws->connections as $fd){' Y( i. M8 b/ @$ V% T* l& a: L+ y
$ws->push($fd, $frame->data);
7 [7 E5 l0 K( U8 f+ s: m
}
# _. N* r5 c4 D6 O5 _# h6 `' y
});
" u5 F( ~1 g, U/ H
( k8 `4 f. f, E" m, @- ^( x
//监听WebSocket连接关闭事件
& _9 K- ~* H, l P
$ws->on('close', function ($ws, $fd) {+ K8 f" |% q; G+ Y1 v/ K1 |
echo "client-{$fd} is closed\n";
( E4 G- B2 @, A
});
6 a+ p" a$ }. E/ y" q) |# \+ D
//启动服务
0 w6 l8 x. P" r
$ws->start();# u. n8 Z( F% j1 T8 a. ~
2 l- ]) v9 S: ^9 l$ e6 C x

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
; `9 i1 v$ o4 _! X n& q
const socket = new WebSocket('ws://lm.com:9502');
; ?! n( M6 C8 \
//Connection opened; R, L5 n: U, v7 }* ?
socket.addEventListener('open', function (event) {
% B; Y1 j) X- c* C; H' |- H2 C4 }
//发送消息给服务器( F# o& q* Q1 S. q M! m( }( V
socket.send('Hello Server! im websockt');. Z! F; g2 |7 t( k* d8 g) ~' I9 Z
});0 W- b+ I- {, Q% ~; Q
// Listen for messages& O2 r5 L: U- h3 \/ P7 m
socket.addEventListener('message', function (event) {. }& }5 q# j3 O7 L2 d
//接收服务器返回信息* N! }% ?; V1 W: e; B' _
console.log('Message from server ', event.data);
3 m+ `$ R5 ^* l* D
});3 a ?7 R4 w" H# ]+ A* o( Y0 h; L
( C: L. o8 M: ^' v- a6 h

复制代码

伪直播主播页面

html

<body>
! J* y; W5 g6 n- u# p; x
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>: t. ?/ k0 {+ }3 q* N4 c1 O7 w& P$ p; R
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
5 `1 v, d. l- w) L: W& T# U
画布. \/ e+ f3 h) t N# q
</canvas>
J. u0 L/ W% J( W' Q6 L" y' N. R
<img src="" id="videoImage" width="350" height="700">
! ^$ a' X0 `( S
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
# q- C5 i" w3 P2 X& V
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
. G+ R: @( l2 N& L
</body>
) }) T: ^; w" _9 o