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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 0 k- t9 s. k% N z
//创建socket服务
* R- x: ?' v2 C$ N
$ws = new swoole_websocket_server("0.0.0.0", 9502);( O4 g2 d: \6 C% j. a7 i
//监听WebSocket连接打开事件& k( q' c1 [( f' }9 m: H
$ws->on('open', function ($ws, $request) {1 n' w N+ i5 n8 k X0 V
var_dump($request->fd, $request->get, $request->server);3 \' T5 s( j9 p1 M! S0 K
$ws->push($request->fd, "hello, welcome\n");3 T# @) O; p# p
});# ~. z! d; Y% Y* V! ~+ ?
! x/ k# L+ H( F) A1 H
//监听WebSocket消息事件
K' o0 }, g& }9 Q/ @6 m" E2 L
$ws->on('message', function ($ws, $frame) {: F) a" f0 `2 a' n3 b A
//推送消息给所有用户
0 x9 D8 l7 h2 Z8 a
foreach($ws->connections as $fd){- B3 O$ |# M4 E
$ws->push($fd, $frame->data);" r, c4 h+ L) J5 }7 M% L6 K
}
' O, T9 ~( y: R1 b7 Y
});% V1 r5 {; O# U! B
O2 x+ R1 g; K$ T
//监听WebSocket连接关闭事件2 G1 h- n* ~6 g
$ws->on('close', function ($ws, $fd) {1 q: n8 G: ?" T6 q8 H: b8 A
echo "client-{$fd} is closed\n";
; T" `' m5 s5 Y* j5 P
});" F2 g/ {% a* l$ R' z
//启动服务
3 P9 q" b# N* m& `& m
$ws->start();
2 K# z2 y; u" Q
! t% ^" J: D( x) m4 q+ l& S/ U

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器' P& b" S+ }7 D; o
const socket = new WebSocket('ws://lm.com:9502');( ]4 T: r9 v# l& J5 k7 B- _2 x
//Connection opened
$ F; \% P( I- _7 V
socket.addEventListener('open', function (event) {( u, [( Z+ Y; z( p$ b+ r
//发送消息给服务器! g: w: W+ P" B% P% [
socket.send('Hello Server! im websockt');
& c3 i8 e" e# G6 A8 C- x
});
9 v4 m4 x0 y* n0 f) I( {( |0 ]
// Listen for messages9 g. l! j+ X; v; ^; Y! z: i
socket.addEventListener('message', function (event) {
1 F. p0 e# @: n. O9 x
//接收服务器返回信息 f- [3 w5 C: F
console.log('Message from server ', event.data);
1 q8 H% f/ B) r( R9 J
});
, Y1 A7 A. Q# M: k4 ~0 j
# \( G9 d1 @- L8 g+ X

复制代码

伪直播主播页面

html

<body>
( ~% s9 H/ @8 L1 q7 X
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>3 B' _7 \3 I0 T+ F9 y
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
! r M7 P/ q' n- o6 `, }( T
画布
4 D3 x1 T1 G( {7 _, w0 i( Y
</canvas>7 J0 ?' d# e2 b+ e* b
<img src="" id="videoImage" width="350" height="700">, x& U' y% w3 k
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>; J& g, B$ u2 v0 ~- E+ N9 m! W
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
* i0 O+ \9 {- E
</body>
. }! j8 C0 A. e" H, @, ]

复制代码

javascript

var v = document.getElementById("myVideo");
|9 v: G) \. S$ I4 B$ @# v: n
var c = document.getElementById("myCanvas");/ _ p1 ~/ \- D5 g% t% B; {
// var c = document.createElement("canvas");
% `, m% f9 Y) I/ ~
var img = document.getElementById("videoImage"); W7 J3 a7 {- |% \% X
ctx = c.getContext('2d');
9 c4 T" }* x9 }! }4 S) F
var dataUrl;
& H. o& B' e2 t- ?0 A
const socket = new WebSocket('ws://xxxx.com:9502');) D/ x$ E) k. }0 {8 \# Q; B4 f
//Connection opened& s! C1 [) |0 f1 a5 E
socket.addEventListener('open', function (event) {
d G7 l! A/ D; W% H& Q
// socket.send('Hello Server! im websockt');
" C! p8 l0 U# ?
});; K% ?5 u- F: b3 q
// Listen for messages
+ ~9 }- P$ b) o% ^) E
socket.addEventListener('message', function (event) {9 L( E, i' v4 _1 r
console.log('Message from server ', event.data);0 p& N0 b% T8 z" r+ }
img.src = event.data;0 M/ P% X4 n$ ^1 B, K
});* c4 ?+ ^! E2 M0 v
_* V" t% H* [: a' Q8 D
function playVideo() {/ Q/ x+ b. R/ N4 b2 b& y" o
ctx.drawImage(v, 0, 0, 350, 700);1 V$ a' r/ I1 G! w
dataUrl = c.toDataURL("image/png");
9 ^0 I* T5 R7 z4 L5 w9 k9 A
// img.src = dataUrl;3 |- C3 @1 U7 o# |0 Y1 G
socket.send(dataUrl);
- Y% L% _# ^4 \. s- R
}: _! ?- [! i1 S. E
var tick;
6 C# g+ p2 R: _, x4 ?# {, l" d1 ]
function aphla() {
" }# e6 k' }7 P% g. t( m
tick = setInterval(function () {" Q$ R" U$ ~" t2 k7 T
playVideo();
T' S; O* S8 X" _! C) c% e
}, 1);
% J6 P' p( ^# u j
}; z9 T: e) K, C+ e# w& X
function vdStop() {
0 G% s/ `0 W2 _7 U+ ~) N; ]$ f$ o
clearInterval(tick);: z$ v0 S- j: q3 [. H, Q
}
9 m. o& e" P1 q

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");) v' m$ X( L2 q7 o& X8 y+ Z
const socket = new WebSocket("ws://lm.com:9502");) N- F2 w M) M4 r) U% @
//
8 _; n( G* m8 A7 X, v. u4 E
socket.addEventListener('open',function(){9 i& g) X- h* H! `* i
socket.send('Hello Server! Im live.html');
' Q9 i) D$ d6 `
});. x+ G8 o: a1 W5 o
// Listen for messages% G0 G. F) H, ^. \6 h
socket.addEventListener('message', function (event) {! k8 t# J) G) _2 t/ a3 ]2 ^- k" Z
//图片地址
0 K1 B, U* N6 H- q ^! i( }6 G
img.src = event.data;
( b9 x) ~5 S ~! e2 S; _3 R9 c
});
9 T3 R6 T% _) t3 h0 l: f- s

复制代码

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

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

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

浏览过的版块