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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
0 b! p: m( ]8 |, N1 L
//创建socket服务
4 E9 x4 |9 L u0 F
$ws = new swoole_websocket_server("0.0.0.0", 9502);
- o- a9 ]% M# u- N1 X
//监听WebSocket连接打开事件
; x7 v- |* q- F
$ws->on('open', function ($ws, $request) {& r8 \/ H' t3 f& P% C& C
var_dump($request->fd, $request->get, $request->server);) v4 F8 J) @% F1 v+ J! k% u3 R8 I1 D
$ws->push($request->fd, "hello, welcome\n");7 r) H- u1 ?7 _( H& L- s& a3 C
});
2 F4 c: W: m+ Z3 S1 A3 R
/ U* x' m: j6 ]: {: M
//监听WebSocket消息事件
% Q( L/ e, s# e$ O! i
$ws->on('message', function ($ws, $frame) {
- F2 d0 s B# u
//推送消息给所有用户
# m5 g, `1 j. G# b7 Y, X
foreach($ws->connections as $fd){, K) b. c: T! K
$ws->push($fd, $frame->data);7 o" g& Z$ s* a! {) Y
}
# c6 l: \! q; n- w- v
});
& f/ m; S9 u" ^( ~$ u
$ G$ P9 z2 \5 x) N
//监听WebSocket连接关闭事件# g+ f3 T( Z/ ^, ]& K! M8 W
$ws->on('close', function ($ws, $fd) {7 P: z8 d. \6 u
echo "client-{$fd} is closed\n";0 m4 I" R% `7 {$ w$ r! O
});6 F* J) ~8 o; W0 O! y
//启动服务
) R5 K& O% a5 l/ q9 x
$ws->start();/ A* @/ l1 t J* U! x( `
9 s% N. N# o, F) m- C2 f2 Z' t$ b

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器0 b" ?& i1 W `6 }; E1 q B4 t
const socket = new WebSocket('ws://lm.com:9502');0 y2 |+ P' a4 T9 O: h9 ~
//Connection opened
3 M6 \. I7 J5 c% [ ]
socket.addEventListener('open', function (event) {
' N5 E3 B1 ^! k2 B& l$ R7 `( {5 D
//发送消息给服务器% b" |! `7 C+ c
socket.send('Hello Server! im websockt');
$ U# Y6 N: I {3 D% R. c! O9 n; A
});% [3 d! q1 E5 m
// Listen for messages
. z. _9 {3 x4 P S+ _
socket.addEventListener('message', function (event) {
4 B- b3 k) J# }8 M/ I/ k
//接收服务器返回信息8 B" O Y% E; D# A4 d& F
console.log('Message from server ', event.data);4 O' Q- i$ |) v3 P% j0 F G0 z6 ]
});
M/ x3 ]" n) n6 Z* b: V0 c/ a
" Y6 u: l* z( M' S* I2 j

复制代码

伪直播主播页面

html

<body>& ?1 t' |/ k0 X4 j7 m
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
) q+ l9 B% v) p$ w* b9 y! i" K
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">% T/ i: n6 b, c4 v
画布6 \+ P' \/ O% z. `' x' r
</canvas>
" {5 Q7 ^. O0 S7 F
<img src="" id="videoImage" width="350" height="700">
9 l8 g2 H) b/ ]# h
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>( O& o4 f' r! B3 m% H( n ]& u
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
. [' Y1 i4 f! k4 P
</body>! `$ {0 ]3 Y0 l

复制代码

javascript

var v = document.getElementById("myVideo");
( B* A' @1 p8 O8 h. {
var c = document.getElementById("myCanvas");
1 s" _3 N% t- t* z6 G+ B) `
// var c = document.createElement("canvas");" t& N( j$ r1 h
var img = document.getElementById("videoImage");
( o$ X0 z# |- N% x4 Y, n A
ctx = c.getContext('2d');- `1 N% @' W8 B! u% o) o
var dataUrl;
% r0 l" w; j; V; _, W M
const socket = new WebSocket('ws://xxxx.com:9502');0 G& R# c" z% W2 T! k |+ i3 f
//Connection opened8 E* N4 n, P3 g
socket.addEventListener('open', function (event) {
0 w, w J2 \- D& `1 q0 Y, R& O3 P
// socket.send('Hello Server! im websockt');
; _; d2 z. Q. p" x
});# t O8 N* O! f4 d
// Listen for messages4 ^% B) ?$ b* m4 ~, I! d
socket.addEventListener('message', function (event) {
! `9 C$ Z0 C* R; C3 P
console.log('Message from server ', event.data);) y. K+ q" T; Z- z* Y% S
img.src = event.data;
, h8 g. X$ `8 G# W! p v! y
});
7 l5 y5 u) F( i# f7 J" \/ ?
- c1 b1 g( ^' X( j7 p# t& c
function playVideo() {' ^/ b d2 D! Z# N9 e
ctx.drawImage(v, 0, 0, 350, 700);' |9 z6 A2 v2 N! k \, ?% X
dataUrl = c.toDataURL("image/png");2 q$ s$ R, m; h. A2 c
// img.src = dataUrl;
7 ]# C" f3 a) b" a
socket.send(dataUrl);. N* R( v) q3 x. a9 u8 a/ u4 T
}' b$ a1 F' r X- j7 i$ K ?
var tick;
O: ]. p4 V: }$ {+ Q, F5 i
function aphla() {$ U' ^! U( F9 I
tick = setInterval(function () {
6 g/ q; M8 z: ] m: u2 q( W( w
playVideo();+ p2 X$ r, [. o+ r
}, 1);
/ |3 s* O; R9 {6 H/ k, Z3 m% v
}
- K2 ?4 P F! y
function vdStop() {
. ~& b( p& j6 u$ H
clearInterval(tick);7 Y/ R: c d' v) n1 Q1 D& Z
}" E4 s5 z+ y1 _

复制代码

用户页面

html

<img src="" id="liveImg">

复制代码

javascript

var img = document.getElementById("liveImg");; f$ U+ z( J( C8 p; c
const socket = new WebSocket("ws://lm.com:9502");
- a5 J2 p0 V0 B7 P
//- _& J$ z% O2 W) R6 d0 h, W
socket.addEventListener('open',function(){
* C x1 F, S) u
socket.send('Hello Server! Im live.html');. E- L4 B: X$ c' v. R
});
: Q- U( D7 x$ }8 {; l d2 w& z
// Listen for messages
# C. R `. m! }! c! j
socket.addEventListener('message', function (event) {
6 u' H8 W/ A8 H, _' f# d$ Q$ I6 C7 l
//图片地址; O9 @$ I4 s6 w0 ^2 {" ?' Q( C
img.src = event.data;
5 n3 R) a2 ]2 m8 L3 ]
});
+ M0 C6 ~4 ~! V6 C

复制代码

真直播应是通过rtmp推流实现的，本次功能仅作为swoole框架的一个案例用法

帐号		自动登录	找回密码
密码			立即注册

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