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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); ' v2 k& h" l6 g; a2 D
//创建socket服务
: r" j7 V/ R2 @7 G
$ws = new swoole_websocket_server("0.0.0.0", 9502);
- y- g) P# S# q1 U* Z8 B* B
//监听WebSocket连接打开事件
2 A* l% A5 r; ~8 W
$ws->on('open', function ($ws, $request) {
1 i0 a5 [9 m- S! l, G
var_dump($request->fd, $request->get, $request->server);
* a; Y; [4 j% _- z' m
$ws->push($request->fd, "hello, welcome\n");
* B; i3 L ~% i! t+ h
});8 V0 J9 P2 x7 e" p4 B
! ~2 g- J6 b9 U2 P: p
//监听WebSocket消息事件+ I8 ^) i1 `4 z9 @1 }
$ws->on('message', function ($ws, $frame) {% o) q4 ?* q- R" f" Q
//推送消息给所有用户( N0 z6 y* a# h0 H! ~
foreach($ws->connections as $fd){
$ R; O2 W& H# q( L5 m1 g8 e$ c
$ws->push($fd, $frame->data);% ~8 k Z# o/ l c' T8 s" `; C
}0 i! n3 M& l- b
});- X2 @% n- j0 e; N
8 z# P. ?+ E+ p# Q8 |' a9 I
//监听WebSocket连接关闭事件
6 |( o; x4 W, ~+ v6 h% t
$ws->on('close', function ($ws, $fd) {
! Y* ]9 a( J3 q$ s7 e3 i C
echo "client-{$fd} is closed\n";
% @' q l' Q% _" L! L2 R2 w) g
});1 h. g: s: s: L. \. N
//启动服务* T! f$ F" ^1 i9 \. W
$ws->start();
$ @& G: W) F) ]+ ~7 V
0 I9 I+ U3 L/ @

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
' i3 k% {6 [5 J/ r( A( U- _- _) e
const socket = new WebSocket('ws://lm.com:9502');
( w: Z7 S) c. p& K+ I) s7 F! ~8 N7 j
//Connection opened" v8 {. Y$ k8 ~2 v+ s/ H
socket.addEventListener('open', function (event) {' `7 y( Y2 [' c) J% E5 ~
//发送消息给服务器+ \+ J! K9 F% J# N8 B% w% S
socket.send('Hello Server! im websockt');
5 O9 ? T8 O5 r! V/ p
});3 c8 l5 C3 i" f2 m/ @$ r
// Listen for messages+ h) X; q; f. m' T: b4 b# @
socket.addEventListener('message', function (event) {
, L1 p1 t8 x* p7 @- g$ m; p8 X, S
//接收服务器返回信息( j$ y5 I5 |9 E3 A5 [. c
console.log('Message from server ', event.data);
' v( S' t9 p" D* k9 U0 B- O
});
$ k( F. } `6 I% a3 m, D5 d
8 k3 r; i- t% r) i

复制代码

伪直播主播页面

html

<body>
2 J- i9 s M, V, k4 ~% ?
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
( R" {) G9 r6 {& ^
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">0 q% [6 r% K% {/ Z
画布
2 t! H# U+ Z( a' C+ ^
</canvas>
! \- ^' K' d; _5 o1 ?% R
<img src="" id="videoImage" width="350" height="700">+ f9 d% T1 j& f
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
5 ?- ~# z- ~ S# j
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>; \3 V) j b8 F; g
</body>
% L( x6 q3 f) c( G

复制代码

javascript

var v = document.getElementById("myVideo");9 N/ O) {& ^: S7 \( }0 p6 Q' c
var c = document.getElementById("myCanvas");/ a' T7 j8 C4 C/ c# I# x/ I
// var c = document.createElement("canvas");
. A3 M- c" [* ^
var img = document.getElementById("videoImage");
, q( B3 |9 h; ?( j0 C. z
ctx = c.getContext('2d');0 w2 G$ c3 R+ I; ?
var dataUrl;& o5 Q4 o* v+ U( f" K4 a' N. m# T
const socket = new WebSocket('ws://xxxx.com:9502');9 M5 w* j1 Q8 b$ n! h" F
//Connection opened
! l& ^0 D3 b+ E- u& |4 P
socket.addEventListener('open', function (event) { [% z- @, z, ?; u5 ~# k3 V
// socket.send('Hello Server! im websockt');) u+ m1 j& x' P. w9 ^
});5 k& ?- [( |( A$ [1 a4 k
// Listen for messages
1 ?5 z. l" Z+ C: P5 f
socket.addEventListener('message', function (event) {
. c$ p3 W! Z5 E" t* Q/ ^% g
console.log('Message from server ', event.data);! l/ B; R6 o$ G) D2 F
img.src = event.data;
- M: @1 m, J7 N ~
});0 m: C" ^8 h- j# Q2 m1 ^" t
0 |- A/ o" ~' X) A% L
function playVideo() {0 K" x* C6 T6 l2 V
ctx.drawImage(v, 0, 0, 350, 700);
! ~7 |" b. P: _! b# s3 t! B
dataUrl = c.toDataURL("image/png");5 Y, z- L$ h) V8 s+ K. I( Q
// img.src = dataUrl;1 W) J( h' ]% z3 f' _
socket.send(dataUrl);
7 `& x4 `9 Q3 R6 K
}% s! ?; w: H( H( l3 H
var tick;1 U5 ^' n( C3 |+ C- y
function aphla() {
# r3 E( T$ v2 H9 ~( Y5 f
tick = setInterval(function () {9 A; f% X/ H2 p0 I$ r
playVideo();
- H$ ^* ]$ i1 i7 n1 O! S
}, 1);& b$ M) l, E& C4 w$ h4 y& j
}- X3 g* }1 K& p" a( _; R- N
function vdStop() {
% {1 e: J- G5 Y6 E8 B, V" x
clearInterval(tick);+ [0 Q5 D6 K! u' B
}
3 `7 V6 P, }) O: _

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
5 K/ o9 J& c( V5 l- h, [/ [
const socket = new WebSocket("ws://lm.com:9502");" |3 K4 X2 w) b: a" y2 p
//3 |4 }+ D2 {. O2 _' T; e
socket.addEventListener('open',function(){, \7 n% T' I' i: b
socket.send('Hello Server! Im live.html');: p, N: u4 j. \4 S- C0 Y& _
});0 ]1 R2 p* X$ Y7 P g9 C
// Listen for messages
/ S! h8 i% [. L7 R+ V
socket.addEventListener('message', function (event) { T- s3 l8 f. S5 e
//图片地址8 D" i# K q& _. W, u% B
img.src = event.data;/ v+ w* M4 f; h2 h
});& I1 \" r [' E3 H5 D

复制代码

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

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

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