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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
/ ]% h' g# U# S: {' A9 X7 p
//创建socket服务
6 f, N- f; N' g0 u; d7 L# l* i( C
$ws = new swoole_websocket_server("0.0.0.0", 9502);
% E% N: q5 w; _! u7 s/ H& ?* N3 O
//监听WebSocket连接打开事件
$ e( y/ z' q3 @) c2 `5 w
$ws->on('open', function ($ws, $request) {
8 E P- _, N8 K/ X% g4 z0 e
var_dump($request->fd, $request->get, $request->server);/ p$ W+ ^7 H- e
$ws->push($request->fd, "hello, welcome\n");0 A; c& @9 ~0 ^9 O5 \1 n: f8 S" A
});; V ]7 _- Q4 Z, C
3 w$ W3 J5 ]" i# R6 [3 ?1 i
//监听WebSocket消息事件
" ]' A) ?" o+ N; z
$ws->on('message', function ($ws, $frame) {
1 B# r* Z$ D# U
//推送消息给所有用户/ h: d0 n3 c) A J# o8 ?
foreach($ws->connections as $fd){0 p$ w( F% f) c' b" j& a6 d8 u
$ws->push($fd, $frame->data);! K) E6 Q8 M% y; `3 T) ~
}
5 V* q( s3 a \; Z( @
});, S8 l2 p5 ]1 {3 ?8 D# }
* l% R$ b% T" l. D
//监听WebSocket连接关闭事件* F; p6 j# B& W) `3 I- E+ [5 w" R
$ws->on('close', function ($ws, $fd) {0 o- A# O0 j, r/ e% d. C# H( p U
echo "client-{$fd} is closed\n";! _5 ?3 f, w/ x7 a6 A# X4 p
});$ ?2 R8 p3 t/ a6 ?8 a x! b7 ~$ r6 n6 O
//启动服务
6 ^. {- j! f) _5 r" V6 q2 L
$ws->start();
; K( j) w( X8 g! O( ]+ A4 w# k
- Y r0 m" ~! ^+ M: ^3 |' n" ]

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器* X( ?0 Y# }# E5 m8 }# G) z
const socket = new WebSocket('ws://lm.com:9502');
" ^. j' q$ S! j5 i2 c: u3 h& D
//Connection opened) ~; f1 s) X' c7 v! v
socket.addEventListener('open', function (event) {
0 g# V1 h2 D" O4 X. k- w
//发送消息给服务器
9 c: z e" S% \( F1 X
socket.send('Hello Server! im websockt');! x; b) L+ E, _# G g( W6 X2 }4 @
});
" p/ T5 S J9 C, u$ G* l, [
// Listen for messages0 D+ q! D; L/ s3 H. z5 z
socket.addEventListener('message', function (event) {
9 O6 {% x7 V, Z6 A% J% A, n \* A7 H
//接收服务器返回信息' Y" a: \+ l% d3 {' F3 G2 h
console.log('Message from server ', event.data);% m+ x6 ], G4 A
});
% S9 t' o( T$ [6 d: y) u8 s0 L
5 I8 v. u: S; g- }5 D

复制代码

伪直播主播页面

html

<body>- E. i3 p& C% z! c9 M2 l {4 E
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video> j4 C/ A8 P% R: O! M4 _
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
$ d/ `$ T4 G1 h; o' M* n/ u4 q; A( ]
画布
3 N* c. Y, R4 _& U! T
</canvas>* l$ `$ A) B+ ^5 @, E" Z y9 K
<img src="" id="videoImage" width="350" height="700">
' H. g% m% N, G% o8 {) ~" Q9 Q0 }* ^
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
! r& p( S+ v, a2 a: t
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
. K, S- W$ Q) c6 {
</body>
9 N) L$ l( j) G7 ~* c6 y" N; J' w

复制代码

javascript

var v = document.getElementById("myVideo");
# N0 }& f: e- p6 q. w0 @
var c = document.getElementById("myCanvas");
. p D7 d" n' v: w7 q. u- o
// var c = document.createElement("canvas");$ n" S n' ?8 f9 h/ w5 q
var img = document.getElementById("videoImage");
P! O2 K7 i4 R2 M1 m; K
ctx = c.getContext('2d');0 Y/ C" f: J" h0 D/ I1 r @& k
var dataUrl;
/ x1 E3 c. X8 l& e
const socket = new WebSocket('ws://xxxx.com:9502');) R' U1 G# x' T+ V4 `7 w" I0 b
//Connection opened2 s* P" Q3 Y1 |3 Q3 K5 S
socket.addEventListener('open', function (event) {% N& `7 v7 r; S# l4 f0 v+ @. N
// socket.send('Hello Server! im websockt');
+ p: w; t8 W @: o {
});' h$ c+ F/ y2 V S
// Listen for messages
2 T6 Y$ }# V# y( Y6 q/ y
socket.addEventListener('message', function (event) {
% i: Z6 W. q3 ]1 t! X
console.log('Message from server ', event.data);# M& f1 Q& t/ H$ L2 ^5 ^- L
img.src = event.data;4 u% ], F( J; I }
});( j1 b! U. L+ l4 ]
7 C( A, E; k2 l' O& d3 F
function playVideo() {) W3 \% [* Y8 x; o; R/ Z
ctx.drawImage(v, 0, 0, 350, 700);
& F6 j8 e, @) l+ w
dataUrl = c.toDataURL("image/png");
" H5 ^* H. B. H8 C
// img.src = dataUrl;! \ H' ?- b" G5 K, b: W2 k2 _) e
socket.send(dataUrl);
* G& b9 X. V7 |
}
& V0 F0 {) y9 t/ D# q
var tick;- t% }4 d( Q% O( D! r
function aphla() {& R: }5 H) P+ K0 ~6 K4 G1 `
tick = setInterval(function () {1 N5 U8 X* Y, A% r3 `, R) K8 |
playVideo();6 J3 U' A# L/ y6 |- Y
}, 1);6 I# P" j& L0 E" C' z- A
}. Q! w( E; Q5 C$ g( B9 O9 j+ u( L
function vdStop() {9 ?; i$ _+ C8 F* b% [; B9 o8 o
clearInterval(tick);7 {0 b" l4 x4 L1 L
}" B& W' S) m" A' h. i, O3 F4 _5 f. m

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");3 l s5 g. |3 N8 H$ }6 n
const socket = new WebSocket("ws://lm.com:9502");9 a8 P9 _! ~# E
//
# o6 @8 J3 K6 G' u$ l: R$ V; G+ H; p
socket.addEventListener('open',function(){
% b( q: }$ v% v1 u: R
socket.send('Hello Server! Im live.html');* \# E$ y# F0 m4 d
});* k! i. h; {- }& c
// Listen for messages2 Z8 ] a# s- {) ^" O
socket.addEventListener('message', function (event) {
, t/ w1 p. M' Z; `
//图片地址/ P5 g8 @2 {+ _8 S3 O8 Q
img.src = event.data;& g' o3 Z4 Q& `
});' x9 U- Q" v$ n% h/ n# x9 s6 e# p

复制代码

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

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

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

浏览过的版块