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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
3 ]+ l* h1 l: h5 x) i7 f
//创建socket服务
* n8 M* t) h: y* Q: D" b% i
$ws = new swoole_websocket_server("0.0.0.0", 9502);* o8 h, K& \4 l: I. d: P
//监听WebSocket连接打开事件9 M* M i `; T
$ws->on('open', function ($ws, $request) {/ Q9 j) z9 p/ @" z
var_dump($request->fd, $request->get, $request->server);
8 I/ S. _( B. d/ G3 E! O0 ]
$ws->push($request->fd, "hello, welcome\n");; V7 g* ~" a! ~
});
: P. H5 |6 O: G% }- }: D0 ?: s: \* u
4 x; R, S$ m9 h+ K
//监听WebSocket消息事件# ^ K. N% N6 Q
$ws->on('message', function ($ws, $frame) {
; A. w5 r ~6 Y1 V) E4 z
//推送消息给所有用户! u. d" N2 K7 f9 D: V( Z1 |
foreach($ws->connections as $fd){( @. |# l7 n$ \/ F7 }& N- W
$ws->push($fd, $frame->data);
+ R- a8 ^9 M# D# _$ ~
}. x/ Q: r+ N- h5 r) h
});
, ] d; [3 k) q. \9 f
1 U6 F/ N+ w2 j# Q3 c! T/ ]
//监听WebSocket连接关闭事件
: z; g7 d, f& \5 H
$ws->on('close', function ($ws, $fd) {
: h* Q# q8 H# l+ I% f/ a
echo "client-{$fd} is closed\n";
: V, l+ T3 a9 Q) O. z
});
# _4 N' I6 {) ~" I4 l
//启动服务' z3 L5 `" b9 C, {% x7 t
$ws->start();. c8 R/ T- ?9 [* \0 P
/ `9 B/ U6 E0 s9 J/ m

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

复制代码

伪直播主播页面

html

<body>
7 h6 ~0 Q' y3 W. [
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>" |, {9 h7 M1 x4 L7 O1 h
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
; S( R; C7 ~1 @1 ^1 p% }: B- _
画布5 V0 e! ^/ D* ?- g/ w- a" m
</canvas>0 P& O2 W! R; J( Y# ?5 m
<img src="" id="videoImage" width="350" height="700">6 @$ ?; Z$ \* T# Y g
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
# Y! i" F" z* Q/ P9 r
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
; h2 o3 h A' M8 J5 e1 H! u
</body>
) {3 i# Z1 w" ]7 ]

复制代码

javascript

var v = document.getElementById("myVideo");1 H5 u5 |, c0 ?1 [0 m
var c = document.getElementById("myCanvas");
2 M1 ]( _! X0 m* b& Z/ U
// var c = document.createElement("canvas");% I+ Y( e# X' o8 Q9 L
var img = document.getElementById("videoImage");' e6 U; h5 v5 I# B0 g7 I
ctx = c.getContext('2d');0 O, D: ?* {& ~0 r, h8 m- g
var dataUrl;' q% {' j0 X2 N7 z4 I. e
const socket = new WebSocket('ws://xxxx.com:9502'); s& k8 C; W( l
//Connection opened' J- Q2 H8 K8 H8 y0 v% {2 u7 N
socket.addEventListener('open', function (event) {- d O6 N2 j& n& a+ R2 r* x+ C
// socket.send('Hello Server! im websockt');. V i& J& [6 ?% H S% c
});
% C0 T) D. {7 J( m k
// Listen for messages' x8 v# v% P0 G, b' R0 t$ v
socket.addEventListener('message', function (event) {
& `2 z3 J/ Z. J1 o- \! t/ x# _
console.log('Message from server ', event.data);
1 \, h* `5 y2 G" L% G, W) T
img.src = event.data;
- V4 x: B( w8 e0 V
});/ d2 |5 ~/ J) `% s5 |, _/ y
7 m9 c) [ M) \# `0 ?
function playVideo() {
. O* t; V! t L$ D
ctx.drawImage(v, 0, 0, 350, 700);
6 H8 z6 F5 K7 k6 d2 j
dataUrl = c.toDataURL("image/png"); Q/ \5 ?% l \+ _ {1 V. X
// img.src = dataUrl;
socket.send(dataUrl);
3 p% X' \7 d8 w
}3 Q4 A5 ^5 r7 m y/ y% I% {
var tick;2 a3 u8 I1 _$ A
function aphla() {3 l* F5 \' { r6 e7 W/ z: ` Z
tick = setInterval(function () { L3 k6 q" s: {- x+ n+ E2 c$ F
playVideo();% G2 Q8 A& n; y6 J
}, 1);) Y% ^: B/ [5 O8 d/ N/ @* Y
}- j3 E2 q& R( F# G
function vdStop() {
t) G# w g0 J0 x. L# X
clearInterval(tick);
& ^$ n9 \; T4 t: t9 M
}
, v% K, z. Z1 h

复制代码

用户页面

html

复制代码

javascript

var img = document.getElementById("liveImg");
* C! M3 D/ {: x1 X* q
const socket = new WebSocket("ws://lm.com:9502");5 @+ r/ Z* L, E- a% K9 I. L
//
' {, ^) w) e+ ?: i/ q. |
socket.addEventListener('open',function(){1 ~5 _% R3 H) k* Q0 ]2 o# h' X2 g" D* Y. [
socket.send('Hello Server! Im live.html');
- [* d0 Y9 i0 t8 z% l: L( s
});% `+ i' `& C& P. A3 `$ P. m
// Listen for messages( ]9 F5 l" y* M+ w6 ^2 A
socket.addEventListener('message', function (event) {/ q3 z' T! C8 n8 x. K
//图片地址' G2 t6 z4 d5 V( x
img.src = event.data;) z* v. q' w. I) b
});
. V! { Q& Q) {; o! K5 I5 {

复制代码

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

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

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