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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); ! I& d* f E, `/ W* c1 s
//创建socket服务2 T6 A8 r* m/ z9 z' j8 G [
$ws = new swoole_websocket_server("0.0.0.0", 9502);' c, G- I2 y9 a
//监听WebSocket连接打开事件
: H2 e" |: P3 c- \
$ws->on('open', function ($ws, $request) {3 M5 b# P& v, q7 x" ~# P
var_dump($request->fd, $request->get, $request->server);* e# b$ x& \0 s/ o d( A
$ws->push($request->fd, "hello, welcome\n");
. E7 b5 |7 r5 q$ A: S) b& I
});
R) ~4 B4 D y) ^1 L5 Z$ L& y2 k
$ z( i$ P p( x
//监听WebSocket消息事件3 Y( O, H3 o$ ?1 Y0 [3 u
$ws->on('message', function ($ws, $frame) {
, i7 M4 a. l2 s m2 E0 M
//推送消息给所有用户
) L8 E9 D9 a/ S/ C3 m- w! \
foreach($ws->connections as $fd){
' a& F+ T2 o5 O4 C1 u
$ws->push($fd, $frame->data);, z' _" \6 E5 o
}
L% V& ~. k' [! ~
});, h2 k$ w. @; _. O8 S1 _, U
C' z4 V0 y4 Z3 S$ i& l* p% W
//监听WebSocket连接关闭事件
) e7 X) g6 `: S
$ws->on('close', function ($ws, $fd) {
/ ^ x0 p: Z) @: j8 p1 S! V
echo "client-{$fd} is closed\n";
: z8 H7 o! O# N# c
});
: x6 E4 g& U5 c4 B' O, s
//启动服务& X4 A$ b' t6 k! R
$ws->start();+ N0 J8 O/ z; c ~) f$ g
) V$ A5 i; `1 Z: D4 F

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
' l# J, U) Q0 ^8 w# t8 ~: E
const socket = new WebSocket('ws://lm.com:9502');1 h9 v( W( j0 e! g
//Connection opened4 T6 K, ]( ^% N* P3 w' D
socket.addEventListener('open', function (event) {
, t" z( t* x( d6 D: P
//发送消息给服务器" g5 {. N& v1 M, v) f2 a, W5 R
socket.send('Hello Server! im websockt');
7 A9 b$ D# ` X+ f7 S* ?* W
});, y" d6 v* g1 A, G
// Listen for messages
9 J0 \/ n/ a p/ Z1 X
socket.addEventListener('message', function (event) {' T6 A1 M$ i1 f& P v
//接收服务器返回信息% C) w: R6 P+ B% X
console.log('Message from server ', event.data);) u$ `" k) l8 `( n" r, E! L! w: G
});7 r/ y7 U+ d @" t
. I# O( D% _4 D' _

复制代码

伪直播主播页面

html

<body># J: h- ] }' ~7 P. j p3 k
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
& F* t4 @& F5 T0 q9 N
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
4 ^$ e- M! S5 G6 `6 @4 P
画布' P" c" l3 G3 V# b8 ]; P. Y
</canvas>
1 d8 Z3 E& R5 k( f1 r
<img src="" id="videoImage" width="350" height="700">
8 `' X6 |3 m& J2 Z4 e/ u& s
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
9 o* o# [2 I$ N. e. G
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
5 x; q: K4 l Z" A& N" D( S: t
</body>
+ \0 |) S( Z2 D5 V# R* {

复制代码

javascript

var v = document.getElementById("myVideo");
8 u* M; U5 X9 y% Y" I- p' V" x
var c = document.getElementById("myCanvas");$ S! a% `& T0 P# ^
// var c = document.createElement("canvas");
5 o0 V' ^ a+ m; h( k( v3 Q
var img = document.getElementById("videoImage");
6 o6 ]; K9 Q( x0 [4 V) A! j& p
ctx = c.getContext('2d');; G4 u, j9 e) A" G# ]6 h% _
var dataUrl;
) j# ]. s9 t( ]
const socket = new WebSocket('ws://xxxx.com:9502');
7 k9 m# i! Y0 w; C! L7 W" i- [. w
//Connection opened) a2 N4 T, a. S& K, a/ P D y+ Y
socket.addEventListener('open', function (event) {
) R0 L0 o( l% F) v
// socket.send('Hello Server! im websockt');
' H0 L) ?; D: r; E0 @4 u0 f; }
});
* A' N8 {: b* ^8 R& L6 ?4 @
// Listen for messages9 s5 k7 j4 w O& T
socket.addEventListener('message', function (event) {+ \* }' B: q9 v
console.log('Message from server ', event.data);5 f: }0 G( l' |2 X c8 ^
img.src = event.data;
" D3 V. ]- D& F3 d" t1 t; _
});/ V" v; [$ t* W
- T! g4 S9 X }: U- l z
function playVideo() {
2 U" Z( [) m& V4 t- ?& ^' g& `
ctx.drawImage(v, 0, 0, 350, 700);, s, T) \( }, Q
dataUrl = c.toDataURL("image/png");
3 V9 q6 \! b/ u1 w* o
// img.src = dataUrl;
) s* K( P! w5 P5 i, F. l- V8 C
socket.send(dataUrl);
# P4 m; n4 ?5 ] k9 J7 d |
}( }$ N# I1 @" g$ O% i ]
var tick;
i! S4 L4 o% x" U0 D
function aphla() {9 ]' I: }- K8 X4 `
tick = setInterval(function () {
/ ~# Y; `; Q9 A& X5 w0 Q6 v
playVideo();! p$ p0 y* |+ c4 V3 r* m
}, 1);9 S2 |4 f; ?% x3 j: u9 z; h
}
. L& W2 T$ t1 T8 Q8 G
function vdStop() {: s3 R) E: \- t' o4 J1 `! f* k& F
clearInterval(tick);4 {: @5 z q+ b# l x, m% W
}
( v( m- M& Y$ q" p% h

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");9 y) m+ X% l* F7 D7 o
const socket = new WebSocket("ws://lm.com:9502");7 T$ g3 g1 ^3 S4 t% B8 w q) u8 v
//; v! i1 I5 p5 X, ?8 b$ V
socket.addEventListener('open',function(){# W% z/ ? b$ d7 v( I9 e+ z# @6 B: G4 w
socket.send('Hello Server! Im live.html');
/ x+ L* s/ M; C: A2 S5 w! i0 ?4 q
});
7 {4 X9 Y- v9 z: _
// Listen for messages
% l1 E6 X1 `2 J1 o4 Q8 ^8 P
socket.addEventListener('message', function (event) {
& f, E. \( }3 o0 R3 f/ E
//图片地址
, a) ?5 N* z7 J6 p
img.src = event.data;2 z f4 E1 g! W
});$ P& ~4 |* P- O( o' U+ l8 z

复制代码

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

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

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