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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); ; F$ X0 p: j6 O2 l) |
//创建socket服务
/ P6 x& H9 t" v- V5 U0 i
$ws = new swoole_websocket_server("0.0.0.0", 9502);
$ l; l! a3 a8 {+ f
//监听WebSocket连接打开事件
! q( H! d( P! j9 ? Y3 G8 A6 [
$ws->on('open', function ($ws, $request) {
, s' y9 |- H6 F; s/ s) D
var_dump($request->fd, $request->get, $request->server);# Y- G: M) c1 J# K/ Q
$ws->push($request->fd, "hello, welcome\n");
& v6 \$ {$ _& `" U
});
6 U2 C( c5 ^8 O- l
t6 R- h; c% Z/ F$ }
//监听WebSocket消息事件$ G+ P+ @# N5 a# a. U1 j+ ? A
$ws->on('message', function ($ws, $frame) {6 n* g/ N0 n" l6 ^ g- R! j
//推送消息给所有用户 R% U$ v. V& s* f# ~# I/ K. ]0 l: i
foreach($ws->connections as $fd){, k6 U1 |; l9 b. C: r2 t
$ws->push($fd, $frame->data);
) _8 c$ t& `6 }' v
}( G5 K. W3 }8 W$ z; U
});! z+ w. B! i% \# P$ V5 Z$ Z! j
8 Y& K$ Y5 c% H+ N& Z" o
//监听WebSocket连接关闭事件
8 v5 G$ x9 ~8 _
$ws->on('close', function ($ws, $fd) {
" }$ G! [! l1 l& y
echo "client-{$fd} is closed\n";8 W( P5 |; K. ?3 i( ^4 E
});
" b3 m, o# y C n. |. u A
//启动服务0 {8 d' ^% q: ^. O* r: M* V6 d0 V6 ^
$ws->start();! u3 u: Q2 N! [
/ j% `3 p/ B0 a ]5 j" F% @) @

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器( V& ?" ? ?3 @
const socket = new WebSocket('ws://lm.com:9502');
+ L" M% H8 A2 F
//Connection opened
?2 M7 n- ]$ \& f. ~
socket.addEventListener('open', function (event) {
+ S; c" J! i) |( z0 W! x
//发送消息给服务器) j# m ~+ r: X$ {4 K2 T/ U
socket.send('Hello Server! im websockt');
% s4 W% H) M$ W+ n) v' ?
});/ N) _& `! P7 W' a
// Listen for messages
{* ]: \4 ?! G/ V
socket.addEventListener('message', function (event) {
/ L+ y' e# V; C6 z4 N0 }
//接收服务器返回信息! F& D' U! X0 _$ Z( n$ `
console.log('Message from server ', event.data);1 B8 L$ M- z, z9 ~9 h+ ?9 x5 O
});
" E( M5 T6 {& E, `! X V
) a2 J* Z$ K. Q. p: G

复制代码

伪直播主播页面

html

<body>* F' y3 W% e2 g5 ~
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
: }$ M3 Q2 S" @$ E! Z! o8 k0 p
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
2 X, z4 c( U, j* ~) M) o% I! ^9 @- f9 E
画布
! D. X# B6 ~) c3 {- r6 x
</canvas>5 R8 i* w. ?7 r' n. ?. ?, c$ g) U
<img src="" id="videoImage" width="350" height="700">
+ |! {0 o+ Z! h; E( j' i7 S
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
6 W6 }+ J2 v9 }; U: O) c& q
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
5 m3 f7 m" ^. M7 a: x0 c
</body>3 l" n9 N- n' g0 Y3 d$ {' t

复制代码

javascript

var v = document.getElementById("myVideo");9 f& L$ Y# N" Q4 J! ^# P0 s
var c = document.getElementById("myCanvas");
; b! [/ W5 ^# s7 P- ]- q/ ]7 g
// var c = document.createElement("canvas");
4 C6 Y' M% k! y5 T0 I% E, z3 b
var img = document.getElementById("videoImage");
' b4 B5 }, q: _+ v: b
ctx = c.getContext('2d');. X9 L+ f, I$ b4 y8 w3 I' k' ^
var dataUrl;; {0 S8 Y2 P z
const socket = new WebSocket('ws://xxxx.com:9502');
1 `) M+ t' l3 C- d7 T6 q: V
//Connection opened
1 m) [6 q) q7 Z
socket.addEventListener('open', function (event) {! P7 K* i- p; Q! ^, s! d' S9 q
// socket.send('Hello Server! im websockt');
8 w% c$ T6 k% x2 Q2 F, d+ e- j
});
/ R/ c/ E7 g ~ P. e& z3 X
// Listen for messages
3 V6 [2 R* e$ r( F1 M1 Q" x
socket.addEventListener('message', function (event) {1 W- H8 l! T0 M
console.log('Message from server ', event.data);
# ~; W2 y" [$ `) i1 Q! A$ Q1 n j
img.src = event.data;
% m9 a6 R) Z( K
});9 n5 h3 k7 o, C3 k
: ?0 p0 r! w: S5 I& W8 j2 z- ?
function playVideo() {3 F: j! c9 x! b1 v( t2 Z
ctx.drawImage(v, 0, 0, 350, 700);4 o5 z X, V$ b
dataUrl = c.toDataURL("image/png"); P2 Q5 {: u$ V6 R% @, b6 r4 [2 `
// img.src = dataUrl;
9 x9 B9 X2 C4 B$ V; l
socket.send(dataUrl);4 S6 l- q% i* |
}
- y& S3 Y. U* W. B- z; L4 x$ J
var tick;
5 s4 ^. h& e$ P$ f+ M& A
function aphla() {6 n7 F, \5 Z7 |
tick = setInterval(function () {
: x- M$ Q. _ @% E" r9 ]
playVideo();: ]/ {! A. a* j8 \) r# c" C
}, 1);
9 q5 v* W' t+ w- n# J, b8 L- x
}
( j2 X( {8 {5 Z- y5 _9 q) a
function vdStop() {
% K4 ? m" `% a5 D
clearInterval(tick);2 y3 z: m+ |! G3 e" `% w# e9 w
}6 `8 g. P" L9 d6 V& r

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
o) o7 y6 l( L% b1 {2 j
const socket = new WebSocket("ws://lm.com:9502");, q/ Y. {! c" T) T/ t4 v& D
//
( V' h+ e$ F! |* w) b. Z2 h
socket.addEventListener('open',function(){# {3 | x& a% ]1 r% j8 q% i
socket.send('Hello Server! Im live.html');0 W' f8 j; j5 R' E+ i
});' A% s8 c- P# q
// Listen for messages# u5 N1 H. B0 H7 s3 C
socket.addEventListener('message', function (event) {7 p' r% A, L6 i: ?4 V% N
//图片地址0 i) Z9 g6 `7 O* h7 x9 v
img.src = event.data;; A& _) _1 q- i0 U( `
});
* v- [: _7 p) [

复制代码

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

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

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

浏览过的版块