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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
7 {$ b: R& t0 }8 T5 Q8 n# Q& P
//创建socket服务
N- i8 A* u. [% v
$ws = new swoole_websocket_server("0.0.0.0", 9502);" }; }7 A; q6 n2 g
//监听WebSocket连接打开事件7 s+ Y1 J" X/ j/ q4 k6 I! \1 s5 Q
$ws->on('open', function ($ws, $request) {
) @. U$ o# b+ J
var_dump($request->fd, $request->get, $request->server);- O& N! l# ^6 s6 R f% ^
$ws->push($request->fd, "hello, welcome\n");
1 r% Q" ~0 y: ^ k
}); q+ \" I2 _8 [( c. Z4 {8 h: W" a
# l& n! B- q" B; M. s$ o
//监听WebSocket消息事件
8 Z1 G- S N7 ]/ W
$ws->on('message', function ($ws, $frame) {
* A: n5 c: \# n1 w
//推送消息给所有用户
- k0 c# G' h1 L8 Z% t
foreach($ws->connections as $fd){9 O. t3 h9 q# e) x8 o4 C- M, D
$ws->push($fd, $frame->data);
- d! V( ?* O. W4 T1 m
}
& O! w5 X; h4 C4 ~
});2 E: @0 k# a8 d$ i
I1 Z+ x; r2 k
//监听WebSocket连接关闭事件
) ~$ s, p) j* |" j/ b
$ws->on('close', function ($ws, $fd) { D. j& A6 ]5 N0 L
echo "client-{$fd} is closed\n";
' r: M- C+ ?6 W) y8 g1 g: X! _
});
7 ~8 `( K2 `! k9 E# p
//启动服务) ]! z6 ?+ l/ ~/ t/ x. H
$ws->start();
+ B3 e( t: }$ J7 ]( N1 n
; z$ e' V# D8 k0 o' h, A. T

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
, P( W7 g. s. ^* ?/ A J H
const socket = new WebSocket('ws://lm.com:9502');" l: }! l& a2 j/ |
//Connection opened( w. h {) C5 Y' x! l' [7 z9 ~% s
socket.addEventListener('open', function (event) {
1 z7 A6 Z; D+ \6 n: u) Y
//发送消息给服务器: `, E0 G8 s" K/ |$ E
socket.send('Hello Server! im websockt');
6 N& @# D4 [# C: y2 z) w7 x
}); }0 e$ x& {0 k
// Listen for messages
6 Q# j( c. Q) b3 L' L( O4 x
socket.addEventListener('message', function (event) {
2 b. m- Z, u/ x' g1 r
//接收服务器返回信息
2 d( g( X+ D0 L# e; V
console.log('Message from server ', event.data);) E. A2 N5 A0 U# b. T
});- Q& F+ X3 [! ?) k! M
J3 L2 r# f5 r

复制代码

伪直播主播页面

html

<body>: F8 Z+ e' G9 D/ [" B
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>% q; | w1 z9 _* [/ M u0 a
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">: K0 L$ } ?* {% p
画布
0 p4 k1 W. m6 Y& y3 V+ c6 U
</canvas>
- K& c8 m. U$ d3 w+ f
<img src="" id="videoImage" width="350" height="700">
0 u7 s, h2 f5 `+ S
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>( C" S% v% q/ W5 G/ j+ \
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>6 R5 V% `8 t* ^
</body>/ b9 B+ B9 ]7 V2 v3 U; v7 e

复制代码

javascript

var v = document.getElementById("myVideo");( i/ @. f6 k/ f0 X7 r# K. W8 X
var c = document.getElementById("myCanvas");; K+ J, P: Z8 y3 k: o% e
// var c = document.createElement("canvas");
$ a7 I- s; \: N6 m4 o6 a3 i: z
var img = document.getElementById("videoImage");
* ^0 h' ?" ] M4 p3 N& X
ctx = c.getContext('2d');4 X4 l4 \( A7 }/ Z9 @+ z; U) s
var dataUrl;: n3 G! A/ y. s$ {# }& C
const socket = new WebSocket('ws://xxxx.com:9502');9 }! I+ I; _/ @1 Q5 T
//Connection opened2 _5 L8 l8 q% x
socket.addEventListener('open', function (event) {
. I4 P0 \6 {: j+ {' t( w9 d! _ N
// socket.send('Hello Server! im websockt');
5 x* ^$ B1 O* E. W
});
* q" ]" h2 y. t# q' \) T% K
// Listen for messages
- ^: s$ V8 H$ x& O
socket.addEventListener('message', function (event) {
$ v% g! m3 a$ k9 A, ~
console.log('Message from server ', event.data);: t- W) C" J2 G. j% i: ~
img.src = event.data; K: h7 V' }, y+ X. L2 y9 S. h
});. x# t) X3 g; l* Z/ o+ R9 ?
- D0 e+ R5 U- d8 p s: M
function playVideo() {) t7 z+ H5 F0 o% t, E7 U6 u
ctx.drawImage(v, 0, 0, 350, 700);
# E, u4 z" c2 @& E: B
dataUrl = c.toDataURL("image/png");
' f) ]. _- x: ^4 s, P2 {( [0 [
// img.src = dataUrl;' E6 A8 K! N. M1 r) x
socket.send(dataUrl);
& y, G1 A) d. c' X' G1 F
}
( {' X L, | o" R4 R
var tick;
( C& |2 q4 ~# m q
function aphla() {
) g9 b" d' K5 y# s
tick = setInterval(function () {
& I, B- v9 q' w$ P* X% w% H# B
playVideo();
$ v" [3 Q; Y1 w' v, r! d9 j
}, 1);, {1 @2 v2 W- T/ N$ A* J0 a, U4 |
}
) y- d% B+ q, H9 {$ e: A. Z! H
function vdStop() {7 T5 t8 P8 o7 e# B# g
clearInterval(tick);7 F* i7 {; |, Z4 l9 B' K
}
. {3 v/ _6 P4 x

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
; x0 }5 b' {5 `$ C0 X/ R5 u+ b
const socket = new WebSocket("ws://lm.com:9502");
$ P& I# }0 L/ Y: ?( e. B1 b
//
: I9 w! j9 N( k! }
socket.addEventListener('open',function(){" I! R& r0 w f) U9 q- K4 Z; e
socket.send('Hello Server! Im live.html');
9 g! o. V# v) k3 Q
});* h+ I- I0 \8 V p
// Listen for messages( P: w4 ]( C4 R2 I# `# a7 N
socket.addEventListener('message', function (event) {/ ~; ]$ R. l/ O- S
//图片地址; O0 M3 w. P1 u* \6 S
img.src = event.data;1 `- X+ P+ g: A6 S
});
% h' m9 V; v0 E E. {

复制代码

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

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

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