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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); * D% q/ M: I% l* e- Q7 e! I/ B
//创建socket服务! M; D6 i. l# B7 a! j+ p
$ws = new swoole_websocket_server("0.0.0.0", 9502);
! q/ o, m7 f- p9 k
//监听WebSocket连接打开事件
! z9 g7 d3 ` Q( H
$ws->on('open', function ($ws, $request) {7 u! s5 V* p7 t2 S' e; u
var_dump($request->fd, $request->get, $request->server);2 K% `8 `* B: W3 G$ Q+ I: V! }
$ws->push($request->fd, "hello, welcome\n");
2 l: R& D" |7 w( c3 \5 ] B
});
) R. f$ O" c+ d: e+ a
/ ~0 v: p8 g# h: s* |6 ~9 z$ }% d
//监听WebSocket消息事件
% t# K" o, _- @
$ws->on('message', function ($ws, $frame) {
$ Z3 r) E# m7 I; k
//推送消息给所有用户
2 y0 q) r) L H6 L6 V. B: S
foreach($ws->connections as $fd){0 @: i( H4 I' X6 N- A
$ws->push($fd, $frame->data);0 g7 {/ X$ S7 d9 w P0 L
}
% D& y( T: J6 d
});" M& X) B* y0 _/ q) Y+ y5 X) p; Z
, e) J$ E# F$ y5 F; R
//监听WebSocket连接关闭事件
; _# I5 I) v) o! [
$ws->on('close', function ($ws, $fd) {
5 Q/ }6 t; s) s0 T8 A* e
echo "client-{$fd} is closed\n";- `3 p+ n' B+ w
});& c6 N4 Q [. t3 x7 q5 t
//启动服务
D4 L4 N9 s/ R, A* u* L
$ws->start();: f# G0 j* ]; A6 R7 T) L
6 X3 Y) s1 @# s0 ]

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器/ M( `9 o. V5 c ]8 F
const socket = new WebSocket('ws://lm.com:9502');# v/ q0 o( I' O( q0 L
//Connection opened
+ t2 ?5 H" i; U9 j+ m3 H
socket.addEventListener('open', function (event) {1 }- |( z: Q' z/ \
//发送消息给服务器
9 @1 k9 x$ @) |) c" b: M" o
socket.send('Hello Server! im websockt');/ ?. q0 Z8 C' j
});
+ L2 h* t8 p9 i0 ~
// Listen for messages
6 C- }: F& X9 O- m2 N
socket.addEventListener('message', function (event) {$ z6 p1 S8 W t$ N
//接收服务器返回信息
- S# t3 J9 h9 ?" c" x/ Y
console.log('Message from server ', event.data);
+ n! O8 H4 M) G4 ?! K' q# ~
});; z9 n6 M' @! q2 g+ r1 |$ F' N
- f9 N& Q. J) V- X

复制代码

伪直播主播页面

html

<body>/ ~" C7 `- C7 q/ A1 D) Z0 G$ z
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>4 L( O$ W/ U% L1 F3 R8 D9 B
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
4 b! |2 ?. @; x/ d7 K; p
画布6 {% L: Y+ D! T3 O1 u2 m
</canvas>
$ W* R! \, R" ?. H) o4 t. h+ k9 N
<img src="" id="videoImage" width="350" height="700">
, u. G7 W/ R9 d! l
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
3 Z Q# H* U6 D1 X- d( k# i
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>5 w, r0 Y6 U! U" H% W8 S
</body>2 g- A: Y1 Q2 ^# s# u' c

复制代码

javascript

var v = document.getElementById("myVideo");
2 u: i: w2 @9 Y1 a3 j: [" \6 @& b2 p
var c = document.getElementById("myCanvas");
$ b9 r) k* }8 L( {4 K |$ `& Z
// var c = document.createElement("canvas");; L s c- Y. A0 y
var img = document.getElementById("videoImage");
3 U: C u4 G6 ^7 x# e7 t# ?
ctx = c.getContext('2d');
5 F2 N1 L& u8 _4 t8 {' O3 E
var dataUrl;4 X) u9 H8 ?) y6 ^$ Z( d; ^4 N
const socket = new WebSocket('ws://xxxx.com:9502');
0 s2 H, d) R/ Q4 U i# ]
//Connection opened
{/ W' o1 [( ^8 ~7 y# X9 N: s
socket.addEventListener('open', function (event) {
8 X) S) x/ m m" f2 n* v
// socket.send('Hello Server! im websockt');
' L$ T0 M/ s5 I# H7 q+ T
});
: `8 A! Y& U" R2 C+ r7 U: P ?
// Listen for messages; |; a6 H/ W/ }8 _, g
socket.addEventListener('message', function (event) {
( z# g$ w2 P9 A0 b
console.log('Message from server ', event.data);
/ a- _: ?6 ^# o$ D2 R. }# i
img.src = event.data;
( T3 x2 T# w, C
});
2 v& P7 h7 }: K, a8 j
' c! B% T# w3 K7 f" z: |( V1 d
function playVideo() {& t6 S% ^/ a& ?3 D: ^- x+ C, O
ctx.drawImage(v, 0, 0, 350, 700);
8 I# j1 D! V" M1 o6 y, [4 a
dataUrl = c.toDataURL("image/png");- A3 [% ]: {9 l# J2 ~5 y
// img.src = dataUrl;
' X& W9 ]5 c4 y2 `# D
socket.send(dataUrl);
' ~; _9 b# A" K) e. g
}9 f" ~$ A+ [8 C) C2 v# x
var tick;
0 g1 p; u4 [: A/ U+ a
function aphla() {, @% x9 x. K9 [6 P7 V& v" Z
tick = setInterval(function () {
* T" N1 r/ e& U$ f4 q6 t; R! e
playVideo();% I- M, i' l& |
}, 1);9 z# P* o, O$ O7 R/ g2 Y5 J
}
5 ]2 P! ~+ I' g+ D" h1 u
function vdStop() {
- o. j* h) D) e4 }5 T1 B
clearInterval(tick);
: b9 N, w; \; \6 q5 a# \
}0 x% y- r, l' {8 e! s. M6 ~7 j9 E

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
* w* [9 M! q, A% y2 K+ _$ v, f$ v
const socket = new WebSocket("ws://lm.com:9502"); F1 ]& z+ z) F+ j+ \$ \7 y5 r6 r
//
1 q y2 Q- U/ h- e* ?& U% i
socket.addEventListener('open',function(){- L) g9 a+ q% n# o9 _
socket.send('Hello Server! Im live.html');
4 G+ K, m' o0 M7 a5 K, y- Z
});
6 F2 v4 `# P$ \+ M0 P4 o
// Listen for messages
: g- y4 O/ J" _2 K
socket.addEventListener('message', function (event) {! Y. h3 b0 k C" L7 ]' i1 P3 ?7 b4 P
//图片地址5 \' R. n* `; V4 H; z! l7 a
img.src = event.data;
w. D+ _# T6 s2 t/ S& m( l
});
0 t( |& k5 G- a4 }. ?& i* Q& \

复制代码

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

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

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

浏览过的版块