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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 2 t4 I+ v) B1 C- r1 T6 Y5 M
//创建socket服务2 K1 P! R' H+ C/ m' Y( ?
$ws = new swoole_websocket_server("0.0.0.0", 9502);
9 Z- n% a5 Y% {$ V
//监听WebSocket连接打开事件5 _4 h/ K- S/ G1 _) h' E, V
$ws->on('open', function ($ws, $request) {
" p; j0 v# P& i6 T! W6 O. m3 f
var_dump($request->fd, $request->get, $request->server);
* z8 v' l) O2 A, f
$ws->push($request->fd, "hello, welcome\n");+ r* m- D" o# X0 k9 [) m
});0 I' Z, ?. Y: `% _) _3 X5 D
& H9 J; C m9 h# x. T
//监听WebSocket消息事件
' x0 L6 j" Y( h( f' I
$ws->on('message', function ($ws, $frame) {1 E0 O) _; x! C0 R7 _
//推送消息给所有用户
' z9 \! ? S, R. M( M) q4 p
foreach($ws->connections as $fd){
/ h$ ^& v% O3 I" U( r E7 y0 X
$ws->push($fd, $frame->data);
& X3 \' @* k" v7 `# ^) t% \
}
2 j. I8 i6 a. F
});/ `. n" `; y) V2 t7 h p5 k
+ w! ]8 _/ {1 a* V w
//监听WebSocket连接关闭事件
+ y/ h" n5 N8 V7 K* a$ Z
$ws->on('close', function ($ws, $fd) {* b1 [2 G: f$ N+ F" T
echo "client-{$fd} is closed\n";
% ^' A' q" T) i# T
});
& y7 w6 _4 Y N" F6 f+ ~. ?7 N1 f. A
//启动服务
. [( Z* x/ j2 L2 t2 p3 c& x# F
$ws->start(); x1 M3 l: G1 i7 h5 B
8 M3 T+ o+ G5 F2 E; f

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器8 t* K6 z5 L- p1 g( u" b7 h
const socket = new WebSocket('ws://lm.com:9502');: C) S( R+ r5 B8 O H5 U, p
//Connection opened, K; {6 F( I c! K, z7 e
socket.addEventListener('open', function (event) {
( W |# B: r d+ L
//发送消息给服务器
) r$ k" F5 x" G
socket.send('Hello Server! im websockt');1 m& x* j5 u3 o; b4 O
});
3 a# O- ]$ D2 f6 ^" c
// Listen for messages
% L$ b+ b+ `0 F! \# J' z* F
socket.addEventListener('message', function (event) {
4 l9 `: U& E% ^: `/ k6 I
//接收服务器返回信息
6 Y7 M0 ]% t! v* w5 \4 r4 N
console.log('Message from server ', event.data);7 T( R( b$ x4 t6 g3 l" X2 {, m
});
7 U2 b+ M" S5 p, g+ z& Z
, |# e- h" T9 z+ W7 i0 v# T

复制代码

伪直播主播页面

html

<body>5 U1 i/ P; Y: A, j+ A. r
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>& U+ e( m4 H& O6 |) V1 X+ v
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">: ?/ s! \: l" {+ Y! |8 k
画布5 K( D+ I7 Z2 @; e
</canvas>
8 ~% e& ~7 P, J1 Y5 ?5 G7 f1 }
<img src="" id="videoImage" width="350" height="700">& w( C( G+ x6 x6 h [ F9 p' A
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>) u7 x- r# I. A6 Y8 J2 W
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
6 T% ~! k1 ?2 ^6 O7 |/ e
</body>
& ]) T- c( _0 S8 i) |, {3 L3 L$ F

复制代码

javascript

var v = document.getElementById("myVideo");
+ J; Z. h3 h# B8 Q* G$ w; N
var c = document.getElementById("myCanvas");
$ I$ k$ M' `5 q" i( `$ y3 K3 Y
// var c = document.createElement("canvas");
. s0 S G( C* E& b5 m/ e- E
var img = document.getElementById("videoImage");" ~: E" ]* x6 a' i U) L y
ctx = c.getContext('2d');
! Q- l' A" p4 x0 m* o
var dataUrl;
; H# p/ j* h) f0 B1 a* q6 m5 F
const socket = new WebSocket('ws://xxxx.com:9502');+ r4 d4 ?/ Y+ E
//Connection opened
0 T* h8 W/ j" j
socket.addEventListener('open', function (event) {- Q0 @) q1 N5 C& L% o. t' l9 y' F
// socket.send('Hello Server! im websockt');
; Z% M$ n: {6 q- g1 Z4 b
});0 h1 o N( V' m( c5 J! O" z
// Listen for messages# o& c* C( x! h" S4 G; c0 J
socket.addEventListener('message', function (event) {
! l( E/ @, n; E8 F0 e
console.log('Message from server ', event.data);1 u- O8 [" D( U- K0 v: q
img.src = event.data;) X5 w) T# \1 F( P
});
7 H x( c# A6 ?( `1 J
# m6 v/ _9 A. r+ f8 @, x
function playVideo() {0 G q, u; ~8 x- j% w8 r0 n
ctx.drawImage(v, 0, 0, 350, 700);, {$ r3 ?, ^) D4 u6 v1 M
dataUrl = c.toDataURL("image/png");
3 a! x0 k8 O1 ?
// img.src = dataUrl;
2 X8 N( p8 ?4 N- r1 k( x: n
socket.send(dataUrl);
. V G, `4 a& P5 u% [6 l
}
5 H* h& _$ ^( r0 g' e! j- h
var tick;
5 q$ w1 M. y7 C: ~0 ?
function aphla() {
+ H. Z2 K m, h8 k8 j/ T3 [
tick = setInterval(function () {+ I x/ q# ]7 v0 Q( q
playVideo();
6 t; |; O, c; A/ ~. Q- z: ]+ l
}, 1);
7 k" ?8 H% K. g" m, Y# c* N
}* }0 |# j8 x" m* a. }
function vdStop() {, d7 A/ I$ M; d, F8 w1 Q" q
clearInterval(tick);* V8 L* @( n+ m8 |; k
}% c* N$ p4 T3 M% R4 a# H, `

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
! X9 w0 J+ q6 y4 {) ]
const socket = new WebSocket("ws://lm.com:9502");# k9 w( B3 U0 F! {1 t( R& F
//
' {9 A$ f$ {* T2 R0 S
socket.addEventListener('open',function(){
/ p a+ F3 H2 p$ @9 t C8 P' x, D
socket.send('Hello Server! Im live.html');
" u4 P; ?; }$ x! S
});
* G6 }$ i( u0 D$ ?7 z! `7 T
// Listen for messages
2 b. ]! D5 b" ~; A' N9 r A
socket.addEventListener('message', function (event) {5 \/ }' M ?- b( D2 Z1 j
//图片地址
1 o+ l3 h, D3 e X$ d1 @
img.src = event.data;
2 R3 L8 P; y) e4 u c8 ?
});3 ~! ]) A6 `; S! y

复制代码

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

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

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