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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
J7 ~2 n4 y; O: c" ?8 |$ Q3 C
//创建socket服务
2 h! Y$ p k$ x. j. v3 a* u
$ws = new swoole_websocket_server("0.0.0.0", 9502);
9 u% S9 M0 P# x: @# Q" i
//监听WebSocket连接打开事件
5 Q, n$ ^: s/ C
$ws->on('open', function ($ws, $request) {
7 m) @* S5 W4 ]
var_dump($request->fd, $request->get, $request->server); r& Z% ^$ N! `
$ws->push($request->fd, "hello, welcome\n");
. n' l0 e% ?" k7 q+ K
});
9 ?, q; A$ `% ^8 }( k
+ x0 v" h$ D y2 S( v) G
//监听WebSocket消息事件/ Z1 H) L0 C( f8 J3 M0 v
$ws->on('message', function ($ws, $frame) {
1 j+ u, A9 z5 v v5 ?% N
//推送消息给所有用户2 ?: O& [6 G1 M/ g1 _" q: d/ H" o
foreach($ws->connections as $fd){& R, ?5 J' V/ R: Q1 b1 [, F
$ws->push($fd, $frame->data);* l/ c( c0 D+ I) o" ~3 g: w
}4 ]3 i# }$ n; e
});
* B' e. O* ?" n' e! d
" x& Y9 m' Y4 j: u) q& Y& q! g
//监听WebSocket连接关闭事件# X8 N6 W. Q% ~3 Y0 l
$ws->on('close', function ($ws, $fd) {
3 x( p* y& {8 t+ C1 Y) K& S
echo "client-{$fd} is closed\n";2 Q9 Y4 O8 j& {7 L& r
});
1 v& T' q3 i! y5 k. C# p; \+ S
//启动服务 V: D+ P8 [' D0 J E9 r _: e
$ws->start();
1 V$ h# P5 E! {
6 M: g2 W1 S; q

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器) L+ K( G2 k- E0 M/ k. x z
const socket = new WebSocket('ws://lm.com:9502');& @( t0 M+ `7 W7 ~ k' r+ M
//Connection opened
% ?& n& D6 t z$ N
socket.addEventListener('open', function (event) {) B# Z; ^1 I8 @, i9 i
//发送消息给服务器+ J$ A: H1 ^9 c, z+ N1 l
socket.send('Hello Server! im websockt');
( F/ v5 J+ Y9 n& F0 P/ P3 n
});9 {, A2 G2 w$ [7 z, @$ m Q. l
// Listen for messages
. a5 d2 b: g: V# v% B/ i0 n6 l
socket.addEventListener('message', function (event) {
. F4 t$ F# X; V- Y& o0 S
//接收服务器返回信息3 [6 Y8 c! g2 [: l# M
console.log('Message from server ', event.data);0 y4 X4 i, n3 T/ o/ s' g# [6 b) F
});+ [5 i% `& N; O% W" o
. M. ^9 ?) o4 b

复制代码

伪直播主播页面

html

<body>& s8 E7 t& M0 ]8 C
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
: e3 x6 ^8 Q) E4 T7 K
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">! g9 U. k- C) o. a; i
画布
1 k F& g1 n' B7 [
</canvas>8 c* P) X3 e; Z' D# Y; r( m4 t2 D" K
<img src="" id="videoImage" width="350" height="700">
# I+ X* |4 o; e; U
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>3 s0 }8 P3 s$ B3 Y2 \6 }- I! J% |
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>) }3 |* m. o+ l7 ^
</body>. q4 v! C+ {# ?

复制代码

javascript

var v = document.getElementById("myVideo");
|# u# M3 q/ ?* i- _
var c = document.getElementById("myCanvas");
) [/ h! Z1 |6 T1 [" P6 M
// var c = document.createElement("canvas");- N3 o0 j& i5 N
var img = document.getElementById("videoImage");3 E# _: t4 B7 Q- R) f4 a7 p
ctx = c.getContext('2d');$ A: A$ o. G8 Z2 O( `0 w
var dataUrl;% J0 C8 b) y3 m; k
const socket = new WebSocket('ws://xxxx.com:9502');/ i! F& b8 x2 p) C
//Connection opened
: \' X1 k0 r; s% ]# ]) |
socket.addEventListener('open', function (event) {1 t/ O& N3 P/ Q
// socket.send('Hello Server! im websockt');
% J* c1 n9 b% B) P u2 {
});6 |% `# h) v4 w3 N4 F* h$ o' }
// Listen for messages
0 g0 ~, X* h0 o8 Z/ U8 r9 ?2 n, p
socket.addEventListener('message', function (event) {
0 t. N2 \; t, S* b$ h5 p D
console.log('Message from server ', event.data);
$ F, x8 ]" c$ c. K! a8 b$ y
img.src = event.data;
/ j: L2 c, |8 m( G9 J. I
});
4 ^! X6 v* p4 i
! ]6 l! H: E5 P5 L; w% h
function playVideo() {
6 a6 }9 W9 e! g4 f
ctx.drawImage(v, 0, 0, 350, 700);& e$ E/ l; \: l) @5 y- Z/ N% R9 f
dataUrl = c.toDataURL("image/png");
; V( f- G D1 r# i/ V
// img.src = dataUrl;8 a- U' X! L# u9 a1 n/ v( ]0 T, {
socket.send(dataUrl);
/ p6 v8 t0 t9 F6 T
}8 {0 x+ A6 r o6 ^- j b
var tick;0 L! x& `; V% a$ g2 b3 R' {$ P5 j
function aphla() {
/ Q9 g% d) d. r/ I' z
tick = setInterval(function () {7 B2 E; g/ {3 x) ]) E% f
playVideo();
# s* R" ]9 E# g
}, 1);
3 L0 d, v5 y# e D, c2 k( x
}
5 w8 x( n+ ?2 ^) j' u+ M
function vdStop() {
9 H& _9 m; d$ O' Y
clearInterval(tick);1 O- i3 m$ X2 d# ?' s# R6 d$ R
}7 A# W; _% I* Z8 s, h

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");5 F; l' Z: ^/ }
const socket = new WebSocket("ws://lm.com:9502");
+ R! {4 m" `/ `6 |% M. a) \+ ?" n
//
. T8 e2 V- N& O; { G" K
socket.addEventListener('open',function(){
5 H9 J( `0 f0 v- l
socket.send('Hello Server! Im live.html');
4 s& y! w# w0 i7 p) l0 m
});! _8 }( l" J. o: _( d0 Y6 G1 v: Z
// Listen for messages
2 X; u p/ _- }8 W
socket.addEventListener('message', function (event) {
% @1 z# L0 d; V+ }
//图片地址5 m' ~0 y! C' S5 p( w7 z5 K- v
img.src = event.data;
4 o9 O* B" \6 @, t0 @# e
});
0 Y% Y8 e T- \( @

复制代码

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

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

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

浏览过的版块