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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
5 X. l$ V6 }9 E/ ?8 V
//创建socket服务
~) ?1 Q; U& D
$ws = new swoole_websocket_server("0.0.0.0", 9502);+ { q% Q' @1 {, K# ?
//监听WebSocket连接打开事件
9 v R) ^* S# l$ {
$ws->on('open', function ($ws, $request) {5 x0 F% D9 q4 ?
var_dump($request->fd, $request->get, $request->server);; m( ?* d$ u9 V* x# V3 U
$ws->push($request->fd, "hello, welcome\n");5 u/ ^- e7 i7 j
});
: F9 E p# |& @+ u/ h" o- D
//监听WebSocket消息事件
8 n/ S( t# u' E# r, D
$ws->on('message', function ($ws, $frame) {
8 v' m% ^% d$ e
//推送消息给所有用户
1 A% J/ `; d- u" S
foreach($ws->connections as $fd){) u H0 H. x* Z( y7 Z& [% x
$ws->push($fd, $frame->data);
$ y* R7 H9 M4 z6 P. g! ~
}1 L; [7 W; Q9 x5 Y7 v6 S, ?
});
, Y) m* n+ H4 W6 x: N8 `( X
" g0 X8 p j* c' p+ F% ?
//监听WebSocket连接关闭事件
: c+ r' d" E) _5 e5 t3 x
$ws->on('close', function ($ws, $fd) {
; a5 N) G' W* t, o/ B& J
echo "client-{$fd} is closed\n";0 v A2 j) _6 i5 t
});# q# `1 A$ m9 T
//启动服务
\+ C7 }0 E. K/ R5 ]$ C
$ws->start();9 V2 N* I# `% |. H0 O
6 V; c+ b( W! t; W* b, e) n

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
9 w6 `9 s, v K$ q" e* a
const socket = new WebSocket('ws://lm.com:9502');2 a8 [3 K3 a# |# g7 B+ A% F) S
//Connection opened7 [1 N& k4 ]" }% n
socket.addEventListener('open', function (event) {
- U1 y: f N9 f( E0 k% f
//发送消息给服务器7 M$ E+ D- P/ F3 p( v/ T% k7 R
socket.send('Hello Server! im websockt');
6 c# M( d- m" O
});: ?0 t# ^" {! G2 d6 f: t. {1 }
// Listen for messages* g5 p. P; u* n' O8 k+ M) c7 K
socket.addEventListener('message', function (event) {+ K n7 P* G: f5 a5 v; K1 `+ F
//接收服务器返回信息8 I; { c+ I/ ^$ u* R2 X
console.log('Message from server ', event.data);. p: W% P+ n0 n
});/ @( a+ q' a7 a4 A* J
0 e* M6 Z/ Q' Q- S' F; k

复制代码

伪直播主播页面

html

<body>5 l0 J: V/ j }5 O5 U; G) o
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>0 J! m7 Q! V4 ~& S1 O9 Q
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">8 T. @" I; O. Z
画布
9 c* ~8 Y/ @: y5 q$ b) a2 r
</canvas>- ?8 U0 B! }6 X( z! y2 ]
<img src="" id="videoImage" width="350" height="700">$ e/ C3 [( v$ _+ E1 |6 m- a- q# [
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
+ e* M, Y/ ?% Q- X! _! `: y8 N
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>' p0 ~+ H4 z, o0 M, W# W- ?8 ]
</body>
4 {: i& }, L& w4 @# J* X

复制代码

javascript

var v = document.getElementById("myVideo");" k" r, D: s" ~, O
var c = document.getElementById("myCanvas");, e2 \6 I, w" l
// var c = document.createElement("canvas");
V) h9 Z J/ b( k6 v
var img = document.getElementById("videoImage");% B2 C; |/ B" d" [
ctx = c.getContext('2d');
( {0 C4 t1 n/ @7 x, K
var dataUrl;9 T+ [2 ~( m* Y6 `; z5 O, T, i
const socket = new WebSocket('ws://xxxx.com:9502');! s1 S8 _' K+ ~" g
//Connection opened
" x7 j. |9 g) K0 U0 t- u+ K$ E
socket.addEventListener('open', function (event) {
0 _8 E6 `9 d: K+ V8 }, {
// socket.send('Hello Server! im websockt');- N1 |; r- w; } ?% b& u9 |+ @) v
});- P( [$ Q+ @% B% c4 T- P& Y! W% @
// Listen for messages1 \' Q8 u: J2 V+ S0 I
socket.addEventListener('message', function (event) {
( o$ h) W# f m) D$ C( L) K, W, t
console.log('Message from server ', event.data);7 @8 y$ G y. Q) [" M0 D
img.src = event.data;& W, s2 n( E0 d
});
7 k. \- x. i& |/ ~; L
6 U$ w. |# w# {
function playVideo() {' [' h' C8 |+ ~6 `/ Y( y
ctx.drawImage(v, 0, 0, 350, 700);
' x9 z M* n3 C6 P1 i6 P3 Z; [
dataUrl = c.toDataURL("image/png");4 V/ A$ f2 ]% U
// img.src = dataUrl;
% _1 i: `6 _9 B0 x' v+ L, \( h5 E
socket.send(dataUrl);2 M: a6 N" V8 v6 l; E) R
}- V, |6 t8 P( c1 Z& R1 @1 `! [
var tick;
7 k0 _- S, q& A6 i% I- h
function aphla() {) ?0 u. Y' W; ?% U6 C3 A) E: {
tick = setInterval(function () {
9 f( y' _; {, \. I# g/ j
playVideo();$ i' m, T! S# p2 ]+ T J
}, 1);& p, b; [' b l' Q. J; w
}$ q% h) T+ m9 r0 ^: e; \' @% f
function vdStop() {
& b9 p9 Z4 W0 j1 c; U) K9 v
clearInterval(tick);; ~& U" d% [" e
}
& r4 c$ Q) T% S

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");; ]. p# w ~9 {" p( w% J# M
const socket = new WebSocket("ws://lm.com:9502");/ a S4 T$ K- m
//
2 ?0 A0 A) t3 E8 o
socket.addEventListener('open',function(){
/ V* R. c9 b7 s0 u, ~0 ]/ d4 {
socket.send('Hello Server! Im live.html');$ O9 j* R# j* x6 [6 w" u* {
});% ^: u8 y' L1 O% N
// Listen for messages
5 ]$ \0 t3 Q U
socket.addEventListener('message', function (event) {
6 f% m/ J( F# I
//图片地址2 D/ q8 M5 @: x Y! u" z
img.src = event.data;* v, R' @+ r7 p5 ?' C# @
});# @% @! E6 c8 v" V

复制代码

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

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

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