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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); , P9 ?& @0 p Y) [5 f0 N. V
//创建socket服务
. G$ w6 U; s+ `. k1 f
$ws = new swoole_websocket_server("0.0.0.0", 9502);
4 c% N4 Q- g/ M8 s$ d, L) V
//监听WebSocket连接打开事件
# R8 I& W2 z3 e& h4 v
$ws->on('open', function ($ws, $request) {
5 |8 [3 t. o. d9 I2 s. N6 S
var_dump($request->fd, $request->get, $request->server);* o! H* N* f G/ ^2 x5 @1 f
$ws->push($request->fd, "hello, welcome\n");; n. U+ k; i2 g' e
});) Y& i7 r- `: b: F
3 B3 `0 u7 T6 I; \% t/ O' y( w
//监听WebSocket消息事件; B: m& W% \: e6 g5 k# j% m
$ws->on('message', function ($ws, $frame) {. ]+ m6 I7 }/ ~( I/ j, q0 e v) R5 a
//推送消息给所有用户
3 h, ~6 f( q" W- m) d2 h
foreach($ws->connections as $fd){
3 J9 u3 x7 }$ B8 F
$ws->push($fd, $frame->data);
" G& n& y1 A6 ]& l" _
}
+ J# z/ P/ F" T; f* ^3 l
});5 C/ g; K' J) ^( R2 r' b: c+ i
& a6 i7 [0 P4 z1 p- ?+ A
//监听WebSocket连接关闭事件1 M/ c- F7 i+ U2 F
$ws->on('close', function ($ws, $fd) {
4 w9 M* C3 ^& {. A9 k
echo "client-{$fd} is closed\n";
0 R' b3 V$ Q) R/ }' J% l0 @( o
});
4 |- Y X7 D9 \4 q' q c
//启动服务" @5 \1 A. T* L, F" ~2 N* m
$ws->start();
; H2 D' ^: Z: c7 }, {
/ o2 d# r# o# T6 Q' H7 E+ e& K

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
! k7 T, a T% G2 `' W; x! L
const socket = new WebSocket('ws://lm.com:9502');
( |7 h. |: W3 {9 N6 z+ P
//Connection opened. P6 Z2 Q5 F4 h' x! ~* L# q- G
socket.addEventListener('open', function (event) {
, V8 c# x. H; M- S+ k6 M
//发送消息给服务器4 x% P: R6 x: L4 V( } E
socket.send('Hello Server! im websockt');
# m6 [( m" U0 h/ S4 l9 F' Y
});
9 T" [9 X4 p2 `; o. K% l$ |: T( A
// Listen for messages
6 P% K2 C) H8 g9 [3 @8 a! j4 B
socket.addEventListener('message', function (event) {
0 e* ^# Z* [3 ]) I; ~
//接收服务器返回信息) D2 a; C/ C/ m% n( C
console.log('Message from server ', event.data);1 n k9 {$ m; Z2 T) @1 {; t/ ]' V4 ?
});
: X8 k3 L. D) X. x
2 s4 g3 [/ g% C" e7 }

复制代码

伪直播主播页面

html

<body>
$ `# E# ~4 a1 |3 a0 ? A
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
1 E" e* p( T! r' r0 h4 k: v
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
9 \/ _! {7 p) ~% H
画布8 I/ h' I2 a' L3 k5 s
</canvas>
" I: u7 [4 U& r% X
<img src="" id="videoImage" width="350" height="700">0 ~$ y7 F/ q+ A' [- A
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
4 [* G3 b. z+ ^: G
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
- `" q" S/ Q2 {% C& h! e
</body>: c- E4 @+ C- {" D$ K# j+ j

复制代码

javascript

var v = document.getElementById("myVideo");4 f7 B! J6 [0 S" _& F8 h6 {0 f
var c = document.getElementById("myCanvas");
& K/ I4 l' H; S6 f# y$ w% _3 m2 B
// var c = document.createElement("canvas");* e7 X* ~) N z7 r+ v( ~
var img = document.getElementById("videoImage");7 p5 f5 j& `. w! d3 y
ctx = c.getContext('2d');8 ~* D1 t' Q |- E
var dataUrl;
- w& m% \4 g; }! f
const socket = new WebSocket('ws://xxxx.com:9502');9 r( R! O V7 r& ^9 @
//Connection opened; P* }! Z! [* O ~ I+ E9 Z
socket.addEventListener('open', function (event) { p |6 [+ W* A
// socket.send('Hello Server! im websockt');. {/ X; w7 i! {$ K8 I' c
});
% p! J# k/ V0 \/ X( w
// Listen for messages$ C. V# n- e! _# b) Y I9 J4 ~
socket.addEventListener('message', function (event) {
: w6 [9 C# U' a* J" r7 h+ A7 K4 v" p6 S
console.log('Message from server ', event.data);
# t5 t" }" G' n! ^/ o+ h% D
img.src = event.data;# C% k F5 W0 \$ v4 @! Z3 ?
});
! k, q0 _' S# }% [" F! {' l
. G' f- X; ^# N- }7 i
function playVideo() {
# t4 K' t7 l# d! |" R1 V
ctx.drawImage(v, 0, 0, 350, 700);
8 d9 _1 v; x% o9 @ @% g
dataUrl = c.toDataURL("image/png");
7 B( E% [2 k1 Y6 I8 O5 S8 Q' [% W
// img.src = dataUrl;
4 t6 q' w3 X" C- W6 \4 {4 |- D
socket.send(dataUrl);9 ~% {$ t' n/ k V2 }; T/ @
}
C" f- y! x. I, U. O6 r2 s
var tick;
7 Y; r% S* @$ W8 i5 g( }6 L) v' f
function aphla() {5 R; w" `) [5 p, h- F% B% f$ m6 L
tick = setInterval(function () {0 R5 g: O* Z: Z6 N
playVideo();
# f: V+ J+ n3 c+ {3 P
}, 1);7 \. G7 i% y" m. a
}
s7 i! u# Q" m- a8 i* y* D
function vdStop() {
9 T- _' N5 e" b; X
clearInterval(tick);6 u# G/ }4 e* O) d% M* Q) U9 I
}
# L# T" D! t2 V( p9 N! ~9 \/ ]

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
7 A9 C U7 `& Y& n; m. C
const socket = new WebSocket("ws://lm.com:9502");8 e- L" q! j( R( K: J7 R9 c8 J a
//
1 [: ?7 Z7 e8 ?9 {& V: m/ Y% W
socket.addEventListener('open',function(){* }# B/ P# E0 d! L+ x! T3 ]
socket.send('Hello Server! Im live.html');) Q/ F7 n/ v/ P# ?
});% n% _% }- m$ @- m* E+ }( G7 |
// Listen for messages6 z: K( e2 \/ d1 j% t. x. p& r0 g
socket.addEventListener('message', function (event) {
4 i- u: Z* L8 P" M: Z+ ^& z
//图片地址
1 `+ S0 o( J, q, E# X
img.src = event.data;) p& n4 p3 a4 X8 t. z
});
6 X# r- [2 c3 E; G8 C7 M- l

复制代码

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

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

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