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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 1 r5 z7 p, t& W8 ?6 a
//创建socket服务
+ r/ l: ^5 M! `2 J% w0 L# e4 X
$ws = new swoole_websocket_server("0.0.0.0", 9502);: p! M2 q" R) ?4 U+ \
//监听WebSocket连接打开事件
D, }7 S) p$ E1 o5 F& x
$ws->on('open', function ($ws, $request) {
. R: o5 s) D* }$ k: m
var_dump($request->fd, $request->get, $request->server);$ `) D2 B% p* W% h# V' Z+ S6 f Q2 C
$ws->push($request->fd, "hello, welcome\n");. p% C: P( g9 ]0 Y
});
' R4 F3 I b/ }1 x$ w6 }! _' O
% t8 `4 [$ S# Q0 \1 V' I8 T: n& @
//监听WebSocket消息事件
5 R9 j) X5 a, W7 }0 @
$ws->on('message', function ($ws, $frame) {
) L6 a$ i; \. Z8 _) X$ u$ ~# |
//推送消息给所有用户
: w7 {% b9 D* t0 y, w
foreach($ws->connections as $fd){* v' L$ G4 {2 }) t9 J7 j! w& j
$ws->push($fd, $frame->data);0 L0 i" J ]% y i
}
! @6 ~/ V! o( a: C! P
});
: c* z4 S; _: i) P. h
" K& b1 d4 w" m5 N( z
//监听WebSocket连接关闭事件
' N( ~8 N; u3 Y+ a% R
$ws->on('close', function ($ws, $fd) {9 B* j4 l' @/ a* }9 J
echo "client-{$fd} is closed\n";
) J. ?4 L! M. s. w; N$ `5 V0 ]
});, _, A8 w! T2 n7 F
//启动服务) K$ `' ]3 [) |5 ^. s) k
$ws->start();
( ^( [; H/ `1 e7 j
* q, _4 D5 K: N H$ @: K) b0 t

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器# {. u& a5 c' Y
const socket = new WebSocket('ws://lm.com:9502');
3 _+ p u* R) A% h, s% j, C
//Connection opened# z. |1 K9 R7 {4 s
socket.addEventListener('open', function (event) {
2 K7 j3 B0 m! I9 D; ?9 q# s( n8 ?
//发送消息给服务器
% w; K4 |& d F6 M6 S4 s0 T
socket.send('Hello Server! im websockt');
3 l4 h/ u: [: {. G
});% Z4 j* B0 o* Z8 a+ q- b7 @
// Listen for messages
" @$ M0 s7 D1 H h& |
socket.addEventListener('message', function (event) {
- n3 r# w( t' C1 M( ^
//接收服务器返回信息
" Q1 T3 Y0 y! v" f6 q* S9 m6 b
console.log('Message from server ', event.data);/ p" e: }, `) T( V: w' d8 M7 g/ u
});. `, f3 I3 v+ f3 ]6 D
( C- [% |- ]# i) {

复制代码

伪直播主播页面

html

<body>
+ \1 X# i, u, i7 ]: i1 G& Y |4 |$ ~
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
( \7 c" N$ @ Z* l6 X8 ~2 ^
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
' _0 k \( _. T$ [1 J! K( z
画布
+ E; \5 e" J( |3 v
</canvas>
9 ^' h( d& ]6 I7 r
<img src="" id="videoImage" width="350" height="700">
! _6 j& N! j0 T9 B& l
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>- N( j( q0 {5 ~# @ x% u
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>8 ]" j* ]8 @/ c& K- k; F
</body>

复制代码

javascript

var v = document.getElementById("myVideo");0 J7 P% {4 C% D2 U! b6 P
var c = document.getElementById("myCanvas");, W O2 |; Y) S7 ^
// var c = document.createElement("canvas");
( Q& ~. J, m q7 h' N
var img = document.getElementById("videoImage");
% P7 v, x6 J2 [6 v& ?& Q$ p
ctx = c.getContext('2d');& E. v5 Z+ V7 K6 z8 M' [
var dataUrl;
; Q# N& Q2 A& i$ E0 P9 }
const socket = new WebSocket('ws://xxxx.com:9502');
2 a7 [3 G9 ~8 s$ U2 [1 C* `1 R
//Connection opened, l8 m# i, O* X7 e
socket.addEventListener('open', function (event) {
* h& D1 i& M) i7 a
// socket.send('Hello Server! im websockt');/ i4 c3 v8 z/ Z4 [# D2 d1 e; I) A! y
});
, d2 C) K; ]: ~) k8 z
// Listen for messages& }7 r6 m1 E" Z& e( r9 o
socket.addEventListener('message', function (event) {
* g h7 g' t( W
console.log('Message from server ', event.data);
1 q- ?; k8 P2 b! \1 c* L* n! Y4 H
img.src = event.data;: l# G2 L' }4 G
});
: r! O7 {3 e* J1 i: C/ D1 W
6 R1 ^1 {: ?9 e2 p* n
function playVideo() {, R- R+ x- B8 B! _% f* q8 I: i
ctx.drawImage(v, 0, 0, 350, 700);
2 M: P4 A7 w! t) ~, S4 F
dataUrl = c.toDataURL("image/png");- E( b: e" p+ y4 I" K5 j/ ^. r
// img.src = dataUrl;
7 C9 @0 [ U \2 x, j2 @5 `
socket.send(dataUrl);. I1 d" J7 ?5 g6 H! G
}
% P. v4 P" Q3 D& P% \$ \
var tick;! `2 W. `. _3 J, ~* `% I
function aphla() {4 w+ Y6 ~, W! {6 V$ E7 T
tick = setInterval(function () {# n3 Q. D2 j; E- g0 t
playVideo();) K- ^$ }. e# X! U5 w2 v# q5 r
}, 1);1 P+ A/ M a/ H5 K
}
/ H6 t* p; i$ S* _
function vdStop() {' B- a" a Z. ^& s+ b- X- `6 S
clearInterval(tick);
- Q& G9 m& S$ @- u2 V( R, t! ?
}
/ o5 n6 ?: ?: p2 L d: Q% [0 O; v

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
: D2 q$ B1 C& S4 h; o% x
const socket = new WebSocket("ws://lm.com:9502");9 {- K, \+ q* j8 ~6 a" y
//% m7 J1 G7 L( A- b* ?% r0 m& H
socket.addEventListener('open',function(){
( b9 O* ]: i2 i# W
socket.send('Hello Server! Im live.html');
* ~4 A' C0 N& S, W( M3 C r
});: E4 |% ]1 ?- C y9 Z9 @
// Listen for messages8 E( R3 a' Q) G) `' m
socket.addEventListener('message', function (event) {. R9 o$ c* O$ J
//图片地址
# B( N; J1 l& n3 d: a! w7 {' z
img.src = event.data;) t( p; m* ^4 t9 U n! Z
});
+ s* A% L3 o6 _

复制代码

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

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

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