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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); ' a: M/ w/ x) f5 s" J% X
//创建socket服务& E# c+ Z6 y5 Y# W8 x/ K
$ws = new swoole_websocket_server("0.0.0.0", 9502);" C+ y. ^0 X) c# r8 D. \6 }+ m W2 x
//监听WebSocket连接打开事件
6 _3 q( Y# P# |
$ws->on('open', function ($ws, $request) {, |& _: k* N I! l: M
var_dump($request->fd, $request->get, $request->server);! g6 d" O) b# l5 R2 ^
$ws->push($request->fd, "hello, welcome\n");
8 i: z; X+ d+ a6 `
});1 f6 i4 F, l/ U5 Z" P' D, c6 P$ R: |$ A
# n3 w; n: d' d/ A5 f
//监听WebSocket消息事件- U; a6 q) Z/ R! { _- }0 b4 r
$ws->on('message', function ($ws, $frame) {9 m, L" n5 z9 D- x- T6 Z
//推送消息给所有用户8 K$ v' P6 f7 b& }
foreach($ws->connections as $fd){& T( x7 ]! G5 U3 \% C
$ws->push($fd, $frame->data);
1 a2 x& y/ c$ f! Y0 [: g
}9 [* G4 ^' W8 Y9 r2 h- w
});$ j3 H1 g ?* I
6 T. E0 O$ Z. @- P/ s% s
//监听WebSocket连接关闭事件
0 H: D. o4 D+ A& I" Q; |. f
$ws->on('close', function ($ws, $fd) {7 B5 B/ }) M, O" `' y/ O4 o
echo "client-{$fd} is closed\n";
, `$ ^- C5 s# O
});" A, I. S3 C6 |. X# u) m* D
//启动服务
5 }9 C; |9 h8 h. }
$ws->start();
& C1 w" u. V$ ^; C/ g# r
6 j: L# Y0 Y& j* N1 Z: a7 Z6 f/ g

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器+ E, K' P$ W7 C# Q& B* J
const socket = new WebSocket('ws://lm.com:9502');
8 z5 d; J: j- v+ e. p& U9 G
//Connection opened
; G. n% q& E5 I
socket.addEventListener('open', function (event) { A' m) \. l- t4 }9 e) a% | v) H) a
//发送消息给服务器6 E+ A( Q6 s1 A0 W
socket.send('Hello Server! im websockt');9 b6 q% H% t" w/ o W+ c, ^
});
- B) G4 v* \' D
// Listen for messages7 V" X' X4 q: f" A. b
socket.addEventListener('message', function (event) {$ N9 E/ ^3 [* M, c5 ?8 t! J; j
//接收服务器返回信息
, n. l1 Q. R0 x; p4 k5 Z4 Z( b
console.log('Message from server ', event.data);) w& o* P% B i; E; n7 S
}); _/ C1 G0 G( `! K, r
2 c; ~7 o+ ^; B( R

复制代码

伪直播主播页面

html

<body>: Y. U7 J* @- }
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>' u: R6 A0 H) b! r$ A
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
. @! H) ^& R! I9 E5 v3 Q
画布" g$ o# p& S: x1 N
</canvas>
- \3 l/ n- D+ a9 p! N8 h% h- R
<img src="" id="videoImage" width="350" height="700">$ c! D, {' L) y2 o
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>; b# l6 s! S; y' f K! w! s- I
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>0 M: e' \7 r/ u' S
</body>% H& u/ }1 ~# ~3 M1 D$ f/ S

复制代码

javascript

var v = document.getElementById("myVideo");
" l7 P r7 h. ? M! D
var c = document.getElementById("myCanvas");
% N, Z" Z0 {2 q& e; @- W
// var c = document.createElement("canvas");
2 e( k* G( G. _9 ~
var img = document.getElementById("videoImage");0 i5 j8 P9 I: q4 Z8 w6 |- G
ctx = c.getContext('2d');
! z, L' `& }8 _4 W
var dataUrl;! F$ A# e$ X$ h# O
const socket = new WebSocket('ws://xxxx.com:9502');
; }' A0 z/ g& {$ g/ F* |8 \* w; _
//Connection opened8 e& `- O# k, X- O" U2 P
socket.addEventListener('open', function (event) {
- K5 G; E# [. u, `9 e, D. w0 q
// socket.send('Hello Server! im websockt');$ u% ^9 N$ w' |+ Z C) i+ D
});/ x0 W; @$ i D
// Listen for messages
$ ?8 T! A( F! m* i% p# b
socket.addEventListener('message', function (event) {! D/ O9 Z* w( b# X& X7 P: C
console.log('Message from server ', event.data);& J6 F! `9 f$ ?3 w
img.src = event.data;5 B; _& E _" ?- |$ d7 ?' C
});
9 J5 Q0 D; y* c$ N( E0 b+ X; r4 X
: J3 f. d; p; E$ k; t4 v
function playVideo() {
" Q/ E) o5 y4 b) g2 s/ H9 @: d
ctx.drawImage(v, 0, 0, 350, 700);% t7 M9 }, I( }" I
dataUrl = c.toDataURL("image/png");( J" f6 z6 T2 u1 W; T
// img.src = dataUrl;
. k' @. x( G& ?. g! u: I
socket.send(dataUrl);
0 n. v" z, x1 U6 e# _" P
}/ n" r" p; B" q2 e$ @
var tick;! h$ @4 \9 M7 ^5 @) n) k' v" z
function aphla() {
) ]9 r0 m$ c) R6 i/ ~
tick = setInterval(function () {% ]$ b0 D3 g9 V# ^" G
playVideo();8 D, Q6 L3 Y2 j: w; `6 |
}, 1);
, i) t1 ~; q0 H( [4 P2 C. g& i
}& k1 l1 {( ~5 A A) s/ d3 B
function vdStop() {
( ~1 D% K- n8 S+ e% |
clearInterval(tick);
8 j1 f8 J) D: c
}
8 g; I4 L4 p! l; t, `

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");- W5 P3 c- {- C
const socket = new WebSocket("ws://lm.com:9502");
' Z3 v% T1 X6 O" U# X! T% V* i, B
//, q& p Q" v0 P7 M5 @
socket.addEventListener('open',function(){0 i' o5 G k; a2 C& L
socket.send('Hello Server! Im live.html');) o" L( k" G. ^' U" n
});
& O: `6 L; N l8 G
// Listen for messages
W8 w1 V. X3 l9 ^' P
socket.addEventListener('message', function (event) {
+ ^9 R4 y7 q1 @4 `& B8 D9 r
//图片地址
# C. N! {- ~! X* Y% e9 f* e
img.src = event.data;
9 u: O2 h' X* H+ K' p0 z
});
7 ^$ U' K0 W' X1 G' r) f

复制代码

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

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

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

浏览过的版块