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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); & R9 |& ~: x- Q/ Y) m$ e j2 \
//创建socket服务4 R8 C1 \' s P0 H
$ws = new swoole_websocket_server("0.0.0.0", 9502);9 h' {# O4 E0 T& M q3 p6 u
//监听WebSocket连接打开事件
! U: i A1 @- b0 X
$ws->on('open', function ($ws, $request) {
+ L- @" L3 C, h" y' n! |* [) ~
var_dump($request->fd, $request->get, $request->server);
" `$ d9 v; o* @: C& L% w+ v# B2 B
$ws->push($request->fd, "hello, welcome\n");( |/ K$ }. v; {6 a5 z
});
; g \9 i( I/ e; r2 z
& _' a' H: W5 J) p
//监听WebSocket消息事件% E" H# I- t5 b5 s4 C
$ws->on('message', function ($ws, $frame) {; {2 C: H. f+ v: x7 _; x
//推送消息给所有用户+ A: W4 E. ^4 r% n& ~
foreach($ws->connections as $fd){
! G+ U$ s6 J G2 w2 k
$ws->push($fd, $frame->data);. b$ U: y8 |9 n" q. w
}' G0 y2 P2 n5 Q8 Z5 w3 s* a; l
});) R" u- W/ g- A
% V6 V9 g, q0 x: v: @$ C
//监听WebSocket连接关闭事件4 {* o! F* |9 G. }% m7 N' @
$ws->on('close', function ($ws, $fd) {4 m( M. S8 j" ^9 Y* e
echo "client-{$fd} is closed\n";
# R. l1 Y( [, Q, N+ t
});
9 T8 a7 O; i& E: l( j4 _8 D
//启动服务
4 l0 t. Y8 J/ u/ v& Y
$ws->start();
" S7 E7 a% Z/ N" w
% n" i( p b- ?

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
3 ~/ H- M1 ? e4 [, G
const socket = new WebSocket('ws://lm.com:9502');
C }- D1 d& M5 A
//Connection opened
3 _7 J5 q# v' J, `" j: i) o6 @. ~& |1 T
socket.addEventListener('open', function (event) {* q1 v, l% W- w. E: D, {1 ~
//发送消息给服务器- \4 i! n/ P4 l" ^! v0 ^8 u
socket.send('Hello Server! im websockt');2 O8 b- l* ?2 R0 Z+ H
});
& ?& \3 k8 }2 E# s! O3 u
// Listen for messages
) z: e8 d: [3 j
socket.addEventListener('message', function (event) {2 Q: N. o7 [: F9 G; A
//接收服务器返回信息
, d2 Y! Q/ U( l; F; k3 D
console.log('Message from server ', event.data);0 w4 C B( m( O$ k
});* s8 D7 v' A& x9 }+ ^" u+ d! a
0 A* @5 h5 }! H# z: p

复制代码

伪直播主播页面

html

<body>
2 _! w- w/ Q) E+ f+ F6 p. y
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>4 O( X& {; n* W) x
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">( O5 m9 q0 r* K$ f4 ~
画布. w3 V& F+ b; `/ [8 V' a, t
</canvas>3 s* f4 O$ }. E* U6 i% [9 {
<img src="" id="videoImage" width="350" height="700">
0 P# u! Q, P- a9 x) O
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
6 x! j0 j2 c5 E% u7 `5 X6 X) N
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>$ e3 q9 D$ Z- C; E; t: G o W
</body>
. j) E9 v2 x' }5 o$ [" V

复制代码

javascript

var v = document.getElementById("myVideo");4 L8 m5 ]. G2 H5 p
var c = document.getElementById("myCanvas");( P0 `7 Z! N6 w5 _- d" v
// var c = document.createElement("canvas");
2 i- ^: W+ w, t a! U+ J, A/ v
var img = document.getElementById("videoImage");1 l9 P' n; W' L3 x% i
ctx = c.getContext('2d');
2 H; U" N, [" E' Z n
var dataUrl;4 c' F9 `* u9 j1 ^2 n& U- f
const socket = new WebSocket('ws://xxxx.com:9502');) _6 \% ~- S9 O( N3 A+ q
//Connection opened
& J7 j+ c; P/ z- y" Y
socket.addEventListener('open', function (event) {: [" V% @ o+ y' f0 t/ ~9 `# l
// socket.send('Hello Server! im websockt');' N E; V. W A; C
});
# H3 K3 S+ b, I; g( q; M
// Listen for messages
9 K0 F u2 C4 A. O6 D* [6 q5 d A
socket.addEventListener('message', function (event) {
- d" j; V% i$ s, x$ I
console.log('Message from server ', event.data);
+ g C- P# j8 V7 m T, R/ s7 m
img.src = event.data;
3 _' }. x) s. s9 a
}); G& n3 O. O. ] D* i: ]" g7 t
& n/ p/ O$ G8 o9 U
function playVideo() {! `$ ?' B2 I6 c
ctx.drawImage(v, 0, 0, 350, 700);
- ^. @0 M/ r; x/ v9 R W3 I- Z
dataUrl = c.toDataURL("image/png"); D d- Z! | M0 u0 W6 z3 k
// img.src = dataUrl;; C* B4 @; a% z& N. J3 g5 [
socket.send(dataUrl);% O. Z6 g" h% T/ @* S9 o0 ^
}
% ^" A1 c3 w: z" W8 `/ F
var tick;# f# L# M9 @# o
function aphla() {
3 i6 `3 u/ g5 O1 ?1 H7 q+ ^" N
tick = setInterval(function () {' G# `+ c, g# K7 I9 v0 s
playVideo();5 ` j! e4 h1 P( H$ o$ c) f
}, 1);: c! t6 y( q+ ~/ ?1 Q
}
) M5 [% k4 R7 \* V6 @0 H
function vdStop() {
1 m9 h$ X( T0 o8 V7 X* G9 y
clearInterval(tick);
; Q0 ~' V4 P; B) @0 D5 }8 |
}
( I E: ^2 u6 s# q1 j( h

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
; t8 a9 T* _) l! Z% A) M1 T. q$ A
const socket = new WebSocket("ws://lm.com:9502");/ @; h/ t$ v1 k F) j" l
//$ n; G! u/ W; R
socket.addEventListener('open',function(){
2 j( H$ B5 j! M/ h" Y
socket.send('Hello Server! Im live.html');4 Z3 a7 k) v+ V: B D: C* w" D( S7 e! U
});0 `, \% N8 m7 C0 b. O
// Listen for messages
: [4 r1 Y7 @- A8 O1 a
socket.addEventListener('message', function (event) {
8 w, W5 e# o& ]) [$ h0 R, H
//图片地址' }2 F: B1 k: N1 P+ Z; {0 _
img.src = event.data;5 q0 d' [! c w
});+ _$ C8 G, B" B' z

复制代码

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

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

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