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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
& Y$ k. Z$ n$ Y/ ?6 N& J# G7 a4 I) B
//创建socket服务
4 D- e ~: h2 B$ z- y
$ws = new swoole_websocket_server("0.0.0.0", 9502);
* R" N) ^: y4 d& P- F6 C
//监听WebSocket连接打开事件6 ~7 e# M( u$ v
$ws->on('open', function ($ws, $request) {6 Z* {; a( q6 ?' M! E
var_dump($request->fd, $request->get, $request->server);' U; h9 t& p4 g9 q
$ws->push($request->fd, "hello, welcome\n");
; e i9 Y- l1 |3 g: s- a, Z6 V: R) T
});
1 i/ O o5 i0 M" H# v
5 v+ ^/ M1 s$ `. o2 z4 q
//监听WebSocket消息事件. m% }4 N: d6 x, ^8 R- ]
$ws->on('message', function ($ws, $frame) { o* L5 \+ l* j6 Y9 F& y$ n
//推送消息给所有用户
; T, I5 K# x [! ]; X3 M
foreach($ws->connections as $fd){) w2 z* e% D9 V! ^& l3 q
$ws->push($fd, $frame->data);
9 r/ O6 K; M9 V) G' E1 U% Q
}
Z \# b3 G5 ^0 z3 g
});
, i5 @$ D* l8 F# ]% V& h
& w! b. |, O! K: z$ ]3 n
//监听WebSocket连接关闭事件
" n1 J* C) b* J! N
$ws->on('close', function ($ws, $fd) {# H& u# {( k; C7 C$ C* ]+ M6 V
echo "client-{$fd} is closed\n";0 y/ D# v$ {6 T4 Q' a
});& a" Q: X8 S/ S% D, |. V
//启动服务) v" E3 g, ?6 x! D& e4 z0 H
$ws->start();
0 K: s: S7 v; V# u+ I) m) ]
& @1 R7 q+ ]2 h u1 u& K! i

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器/ t# z+ s! j2 J
const socket = new WebSocket('ws://lm.com:9502');
4 G( r* u+ f% Z+ t! t8 h0 K, O
//Connection opened: ~( ^" Z4 d- y
socket.addEventListener('open', function (event) {
U% P) }0 y" N
//发送消息给服务器
0 t' B4 r1 m4 r6 }+ M
socket.send('Hello Server! im websockt');
4 _2 J* U# }( X6 P3 P! r2 g
});
3 ? _7 n }. w- E, A: J( k
// Listen for messages# o- X( i, b+ H- B6 Y+ f- P% o+ `; Q
socket.addEventListener('message', function (event) {! f+ Y5 v6 l) A: [
//接收服务器返回信息
, {8 A$ u3 W2 O T: r T5 A
console.log('Message from server ', event.data);; A- _3 [1 ^( D8 y
});
% T1 ? ^- I/ l0 O; u/ b
) p" h8 \' r0 m& g4 I

复制代码

伪直播主播页面

html

<body>$ i( X. r: r6 s4 g/ n3 K0 {
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
, q& B7 z1 ?0 [8 T8 H
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">4 g) g) e; u$ |7 o* r9 C
画布0 H* U1 B. E2 ?; h+ `) }* V
</canvas>
) z- A6 w* c$ `+ D. h
<img src="" id="videoImage" width="350" height="700">* l' l" ~' t! q" B' H
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>/ v4 H$ F/ ?! g% R+ k4 A& @
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>& r8 U! z2 e, X8 r# e. v
</body>2 V6 L [' S$ ]+ T- m; t( u% y5 I1 r

复制代码

javascript

var v = document.getElementById("myVideo");9 [( X4 R6 e! k2 J
var c = document.getElementById("myCanvas");% M) k; {8 r. B( H+ _+ }5 K/ m
// var c = document.createElement("canvas");
, h! f- _. J u! u7 |8 ?
var img = document.getElementById("videoImage");, z% z7 p) p8 g' I7 X0 X' l
ctx = c.getContext('2d');& k$ k+ `6 H5 s" @7 y# A
var dataUrl;$ v D6 q: I& g! A- Y2 n7 I
const socket = new WebSocket('ws://xxxx.com:9502');
, R2 S1 B% x5 x8 `; p1 O* d h4 l
//Connection opened; c2 T: n( g) A: F8 R
socket.addEventListener('open', function (event) {: S' t: c- ~9 g7 _' d. ^
// socket.send('Hello Server! im websockt');
1 l" b( D7 n1 R- ]% B
});
" {! }( y/ @- o2 n
// Listen for messages1 `+ w* J& B% E# S: i
socket.addEventListener('message', function (event) {7 r! R" k& \+ h% k. C
console.log('Message from server ', event.data);5 b/ F: `9 a2 Y$ }3 h/ }
img.src = event.data;( s9 H) N' N3 e' ~
});
3 E) w& m# U% X8 }. [) V
+ |. r5 F2 X$ V
function playVideo() {7 M3 X$ `, W0 o" L# ^1 W
ctx.drawImage(v, 0, 0, 350, 700);! t# f% z; T8 T( N6 E7 f
dataUrl = c.toDataURL("image/png");
* b; B; m/ w0 A2 R( C0 D: k# a
// img.src = dataUrl;" Q Z+ h% L7 O- a7 H- H
socket.send(dataUrl);2 ?. b" z. h6 g
}
; B0 Y9 p0 Y4 I
var tick;# E: m% L* C+ V+ M' w
function aphla() {
, }4 ?) \% a3 P+ F; ?5 L
tick = setInterval(function () {
4 D4 }0 B' d9 q f( i7 K
playVideo();
3 Z( ]( {" G: D1 h& R- P0 {* m, g3 @
}, 1);
# f6 l0 J* v7 W1 C+ S% l5 F
}, b1 U2 F) z' M1 ?0 H, u# X
function vdStop() {: o) Z+ P6 U2 V- M6 g
clearInterval(tick);5 E4 k# N3 `) W
}/ F9 W" q3 u& P5 F" d. U

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
0 x( Y% a8 t5 z" h. Y% U" V+ B
const socket = new WebSocket("ws://lm.com:9502");' L g! E4 q+ s& t+ t3 I
//5 D% t7 H% M" d n" q: b, s* z
socket.addEventListener('open',function(){8 ~8 \4 A% `4 b/ s9 O9 d+ r0 _9 q
socket.send('Hello Server! Im live.html');
, h# q2 v7 j( {! r
});( N% A* l" \$ M5 g/ J4 m# P
// Listen for messages
) y$ h( x( U: [) a$ v6 D8 a: W
socket.addEventListener('message', function (event) {
, P1 i2 p8 Y9 g/ q, S9 |2 D+ S% F
//图片地址
- C- L# A' j. T6 ?
img.src = event.data;
2 s9 G( |# s) C \% ~
});
( V% V1 x0 \4 Z2 h1 @

复制代码

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

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

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