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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
7 Q( b E0 [# j8 `; s3 l$ f8 O" ^
//创建socket服务' ?) t% `* G6 D" `6 K' `4 r2 |
$ws = new swoole_websocket_server("0.0.0.0", 9502);
% c: Z) P! Z' D' @! ^& ^7 w9 C
//监听WebSocket连接打开事件1 z! @! X& @+ V& r
$ws->on('open', function ($ws, $request) {& K# O2 w0 u T" ]
var_dump($request->fd, $request->get, $request->server);' X/ _2 M2 F4 j5 w1 S$ w
$ws->push($request->fd, "hello, welcome\n");* i7 a0 C8 N/ H$ f7 c3 G
});5 w8 b/ u! I$ q8 `5 B
5 b5 P9 B, e* z& @
//监听WebSocket消息事件) b4 b0 ?. h; R. v2 w* X6 x& q
$ws->on('message', function ($ws, $frame) {
: H$ `: H- o. q9 o2 s2 c
//推送消息给所有用户6 a4 [" Y4 [% K9 @2 p: d8 W) Y
foreach($ws->connections as $fd){
# i3 g0 h' Q7 w- c0 |8 n# a
$ws->push($fd, $frame->data);$ e' }1 A1 Q: E
}! j' I3 r5 r% G& W, n1 O
});
+ \/ p' e. J( q1 n0 _; @
9 ~$ I/ J# B) O: B2 d r) x
//监听WebSocket连接关闭事件
" k }' P, c* k
$ws->on('close', function ($ws, $fd) {- c# \: F# s- i. ^+ |- w9 `
echo "client-{$fd} is closed\n";
) [. E% S g: y3 f# A& W& v5 A
});
# b# j7 X7 K& H7 W* v8 Q. O
//启动服务( k* I7 b2 q/ j5 B# |5 X
$ws->start();
+ K& [2 n- j8 H: a6 G% j( V
7 i% Q- D; R8 d. s( Q

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
5 s4 G/ P& e t: ~
const socket = new WebSocket('ws://lm.com:9502');
I0 y4 ~' J3 }$ p4 r, ~
//Connection opened! s. z( k. q( c2 n
socket.addEventListener('open', function (event) {4 U- r% s1 w/ N/ ^5 N5 N
//发送消息给服务器
8 l' R) H- V- i( }) i% ?
socket.send('Hello Server! im websockt');
( N. n7 W9 P* s) G$ O5 x
});
) n; b7 c0 } d2 W* j
// Listen for messages
2 H: C/ v- c4 W# p5 R
socket.addEventListener('message', function (event) {" q, `# R. F' ]. V
//接收服务器返回信息
6 `7 }5 Q7 p; p
console.log('Message from server ', event.data);
2 m6 W0 O1 r7 X) }0 ^ c
});
; m* w( m5 n$ _, ^- ?
, k% [3 Z; Y! P p

复制代码

伪直播主播页面

html

<body>" W1 c+ c& \+ K* h+ U- J
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
5 o9 K/ P" I8 b1 [: f9 Z% b; S! A
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">- W( M8 R" r5 z
画布
0 v) ^: B# ^% \, h8 U
</canvas>
9 P/ ?6 o& D( ^' Z7 Q1 A
<img src="" id="videoImage" width="350" height="700">
W( [1 I+ J1 {: b" q z
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>3 X2 @- M" z; @
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>/ ?+ l6 b7 l8 x: e
</body>7 f- [; f& ^& f! Z7 Q) _

复制代码

javascript

var v = document.getElementById("myVideo");' o0 v" H1 T5 N8 V, A9 b, q3 n6 d
var c = document.getElementById("myCanvas");& z4 H+ O# N4 v& [
// var c = document.createElement("canvas");
8 k, U; X" n$ r+ A# F& |$ @ _' r
var img = document.getElementById("videoImage");' e/ x+ F( S) {5 u8 c* p2 d
ctx = c.getContext('2d');% O& u& o! _5 U2 e- |) G; Q
var dataUrl;# E" X# y ~5 S# z+ O: o( N( n3 c
const socket = new WebSocket('ws://xxxx.com:9502');
. x7 y% {- D8 G; F E& _% l
//Connection opened6 r& j9 E6 c& g/ X, l! Q
socket.addEventListener('open', function (event) {, @4 K" e$ }$ B! W( H1 g
// socket.send('Hello Server! im websockt');
( ~1 k. V, D! M' G l
});
h. m7 n3 j0 P# }- v) x
// Listen for messages1 z2 v" J- D- {& v5 [% j9 v3 `( o6 u* ]
socket.addEventListener('message', function (event) {
" x9 t0 I; S& I8 m) ^1 g, ~% l
console.log('Message from server ', event.data);8 f" F2 t' C8 S+ f
img.src = event.data;% C$ W/ @+ @" k6 ^
});
) [( U: L/ h) Z6 G! `/ \* t6 Y( I# A
5 F; n; i" O: c( j1 h0 t* |( \
function playVideo() {
. t; g, ?; r" o) T0 l
ctx.drawImage(v, 0, 0, 350, 700);* x4 T' {* Q4 a; r' u/ F
dataUrl = c.toDataURL("image/png");9 o0 i6 }; x3 _/ w3 T. [
// img.src = dataUrl;6 o+ _% ^- O2 C; T: Q2 S% E
socket.send(dataUrl);- C1 L ]) A9 q' V$ s/ p4 ~
}
# K) w* B4 a, K
var tick;# G1 p ` Z |2 Y2 F7 w. f
function aphla() {2 e1 n0 v2 Z" c, F2 ]6 u9 u
tick = setInterval(function () {
( g$ d: J2 n' {3 g4 d: V! O
playVideo();" E; d1 P5 C- s) F+ Z
}, 1);
4 K' n* c. \) e' |
}# B- m( A& F, z% D# L; y6 r4 B
function vdStop() {
% O* d' s/ M+ V9 u' S2 p3 |0 G
clearInterval(tick);- Q" U, q2 H/ u+ Q; b
}: m4 J' t0 O$ J6 ^

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");, }7 o; J; f$ c, n- a
const socket = new WebSocket("ws://lm.com:9502");/ i) k* k9 I8 W- }& }
//
( N" s8 e" z& x& z0 b; q+ [, l
socket.addEventListener('open',function(){
( |4 e# \# B ?1 P; \
socket.send('Hello Server! Im live.html');
. u/ c0 `0 Y G$ z. ]
});
1 ]9 a4 x* T. w/ m' t/ }
// Listen for messages
5 @2 w7 B: ~. w: q7 T1 ~& B
socket.addEventListener('message', function (event) {0 U8 V+ e/ I; t; l( m4 k7 [
//图片地址
* o6 g& Z. l! e: H8 w5 L
img.src = event.data;
' o s5 ~/ r: W2 M
});
$ a, ^6 I' E* Z2 K! @3 j% R

复制代码

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

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

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

浏览过的版块