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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
$ o' v( }5 O1 \
//创建socket服务
7 _. v: y3 \1 D, g4 U1 t
$ws = new swoole_websocket_server("0.0.0.0", 9502);
# W* g2 e) v- b/ |% r; o0 j
//监听WebSocket连接打开事件
( o! F$ C8 K' D4 n
$ws->on('open', function ($ws, $request) {
9 j4 b) ?$ O& D, B9 P, I
var_dump($request->fd, $request->get, $request->server);+ E* i2 }4 j- P$ u1 d6 M
$ws->push($request->fd, "hello, welcome\n");" b3 @& ]) V1 y
});! l" I6 b/ W' i2 [2 L- Z
8 |! R2 h- p4 n G% o* F% f
//监听WebSocket消息事件
0 f. {. R* I# j x& k$ z
$ws->on('message', function ($ws, $frame) {
5 v7 C1 Z) Q# D9 v3 ?
//推送消息给所有用户
, d4 J3 J! r$ ?8 }. _3 A0 A' x
foreach($ws->connections as $fd){
9 w" g# h& v I( A* }8 T
$ws->push($fd, $frame->data); D, c: p, I- h# H3 @& u# r
}
' y% ]: p& c _1 i }- u
});2 S W: _1 d1 d0 A: Q+ h
+ u3 z; w$ g$ g K) @* V
//监听WebSocket连接关闭事件0 `: G% J5 D) x/ L) q# Z
$ws->on('close', function ($ws, $fd) {
8 D) x; a9 B5 H' b( s
echo "client-{$fd} is closed\n";# L! M- o' d2 P" S
});/ H2 P- u+ q0 g! H. e
//启动服务6 } N; c$ y$ X5 u( r
$ws->start();- e) J6 h; m- ~& d- Y: E
4 D: Z5 C7 @ L) e s* q/ f$ B

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
( O% ^% [8 T: ^# p7 K3 U
const socket = new WebSocket('ws://lm.com:9502');
$ H7 `% z ] f$ t0 ?. x: R
//Connection opened
( ?) w i3 s( ]' J
socket.addEventListener('open', function (event) {
; ?. o* Z! N, Q
//发送消息给服务器2 t. S7 c- o7 ^
socket.send('Hello Server! im websockt');1 e$ Z( ~9 c' }6 J- a6 C
});9 R" O8 k0 W2 n
// Listen for messages6 n7 y) l) g8 Y( I0 ^2 P
socket.addEventListener('message', function (event) {# V3 F* s3 G6 D8 Y
//接收服务器返回信息
9 I- D9 o p: |: U! `8 t
console.log('Message from server ', event.data);
+ H: h" c: R/ Y& ]: k
});
" t. O* N' d1 M3 q* v
]4 @/ D ^8 T4 V! n+ r1 p& i

复制代码

伪直播主播页面

html

<body>0 O& h- r- i& b
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>7 D* r8 ]1 C2 C' p$ s9 Z2 i
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">+ p1 g8 ?' `4 n7 j9 S
画布0 D6 _! E& m. \3 t
</canvas>
, h- z+ S" W7 \- q3 B3 d) w5 A" D! E
<img src="" id="videoImage" width="350" height="700">4 V1 a+ k6 K; k7 b) P2 k0 I9 g
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>& t9 D+ g _5 R. }! B: n
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>$ g! Z, b# X. t; M) p) F. j
</body>
; c. R+ s) I7 n

复制代码

javascript

var v = document.getElementById("myVideo");" Q a4 N* t4 K/ c' H
var c = document.getElementById("myCanvas");, i6 x6 w" X- \; [' n4 c% A2 Z
// var c = document.createElement("canvas");
" p1 k! s% J/ g) W& \; a; D% Z
var img = document.getElementById("videoImage");" ?; K2 H" Y) J7 a. Y9 p
ctx = c.getContext('2d');
* [6 M8 i7 @: ?" n+ r0 L m5 L
var dataUrl;7 o% f( N5 H: J7 e3 v
const socket = new WebSocket('ws://xxxx.com:9502');1 b; }( S) P2 Z* Z/ I0 c3 P
//Connection opened
5 d$ \3 P5 P- A1 u
socket.addEventListener('open', function (event) {
1 T$ Q* J3 {+ Y7 h
// socket.send('Hello Server! im websockt');
: ~" T, f Z1 {* ?3 q
});
* T" [; i% e9 t) ?
// Listen for messages0 [& @" k- |& t
socket.addEventListener('message', function (event) {7 s6 O5 x: S5 Z' X; l
console.log('Message from server ', event.data);! `1 z0 `: i6 U \
img.src = event.data;
% A( O9 D" a# N: b, }
});
0 h# E( ]/ S7 G. e& m9 r# R- `
# f% p1 b( K+ m2 e7 J" K
function playVideo() {2 ?) B1 m3 v: Y
ctx.drawImage(v, 0, 0, 350, 700);
& o8 z. _& ^0 G4 y& O/ [' H# j
dataUrl = c.toDataURL("image/png");
3 N% r1 I1 q, u j
// img.src = dataUrl;! i: k' C4 a1 ?' ]5 j" n8 D
socket.send(dataUrl);4 u; X4 i: h7 d" ]
}
4 Q/ i+ g, `. ]8 `1 m
var tick;
0 m. |0 Z' ]" Z; b/ e
function aphla() {
& S" [% U* `: G y) @3 s& O
tick = setInterval(function () {
% F3 e# `9 Z$ `. M# L
playVideo();' p0 l$ R, B) O
}, 1);
4 E; s( ~1 o \ h
}
7 H& E* D# y4 X0 z7 c
function vdStop() {
, O- k$ X! w, f: G" c& _7 |) h* z
clearInterval(tick);) \& F" w+ M4 K, G; u2 `
}; a% _1 u$ n8 r2 w/ N l

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
6 y a0 s7 k# U4 z2 H3 l7 F8 [3 H
const socket = new WebSocket("ws://lm.com:9502");. H( Z6 P' p: Y3 |# ?6 }
//
' t3 {. r/ k3 v- R/ B! r ~; h
socket.addEventListener('open',function(){
2 g9 S `% Y; x+ j/ a; Y
socket.send('Hello Server! Im live.html');( v, B* ?: u- Q- K( p1 H) E* l
});2 m, R, a% C: M& E9 ~ M
// Listen for messages) P, ~5 w( I# c# ~4 m6 [$ u e0 C
socket.addEventListener('message', function (event) {
5 r; q; A* I+ l1 \8 u* N* `4 L
//图片地址
1 f0 |% O: Q/ i m$ D: P
img.src = event.data;
9 ^$ T3 V, H9 G; g/ j; e
});
) C) i$ s7 i" m

复制代码

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

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

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

浏览过的版块