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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
! T, H6 o% f% p! m
//创建socket服务; n5 h- @" k1 [: D
$ws = new swoole_websocket_server("0.0.0.0", 9502);
! V) o; V! f( @- N0 @ |8 u, E
//监听WebSocket连接打开事件2 `/ t# B5 p3 D+ {
$ws->on('open', function ($ws, $request) {
$ d6 ?6 N. L5 }
var_dump($request->fd, $request->get, $request->server);
& m; a# ?2 k# R& ^, n
$ws->push($request->fd, "hello, welcome\n");, ?* P( I: S. ?2 I/ `. l0 M
});
' Y* g7 j. M2 T1 E
8 j/ T: P- }) g' u% [# {% D6 r
//监听WebSocket消息事件
/ g T9 K7 x! V( O* L7 L2 u6 l
$ws->on('message', function ($ws, $frame) {. B& w% T4 c5 V- O2 r& Q, [2 q
//推送消息给所有用户& w- p3 S) `, p$ W3 W/ E/ M
foreach($ws->connections as $fd){
- a9 @! \4 X2 R7 X4 P
$ws->push($fd, $frame->data);: N, ]" ?0 b7 @& h3 K) W
}8 b1 P0 z% ?8 P7 I0 o
});
; W% s' W3 Q# n* A6 S" \3 W8 Y
9 b8 C, S( r+ r( ?
//监听WebSocket连接关闭事件. z* H+ Z' O3 }% a5 W! F
$ws->on('close', function ($ws, $fd) {7 l+ f$ W: y0 y* z. _
echo "client-{$fd} is closed\n";
3 Z/ k2 R/ ^# H5 d0 Y
});
3 V8 W' e8 x/ ^) |
//启动服务
: D7 C" g! G/ L$ ?# p$ ?, @
$ws->start();* u3 }9 m" U/ _3 L/ q* ^
3 o7 j. [+ S, ^$ r, A) A

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器3 J2 P1 E* u& v9 O; z- d9 o
const socket = new WebSocket('ws://lm.com:9502');, n3 R% a H; w K. ?: u% Y7 x U% O
//Connection opened) \5 Z* q6 F8 H8 x+ \9 m3 t1 q0 }
socket.addEventListener('open', function (event) {2 ] P! d% ^ K! J( Q2 X& ?( E
//发送消息给服务器
; h9 m7 b* e1 t) C; O1 n# Y
socket.send('Hello Server! im websockt');/ D/ p: d; G6 L v/ b: {( j3 ^
}); M, Q: D! K$ `0 s$ S8 [& \& Y' |
// Listen for messages6 l; C8 c. F8 O7 l) X
socket.addEventListener('message', function (event) {: I3 ` Q: S) G. ?* x: F0 n: a
//接收服务器返回信息/ K2 |7 v# s# @9 d3 N7 M- ]
console.log('Message from server ', event.data);
0 J9 l* R4 ^( e# E, Q! {4 n5 H
});
% e2 ]1 J9 E! p, J6 n* F9 G9 N
0 x$ J6 [% c" y: A# q

复制代码

伪直播主播页面

html

<body>1 d6 t" ?- o; U1 T1 w
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>: i- a( d2 S/ p. w- i+ b
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
; V2 T2 l* B; H4 f6 v
画布
$ X6 `4 Q$ I+ S* ~$ `
</canvas>
3 k5 H6 t3 x2 `3 `7 F$ {* l! c M% ?
<img src="" id="videoImage" width="350" height="700">
! U& q* g4 a" j9 u, C# b; V6 B
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>; i/ w- I1 K1 }/ g% \
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>: o; z+ |- o9 P" L( g
</body>5 Z: n6 _7 i1 o/ _$ o0 V

复制代码

javascript

var v = document.getElementById("myVideo");
5 @# G3 m0 w: }9 R& i# ^, X6 I
var c = document.getElementById("myCanvas");8 f0 k, u7 j0 Z9 C
// var c = document.createElement("canvas");. w! J4 O0 f3 g; l8 A! w
var img = document.getElementById("videoImage");
+ M$ l% ?5 R; A; } b: T, n& I
ctx = c.getContext('2d');
$ V% m" U) H) P: N+ K' ~9 Z
var dataUrl;" @& w1 N) @$ I
const socket = new WebSocket('ws://xxxx.com:9502');4 \6 L9 w0 {# q( M' n
//Connection opened3 ^) H7 z- H- {1 F! @, w
socket.addEventListener('open', function (event) {2 j1 ~# j0 u9 Y! Z$ N- p5 W; d
// socket.send('Hello Server! im websockt');+ q- J# i+ I% B5 ?1 Y! S- [, M6 G
});- b5 J. l- F; u C1 L6 K5 m
// Listen for messages
( ^0 U7 l% f( w: d
socket.addEventListener('message', function (event) {+ h- q* u2 ^7 u. p
console.log('Message from server ', event.data);, z) Q) ^6 U" r2 y1 k
img.src = event.data;
' h1 x6 g' ^& h+ [) z
});2 u) ]2 g5 f2 Q* }
1 P* i2 ]6 v T! r: l9 q
function playVideo() {4 Y1 S+ g+ h' [% w
ctx.drawImage(v, 0, 0, 350, 700);! u$ k% y0 S7 F G9 U, a! ?$ T
dataUrl = c.toDataURL("image/png");
. ^# P. V, s2 d. {- m0 O4 m
// img.src = dataUrl;
9 L& m4 z% r) C4 M
socket.send(dataUrl);
4 o2 X6 P0 N2 v: L4 z6 q6 P4 }( Y
}
0 Z1 n) T0 r' k8 f$ k
var tick;
$ a# e6 U3 l3 x7 w# N9 {' H7 A+ J
function aphla() {' \$ B8 Y1 w- V" q* W5 @
tick = setInterval(function () {$ u: _" x& r( Y
playVideo();
+ X: O S) L! W# V1 G% [4 Z* ]
}, 1);
1 X6 y9 [ n2 O+ h5 W0 D$ H
}- @' x) V2 F2 g4 l+ f8 @0 ^9 v
function vdStop() {
7 a' y+ E6 k" Y7 R3 V& I; V" z: i
clearInterval(tick);
' }6 E) v, l: b8 Z, s$ G, C; t
}
$ [- ~0 T* U' \5 D. [

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");2 A) X4 f( ^& K( R9 O
const socket = new WebSocket("ws://lm.com:9502");
4 q3 o- ~" M- T
//
* a/ @' Z" e4 O* q( N
socket.addEventListener('open',function(){7 ~- Z& X& x% J5 d4 K' J- }
socket.send('Hello Server! Im live.html');
0 o1 F6 n7 i e6 T- V
});1 V ~6 H: u1 {5 F8 ^$ \
// Listen for messages7 k/ c( v" ^) h7 J5 k" G7 U
socket.addEventListener('message', function (event) {/ H! u' U7 p) c P9 Q% a# p
//图片地址
( Y1 S0 c/ {9 D- o H& z* u( R
img.src = event.data;7 D6 ]6 r: |( \1 w8 a0 `+ o% _
});( a' Y% y2 O, O& B

复制代码

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

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

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