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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
) { ?0 m Y. j2 E+ y0 [2 t
//创建socket服务
& h5 B( i1 n8 [" j. b
$ws = new swoole_websocket_server("0.0.0.0", 9502);! x. A# K [1 s/ P9 y h
//监听WebSocket连接打开事件
, g2 q P+ R) B, a" U/ v
$ws->on('open', function ($ws, $request) {0 P( y3 |& B9 c6 m9 r
var_dump($request->fd, $request->get, $request->server);2 r# G/ B0 t! ~+ X. r V3 d
$ws->push($request->fd, "hello, welcome\n");
# P) E. D& \0 G+ h7 m
});$ x' R, Z6 h" l8 P
8 C! ~$ n% A% F6 q6 L
//监听WebSocket消息事件* v* Z5 {- W6 S. R8 w: [) @3 z
$ws->on('message', function ($ws, $frame) {
# E/ f( i0 O- V) \
//推送消息给所有用户
9 z0 r4 q; r" T: ]. }
foreach($ws->connections as $fd){
" |# k7 B. J8 D! F4 f6 C. F
$ws->push($fd, $frame->data);
6 g1 I' D" {1 O! q
}
* c1 U+ B6 A# `, S/ ^
});
7 j2 V; W' ~6 ?# B1 @: p0 X! H
3 b0 p, n W3 q" q: U" z4 S
//监听WebSocket连接关闭事件
3 O! z" v; ~( G4 l0 ~- T
$ws->on('close', function ($ws, $fd) {0 D% W+ J5 o, y, z2 B/ B
echo "client-{$fd} is closed\n";; g. I7 S; F9 s" J% P" h4 w' |
});+ y& f, a" B+ W! o# N
//启动服务
- Q3 O3 g& f1 G0 m+ g
$ws->start();7 x4 D" q) ?$ I3 w
; s9 j. A8 {) W7 `

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器4 G1 K0 ?8 A6 ^+ R! z
const socket = new WebSocket('ws://lm.com:9502');1 c' @8 [1 B' j0 M) F
//Connection opened: n4 X+ S; p1 R
socket.addEventListener('open', function (event) {% o# d7 o1 {) ~8 t$ M" A
//发送消息给服务器
* y, K8 K6 U5 D0 J# V
socket.send('Hello Server! im websockt');9 u6 G D, v& } x: s4 P6 C
});
- x" C: b. s: Q( k$ t
// Listen for messages
j/ u4 L& f5 M# j
socket.addEventListener('message', function (event) {
$ V6 v+ X p# P3 A- P
//接收服务器返回信息; L& c) M5 D3 \
console.log('Message from server ', event.data);
/ F5 Q. I: Z* z" e7 a1 B/ c
});
7 i! ?' w, w0 H; h( Z
T( u% r7 a1 d# o/ U

复制代码

伪直播主播页面

html

<body>3 G5 x% u/ d h7 q1 m8 f4 A6 ~. h
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>( @4 j9 w/ }, m8 R
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
1 c& W8 X5 z3 e. i. v
画布
5 {2 m# F, E+ J1 A
</canvas>
" [2 f5 W- q( E b6 Q
<img src="" id="videoImage" width="350" height="700">
_% ^7 K7 Q+ z0 H0 A' n
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
( U& S6 w! u" C7 R6 O& c
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
) u7 ?4 A" x; N) V$ Z) ]
</body>2 T' R2 S- N& }: v; U

复制代码

javascript

var v = document.getElementById("myVideo");; a$ J! v+ W$ w9 M% F
var c = document.getElementById("myCanvas");
8 ]* ?' @2 r0 C7 b
// var c = document.createElement("canvas");
9 m+ Y+ ?/ C2 b+ ~" D
var img = document.getElementById("videoImage");, j4 ]) @& h6 Z, a# f0 V6 g
ctx = c.getContext('2d');
8 p" t1 l# \& S- H2 w4 x
var dataUrl;
# a# L; U' b* o! E
const socket = new WebSocket('ws://xxxx.com:9502');
6 Z5 r% A$ @2 f5 u2 f+ E
//Connection opened
5 h5 x5 Y" y) P. b% K2 T
socket.addEventListener('open', function (event) {+ c2 `& _; R$ G E& G
// socket.send('Hello Server! im websockt');
5 w! s x3 f& n* [! d% J, u3 y2 Z
});
2 M1 ]' x6 v! x6 o7 G) s
// Listen for messages8 S: d) v: \9 f1 v
socket.addEventListener('message', function (event) {' C! }8 x u1 h4 y! F; v, }6 |
console.log('Message from server ', event.data);
d% ?7 R/ f+ B% X
img.src = event.data; \; S' v4 ?" A" j W
});, }0 T; g: o0 O5 p" [" }4 q |+ g" ^
R; g: O- F- |- p6 o/ s% h& p: ^
function playVideo() {
" E5 M8 N W; A9 k
ctx.drawImage(v, 0, 0, 350, 700);3 v5 B* ^# Z; f' E
dataUrl = c.toDataURL("image/png");1 F' o! a( e- I# ~' n
// img.src = dataUrl;
6 S, L$ i0 ^- L; \% Y9 F' w
socket.send(dataUrl);
9 L# d7 i) ?% G
}
* q9 r* t& D( e1 F9 }) G
var tick;
4 @& b$ o! l' V
function aphla() {
4 j" @2 `9 ?" W: w
tick = setInterval(function () {
2 j9 t5 s9 O6 F, W* q
playVideo();- y/ j5 a( Y" u# V+ s
}, 1);
' j# k. P* h6 B8 Q' N
}
- G: q6 K* j! r: h9 H4 N
function vdStop() {
9 T0 n5 p0 C* |; |3 j6 D# n
clearInterval(tick);; h& i. d# g5 Q% p3 |8 x g; h
}
3 Q+ m% x O6 O, Z& }# d# J

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
2 R- K- I, q5 m# b9 T. z/ ~
const socket = new WebSocket("ws://lm.com:9502");
! v8 f. A7 b/ a" L
//
0 I1 E- r% R' L; ]8 _% j( \( H$ s
socket.addEventListener('open',function(){
9 I( U1 j/ m! g3 y1 Z7 n" G
socket.send('Hello Server! Im live.html');: B9 `( o. N% X. A0 ?; @7 c
});
( ], |$ U8 N& a" ?
// Listen for messages# R& z5 G/ V4 w% Q3 Y; F
socket.addEventListener('message', function (event) {, ^% l {# K; V5 k! b: P
//图片地址& P* ~; D$ {: n6 u8 _$ l$ g/ d3 {' c
img.src = event.data;
5 r& b% F( x) Y' M
});
0 n1 x! U% y1 O: ~; L8 A9 g/ X8 X8 r3 y

复制代码

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

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

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

浏览过的版块