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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
& z( v& t% w5 I) A6 G) u
//创建socket服务2 n% a+ L3 E/ N+ E V
$ws = new swoole_websocket_server("0.0.0.0", 9502);4 y; L9 ~* H8 w; k: u1 |
//监听WebSocket连接打开事件
) N3 p0 t5 F7 H0 }: o/ K% K
$ws->on('open', function ($ws, $request) {6 I# b7 O) M, f. O! w3 Q
var_dump($request->fd, $request->get, $request->server);8 X; |9 k8 }& w2 d. |3 o
$ws->push($request->fd, "hello, welcome\n");( x. D7 e5 ~6 I& o0 d
});
5 ]5 W# I& ]. T) K2 k
% l2 {) w4 [1 M) w% R, x. A
//监听WebSocket消息事件
- I& \- H, H" o8 ]; W! w0 ?/ \+ `
$ws->on('message', function ($ws, $frame) {. B2 e4 [% g$ c
//推送消息给所有用户/ R8 V: E+ s* T. n0 j
foreach($ws->connections as $fd){
% }7 {/ D( r: p3 s
$ws->push($fd, $frame->data);1 x8 u C4 X, h
}
7 Q% X; ]' b: a
});- \: \2 A( q- l w8 }7 R
# L7 ~% v q7 w+ B0 t8 c8 p
//监听WebSocket连接关闭事件* v% h; B: Y" W p- p$ `
$ws->on('close', function ($ws, $fd) {: }0 v1 x# p6 D) N: f
echo "client-{$fd} is closed\n";* O# }) v( x, {4 ^1 S: O9 A
});, P- Q4 K0 i" p4 I L# m
//启动服务
* c# B1 Q% b \1 o2 @% v( V6 }
$ws->start();
" N# U% E0 F! n% M* Y! }
# ^$ @. V1 X1 p4 }5 C7 y- m

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
& f! Z8 K# B5 B. f( k n
const socket = new WebSocket('ws://lm.com:9502');) L! D) _' s( l1 H5 D8 {
//Connection opened4 Z& E. z7 ]* Y0 O
socket.addEventListener('open', function (event) {4 h$ c# l& o# y4 \
//发送消息给服务器( ?5 A; @* a8 J, k) N$ T
socket.send('Hello Server! im websockt');
4 |% @- G- [3 { `# z
});
( a$ ^+ w5 N2 X# s$ G
// Listen for messages
, x$ R) v8 `" h
socket.addEventListener('message', function (event) {/ ?7 W! }4 N' S7 s' o6 l
//接收服务器返回信息/ W' N% d' o- ^, ^: o. R0 A
console.log('Message from server ', event.data);( \5 e& U. g( ?1 M7 W% N
});' U8 Z( F Y4 e- Z
) w# b. @4 ?* G) H1 a" R1 h0 h& `" ]

复制代码

伪直播主播页面

html

<body>3 F( i* m% ]8 a; h$ O7 v
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
3 ]; M2 M- g" _. z
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">; w' n$ a, H4 F/ {
画布; V6 J. @- w i" e+ y
</canvas>
$ t9 j+ b+ s' E p7 B0 y; K
<img src="" id="videoImage" width="350" height="700">) l- F' u6 }. A, C5 A o
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
3 m4 L: G+ Q. c* R# H
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
" T# Q4 q$ |) @: ]# O9 d
</body>
) }6 ~( W. d6 H, y$ z

复制代码

javascript

var v = document.getElementById("myVideo");& m9 m% V0 O; Z$ [) }) y+ _* r
var c = document.getElementById("myCanvas");/ M. G' k% M$ ?
// var c = document.createElement("canvas");9 D! _3 L6 s/ w9 [( M
var img = document.getElementById("videoImage");
0 f- L5 E i0 P3 g: v
ctx = c.getContext('2d');
- Y6 q+ s& S$ v
var dataUrl;+ ]) k4 C& V! F; n7 q
const socket = new WebSocket('ws://xxxx.com:9502');" [) ^/ g* y7 z: y9 x0 Z* e
//Connection opened
& s- v' _: A2 p* }$ k: @8 j
socket.addEventListener('open', function (event) {
, l# c4 V% F. p5 s1 Z8 ^# Y) P
// socket.send('Hello Server! im websockt');
0 Z+ Y# T* W+ i0 s
});
( J" }) t( ~0 p7 V; [" x7 d
// Listen for messages0 e+ M: w& u/ d; t U& x
socket.addEventListener('message', function (event) {) D9 b& _5 [& ~4 N5 ?) F! A1 y
console.log('Message from server ', event.data);
0 G! }8 @: I+ A% h# B+ ~" ]
img.src = event.data;+ w) C! I* N! [" j7 g7 T' I7 W
});
, D9 c9 Z) M. W/ \( W
8 H* }9 w3 |+ o" }8 q8 T
function playVideo() {; p4 {: c9 p$ G+ w8 b" L( g2 ?
ctx.drawImage(v, 0, 0, 350, 700);
& }$ R! p7 D) w
dataUrl = c.toDataURL("image/png");' V+ c* e2 X( c2 l
// img.src = dataUrl;! J" }4 c) b4 e" } f f( J
socket.send(dataUrl);
. r0 g/ j+ y" Y- H) p5 p
}4 N# q' Z9 ~, [% U: U/ _+ O4 F" @
var tick;2 k5 C6 L$ [& x: z& l
function aphla() {
* y7 b+ V" J% D" M+ r" I. F
tick = setInterval(function () {9 D( m! g, B* |1 P' Y
playVideo();6 c4 ~" Z+ _5 V& _+ U
}, 1);
9 j& W3 _, K! b$ a* K4 c! j
}
/ v* _% t: q# h: `" |
function vdStop() {5 ~% M. v& o% I/ d$ V
clearInterval(tick);
7 I) z5 d: x: N/ [2 p6 B! h
}
/ y( Q% P: A7 C4 R+ N) S2 g1 ~

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");6 s/ E! P/ O3 B: g" V- [& @ L2 F
const socket = new WebSocket("ws://lm.com:9502");- N2 {/ ^ D, E
//
( @# Q& U' Z1 \5 K8 x8 D1 i) w
socket.addEventListener('open',function(){
/ Z$ D" ?" z2 E( b2 @* t3 }! B
socket.send('Hello Server! Im live.html');
/ R% R" N, g8 ~7 {/ X
});0 J# h1 b5 j) P' \/ Q2 A2 A5 U& h
// Listen for messages
1 F/ J* @% ?: H0 S% @
socket.addEventListener('message', function (event) {
& _( `( {7 U& P* I7 G; C
//图片地址# G4 Z5 V' b+ @
img.src = event.data;' p) a0 {8 `9 `
});
& }( k7 z2 E P, U

复制代码

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

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

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