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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
8 o9 p/ h, F5 B$ g/ a9 d
//创建socket服务) ?& a) d8 _* } I' C6 K+ A5 X
$ws = new swoole_websocket_server("0.0.0.0", 9502);
, T" j- P7 S# U# E2 z6 z E. S
//监听WebSocket连接打开事件
, W6 r! D4 O" t+ k- G% ?
$ws->on('open', function ($ws, $request) {/ y0 }# C+ }1 C: V; J- ]6 s& E+ O
var_dump($request->fd, $request->get, $request->server);
% c* y0 a" b/ L8 I4 q
$ws->push($request->fd, "hello, welcome\n");
; x7 W3 `+ ~( h* Y0 K" X. }
});
. p( Q, S* h2 S
4 l% ]5 X- D! g5 l7 Y: I' U) S$ G
//监听WebSocket消息事件
7 J3 W, h- j: ]7 u
$ws->on('message', function ($ws, $frame) {' v5 w/ S/ `$ ^+ n8 x
//推送消息给所有用户, {3 h5 {& ?0 x3 S
foreach($ws->connections as $fd){
% G6 m0 I, B" t. {& F0 d' [7 Q
$ws->push($fd, $frame->data);
! ?9 C, l- u( D5 f/ _" G) a4 o6 {
}& ^6 R b' z) w7 Y [6 B; h
});: l; A( f( x, u8 z5 a. B1 |
4 j! m" R) H' K% \
//监听WebSocket连接关闭事件% O6 _( M* }! @( l/ F4 V2 d
$ws->on('close', function ($ws, $fd) {- D- [& @/ {) q T6 J' n ?/ x f0 e
echo "client-{$fd} is closed\n";/ @! m8 c1 r/ Z. L- t
});
; X8 u7 B* c u
//启动服务
* F/ @/ I7 Z# [3 l+ r6 q8 j( h
$ws->start();
7 H- m2 e5 {3 e7 Q) c
& P( T# _7 Y, Z0 B, R& K

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
; |5 A/ }1 \) u, C
const socket = new WebSocket('ws://lm.com:9502');( n9 w1 ]8 t/ s# I9 J
//Connection opened( M* b/ N4 H. o/ H; J- t% @( \
socket.addEventListener('open', function (event) { [. X* y. r8 j/ R1 z7 ?5 `# N
//发送消息给服务器
& B7 h# v2 v7 N( }4 l/ g# y
socket.send('Hello Server! im websockt');3 M4 a. t6 B8 b. p7 ]* m
});: s2 ^7 }- g; P% r1 H+ i
// Listen for messages4 @, B% e+ |+ P* t$ o4 ^" v6 u
socket.addEventListener('message', function (event) {$ ~. z& Y3 j. r3 b4 L: L6 G) f: q. O
//接收服务器返回信息
3 Q/ u( [+ t' t5 h2 b
console.log('Message from server ', event.data);& l# k. w6 ]5 n) P) B- g
});
# x% g/ H8 ^8 }0 X1 K+ e* s I
4 t1 N9 f$ C9 j5 R% N8 ~

复制代码

伪直播主播页面

html

<body>& x- S, Q$ {1 m
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>) r! P* S3 o& e" y3 Q
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">( ?) j' H2 o5 g; m
画布9 A9 a7 l; o0 z6 o9 n! F
</canvas>
7 i: Z. N- R. e# Z+ x
<img src="" id="videoImage" width="350" height="700">/ d1 ^& l' O. A/ G6 R4 W; t$ ^
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
4 p- E# |9 K5 U2 O9 |
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>* p% F5 Z; q6 l; O
</body>
3 z) s- Y$ k, Y, D; x

复制代码

javascript

var v = document.getElementById("myVideo");& _* Y# y0 r' H- C
var c = document.getElementById("myCanvas");7 v9 ~- A( r" q: I. Z( y4 s
// var c = document.createElement("canvas");# y& h1 k: b+ P b# F7 b A
var img = document.getElementById("videoImage");
- [6 U% q6 C0 u( d6 r
ctx = c.getContext('2d');9 s$ I6 ?. I6 g* v$ c; S
var dataUrl;
) V+ N, ^+ \1 R
const socket = new WebSocket('ws://xxxx.com:9502');/ B2 ? P8 q1 Q2 Q/ j
//Connection opened* @$ e* d. F" _$ ]8 A% d
socket.addEventListener('open', function (event) {; D/ s, @, r4 u
// socket.send('Hello Server! im websockt');
b# U1 Y6 R' j7 h
});
7 J7 R3 e5 Y; q( K0 i2 p. |
// Listen for messages
5 @% c. W: C/ e
socket.addEventListener('message', function (event) {0 d4 a' e+ ]* z% n' ?. e1 j! [
console.log('Message from server ', event.data);( [' v2 e( r/ W; P+ R
img.src = event.data;
# k p# k9 { J' p& b0 C, B7 K
});
3 k1 d6 U; F% N0 z5 Z1 M& g& k
) s* O) F+ q1 T& t6 T) C- S% R+ s
function playVideo() {
& D+ u. b3 F( D/ {$ E
ctx.drawImage(v, 0, 0, 350, 700);
|+ Z2 j. U1 v# s& S- w$ a
dataUrl = c.toDataURL("image/png");
$ D2 D" p, m' d8 ~, k8 L
// img.src = dataUrl;
) Y2 o2 R1 c+ O6 v% l+ }) c9 {1 b' t
socket.send(dataUrl);
/ _: ?2 g+ e/ c l6 C7 W" Z
}
) l1 `# g z& a# _& Q- c7 R8 w
var tick;& z+ a8 k% x# V% R
function aphla() {, @' q. @$ O! F6 U% ]$ C. ] |1 ?
tick = setInterval(function () {+ h* q& _( L- \
playVideo();8 }" v! O [) Y7 O! Y4 Y
}, 1);6 |# q! h* o' q
}! S- R& m+ a6 m2 S3 s0 d8 @
function vdStop() {
, m' @$ Y Z: R! [; k
clearInterval(tick);0 ^, r7 e( U! f @: Y
}$ n# Y0 u1 O' T- `4 _

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");* @4 f @$ V% L- h/ z+ C
const socket = new WebSocket("ws://lm.com:9502");
5 D ~8 D& c+ Y% G, o6 r/ a
//
: f0 L' Z% y: r( q6 }' T) Q! s
socket.addEventListener('open',function(){
/ A' N3 l8 s9 a# w$ }6 P9 [
socket.send('Hello Server! Im live.html');
6 q$ I, M6 U; E4 L. ]5 H
});
' l0 v$ L/ T- o8 L/ {
// Listen for messages D; \) _2 }+ {* f9 R
socket.addEventListener('message', function (event) {* N! T- J- Z( W3 o4 v8 m5 A
//图片地址7 [+ q, l1 _+ `% b7 W
img.src = event.data;
0 B0 a9 d8 S& m7 \* `' X8 K: e- O
});
% w2 l6 @6 e7 \. ?

复制代码

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

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

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