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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); $ A& ?: g& s% }& C* Z1 r+ g/ t( r4 D8 w
//创建socket服务4 {$ @8 \; z4 [6 L: Q1 |
$ws = new swoole_websocket_server("0.0.0.0", 9502);
( g* o& b+ D; s! Q9 f* {
//监听WebSocket连接打开事件
4 O9 I4 ?4 L0 I& L
$ws->on('open', function ($ws, $request) {- o9 g; F3 B. G3 s" T
var_dump($request->fd, $request->get, $request->server);
& \7 _4 x0 l1 T V$ d/ F: R7 V
$ws->push($request->fd, "hello, welcome\n");
+ K, o4 w/ ^$ X, m! I( n
});
) T8 r# s! b9 W' n8 [' r2 c5 ]. l
6 K7 u5 L4 j( c8 c" V" _5 N8 H
//监听WebSocket消息事件. x6 l) L$ Q p- h
$ws->on('message', function ($ws, $frame) {
/ |2 r$ v" G0 z
//推送消息给所有用户
4 _1 Z" `+ U* x( B6 U- h# P
foreach($ws->connections as $fd){. l% _" n$ r& _: D+ D& j6 m1 L
$ws->push($fd, $frame->data);# z l; v/ P- g1 l* j
}
7 a; a( o7 f; z( H0 k4 i
});
5 {; L# f1 W2 _3 _% {
) ~- M/ L1 R/ l+ p$ b5 t
//监听WebSocket连接关闭事件
. ^+ `# O$ Z& z3 {/ T. v
$ws->on('close', function ($ws, $fd) {
+ ]( m" l. R1 J8 L7 P
echo "client-{$fd} is closed\n";
. b, _9 g- r9 w, R" }! [/ q2 W% E
});5 j, W9 ~; I% R: G/ M' G
//启动服务+ u- u4 Y; y. l$ v( {& t
$ws->start();
# \; m5 J w+ X6 G
$ q1 g" T8 O8 H V0 t

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器+ i2 w5 M! M5 ]7 g4 ]4 G$ Q% r) U0 w
const socket = new WebSocket('ws://lm.com:9502');" C4 D* _. j7 \3 v" @
//Connection opened
% |( B& U1 y% q) }
socket.addEventListener('open', function (event) {
# O" K. S. C" J3 P! a4 f
//发送消息给服务器
! H8 |4 }5 q1 H6 j n% H
socket.send('Hello Server! im websockt');
0 M/ S2 \* D% q. O" s u
});
5 V& P: ]! a! y% f4 m
// Listen for messages4 H8 g9 j/ a8 I( R8 p- p' j
socket.addEventListener('message', function (event) {
! {$ A7 [6 f1 }; ~3 s j
//接收服务器返回信息
( T6 W* a4 K1 W3 d6 Q- W! e
console.log('Message from server ', event.data);
6 R" O4 e. u( W0 L" U5 Y
});
5 S; ^+ ~" A0 W; s
V8 l- z3 d9 q

复制代码

伪直播主播页面

html

<body>
' @- o/ T% m z
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>( n$ \7 D. C- f, G+ {+ C- p
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">+ _7 p. Z) K$ R( n' |) @5 H$ j
画布
' o, T1 E2 }5 P, g
</canvas>6 m9 \9 H; A7 Y& @" r
<img src="" id="videoImage" width="350" height="700">6 R# P. Z" b% V7 R Z; k' y
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
% U+ v2 q) D- D" X: B
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>3 |7 _0 {: m* u3 P4 |6 u3 L
</body>: s& D9 B; i2 X# O- o Y

复制代码

javascript

var v = document.getElementById("myVideo");
" r" W% a# Y4 x; E9 R
var c = document.getElementById("myCanvas");' h& T8 z0 S. f& v" C/ K" o7 \
// var c = document.createElement("canvas"); I- N7 M8 }7 d9 u
var img = document.getElementById("videoImage");8 Q2 ?' R' _. T8 L0 |
ctx = c.getContext('2d');& H$ N% P" I6 n6 y0 @
var dataUrl;! F- D' A1 y, B" a; T6 ]
const socket = new WebSocket('ws://xxxx.com:9502');
( A$ B2 | \" P) q
//Connection opened
( u) y8 `, ]5 h. L/ e
socket.addEventListener('open', function (event) {
' S# {: d$ N1 Z. r+ |& [
// socket.send('Hello Server! im websockt');
6 R$ X. _+ i) N) }
});
1 p7 T% M1 k& N6 O
// Listen for messages; [' {# ~, M) L+ Q G3 N9 U
socket.addEventListener('message', function (event) {
# P( H8 n6 c' r+ e' I4 p+ f5 v, u
console.log('Message from server ', event.data);: A: g# R( m' i# g V) M7 z) M( `5 p
img.src = event.data;
& Y5 ^9 G& p; y8 j, M
});' i& Q% g% ?) F- Y( @3 ]
I. r% z. R" ^& K, \( u' A( g) c
function playVideo() {4 b+ l. R( G& E/ |- g7 v
ctx.drawImage(v, 0, 0, 350, 700);
( l0 h' E' m8 K5 e
dataUrl = c.toDataURL("image/png");
! a [( o8 w# |# b
// img.src = dataUrl;2 g9 `& {* Q/ q& u8 j
socket.send(dataUrl);; y* s8 ?7 t1 F
}% c4 h' U V1 T; L
var tick;
$ {2 Y9 {. e" @$ ^/ |* [$ }
function aphla() {
2 [/ m9 j; g1 s+ S! ]$ ~3 d
tick = setInterval(function () {! W, G2 U3 _2 Y T
playVideo();
0 O% P- {) @- E8 e/ M
}, 1);& t) o6 U K, T F8 i' U+ L3 l
}$ ?$ }& Q- ~% t0 i& r" k" ]
function vdStop() {
' H2 ?. }# h c# D1 X
clearInterval(tick);
: m4 u; K& U5 H r$ G
}
. l1 ~: t L( n

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");& `0 i6 v7 {0 g$ D7 M% L9 c8 t0 E
const socket = new WebSocket("ws://lm.com:9502");* z4 k5 z' h* e: d" x' c4 g
//
) O* [# V8 W# C/ L8 x, ^% p
socket.addEventListener('open',function(){6 X# z9 H+ ~3 G* i/ _9 z
socket.send('Hello Server! Im live.html');
2 ~' q- X4 V# @3 X7 B
});
5 r1 _! l5 d# X4 M+ ?
// Listen for messages
4 X$ d8 ?+ g/ c; d
socket.addEventListener('message', function (event) {& _/ n' d9 r m# I4 u. I" C
//图片地址5 H( R' M, f2 @+ |& }1 z w4 E
img.src = event.data;
' l# i* h* M# r4 z6 o& x4 \$ `
});
% }& j0 |% ^/ {

复制代码

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

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

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

浏览过的版块