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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); , S; w3 R: v4 J
//创建socket服务1 P& Z9 a0 d& n3 ?; |" r/ M
$ws = new swoole_websocket_server("0.0.0.0", 9502);
) T4 ~8 ?* l. r5 I& P
//监听WebSocket连接打开事件
0 f7 n: a) Z4 x9 s$ p7 z9 B
$ws->on('open', function ($ws, $request) { ~9 ^2 P2 ?% A `; ~9 ~
var_dump($request->fd, $request->get, $request->server);
$ j! {& k3 S. f" Q4 d5 j" O
$ws->push($request->fd, "hello, welcome\n");( g' W! E8 o9 O- L* h, Y% Q
});0 B* K" T% W! G0 U, Y
6 N* K& ]. j+ ]% r% P% d; W* z% \" h
//监听WebSocket消息事件
$ `$ ^* L& i9 n j q( o2 m" R
$ws->on('message', function ($ws, $frame) {( b( q% L; y% R/ x
//推送消息给所有用户4 [. W5 h0 v) v
foreach($ws->connections as $fd){9 Q! H, |1 s" h# W7 W
$ws->push($fd, $frame->data);
/ B2 @2 R5 G1 W
}0 n% C5 Z5 E$ K
});
* b5 D$ K1 H0 W6 l' H: w/ R$ v* n& V
, y! S; }6 w; g7 _6 g) i& J
//监听WebSocket连接关闭事件
) u8 ~: N/ |: M
$ws->on('close', function ($ws, $fd) {" ?$ l6 |+ A% p! p. C# H' x
echo "client-{$fd} is closed\n";
2 P& U9 ^7 A3 S9 t
});; I5 o- O$ _& ?; C' T
//启动服务/ b' d- ^ N$ b
$ws->start();. x+ L. F& e! s) f7 w* g* M1 e
0 R; X$ U0 I* U! D- E2 k

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器# A% `$ w/ Q. L0 B
const socket = new WebSocket('ws://lm.com:9502');- Q7 y7 B) R7 x5 C$ G) C5 Z& O9 z( t
//Connection opened# ^0 E) V$ ^4 j4 @& @
socket.addEventListener('open', function (event) {& j; x; E5 o* h. S* H$ O
//发送消息给服务器6 S* L ? N& X: {+ K
socket.send('Hello Server! im websockt');/ m. b8 @- o& ^) i1 s. b
});6 b- A2 L! S9 N8 L" Y6 l. B
// Listen for messages6 y5 p' m+ c2 i3 W0 n1 J, F
socket.addEventListener('message', function (event) {5 c1 }. I, u4 Q0 y* d
//接收服务器返回信息# E6 _1 R( }8 T, L5 o& a
console.log('Message from server ', event.data);
. m5 b; R E% C, q
});% w! T" l! R1 _- V
! n$ ?$ t+ p) b4 i* W5 _

复制代码

伪直播主播页面

html

<body>6 h+ B, r2 b" V9 o; G
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>( T+ J) r' ~* }8 z* X( g3 ]/ C; U
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
; \2 L# h' L X! V4 b0 r8 F+ L, ~4 T
画布
! @+ E* Z! y/ J# O: i
</canvas>, m" j: F9 E. w! K8 H- o' W
<img src="" id="videoImage" width="350" height="700">7 c& v3 N* d9 b6 W! |* r
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
. K" _/ _4 l4 z* y4 \ j
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>6 Z- y# Z* [ H" t8 Z
</body>5 I9 E7 y" u( c' [9 g" u

复制代码

javascript

var v = document.getElementById("myVideo");- L0 k7 `7 E; h! e9 L2 d# |
var c = document.getElementById("myCanvas");
: j$ b: K w U* \9 N0 b& `4 z
// var c = document.createElement("canvas");- M% B) T2 x/ t4 }. a: P
var img = document.getElementById("videoImage");
0 [' X( Y C7 L6 M8 j. w
ctx = c.getContext('2d');
& u; b: I" K6 w6 ~3 J) U
var dataUrl;
& ^$ u- t& ~+ ?* S7 H# }
const socket = new WebSocket('ws://xxxx.com:9502');
- s, Z' A, D6 z1 {1 X2 m. k ?7 s
//Connection opened
( J1 v/ h& P: R+ q
socket.addEventListener('open', function (event) {" f. `' m- H5 a
// socket.send('Hello Server! im websockt');; E0 A& }; x5 ^5 N4 n
});! ] f: g% E2 R
// Listen for messages3 A, K1 y8 _( C' a
socket.addEventListener('message', function (event) {5 S. p8 }; N" s" s& F" S
console.log('Message from server ', event.data);+ w8 h2 d2 R" ?# o% Q& E5 A( H
img.src = event.data;
" Q5 k8 ?# L9 ^' T/ J
});. ~# p7 `0 q& l" x
6 a5 L, d3 @( f3 e+ ]! Q) h
function playVideo() {
/ \, c% V0 g4 U/ a" S
ctx.drawImage(v, 0, 0, 350, 700);- S- p( d+ p- M2 z! k0 ^0 g' x
dataUrl = c.toDataURL("image/png");7 F4 d3 W2 L7 ? X! J
// img.src = dataUrl;0 X* j4 v/ s) ]2 a8 J' w+ k
socket.send(dataUrl);
9 r+ w3 S* B! r! w7 \1 ^
}
var tick;
; s9 j" g6 h) n# n4 E
function aphla() {
2 f6 [) z3 A6 k+ I; t; J
tick = setInterval(function () {1 F2 w: ~/ \6 E9 E6 i
playVideo();9 [2 l# s L& q8 K2 O2 O# y' U
}, 1);5 ^0 `: _- y9 Y5 Y2 B7 J
}7 v0 K1 V( q/ S% _% _7 q7 }# f
function vdStop() {, K$ c! g* ~- W! q1 {1 P
clearInterval(tick);
6 \% c+ A, |* I0 s
}
+ l6 E; ~; g, r7 F

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");! g# h9 E1 t% X9 Q
const socket = new WebSocket("ws://lm.com:9502");
! |% p1 v0 w% @4 s3 i
//+ _5 G1 x4 I' S8 r+ |. X" n4 e
socket.addEventListener('open',function(){& }9 H+ C+ r6 U; u& E" ]( d
socket.send('Hello Server! Im live.html');
) Y0 q) a- {" s8 v
});
8 y/ \; `; R& c6 V) H. u' W. S
// Listen for messages9 ~8 @' V5 s* \
socket.addEventListener('message', function (event) {
7 j$ U8 K: h6 f3 ?$ S( E
//图片地址% l+ s: E( C8 s, I% I% o' V
img.src = event.data;
/ N( ], @! p5 W( A
});6 X8 D* T+ K' x4 i

复制代码

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

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

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

浏览过的版块