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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
0 j! L: D& s% | z' R
//创建socket服务
; [# Z% V* i) ?& B/ t. O |( S
$ws = new swoole_websocket_server("0.0.0.0", 9502);7 s' g/ l' [) _5 H: A
//监听WebSocket连接打开事件
5 N" B# K4 o5 `* P) t- S
$ws->on('open', function ($ws, $request) {" K$ P6 F0 C1 f! g* F% ~/ R
var_dump($request->fd, $request->get, $request->server);3 s9 D: n, O* [, u( z
$ws->push($request->fd, "hello, welcome\n"); \2 x8 w6 X( ?' R# d. @
});3 H9 i3 q, I! K
0 N& v [: X; u y% ~& X E
//监听WebSocket消息事件6 v" [. ~. b# X/ U
$ws->on('message', function ($ws, $frame) {
2 ~) D& ~+ K$ t0 P3 C7 [
//推送消息给所有用户& B! Y9 K" E. s# Z# m( D) G
foreach($ws->connections as $fd){+ [$ {+ {+ U1 A- A# X
$ws->push($fd, $frame->data);
( n9 w) N O; w7 q& D7 B! s
}# b1 r% c3 h( K0 t# j7 \' Q! V
});6 c$ d- f! o6 S) b
# P, @. J7 Z2 M% {( p W6 ?
//监听WebSocket连接关闭事件$ H! W: b8 z; ^9 p; Y& w+ ^
$ws->on('close', function ($ws, $fd) {1 x; U2 a0 b( I; k/ [
echo "client-{$fd} is closed\n";
! l) Z4 O: Z* P/ G1 R2 j- o
});4 T5 `# |3 x; x, \# P6 M% B
//启动服务
/ ]8 \# }) P- O! i
$ws->start();7 B( t' v+ u7 W+ ^5 U
% x% \/ d& T, o2 k% _9 K

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器5 T9 M4 E! i$ K. y4 a- S" }, J) n5 C
const socket = new WebSocket('ws://lm.com:9502');
6 ^3 T( `7 j* f8 ]; f" r
//Connection opened
" n ?% m# H" M: e' L7 {" D% B# s
socket.addEventListener('open', function (event) {, p1 [2 {' ~' f/ ~' u Y; l7 Y- y' v
//发送消息给服务器
! C4 ^0 K+ S# | H6 j) p
socket.send('Hello Server! im websockt');
6 ~* |8 K! M. K
});) j) l( r5 a0 E9 ]8 M
// Listen for messages) f5 g4 [* b; S# V5 @
socket.addEventListener('message', function (event) {3 W5 c2 J! J: q- _; r# o5 Y) L( l
//接收服务器返回信息
' ? X( F) }% f8 q' M) ^
console.log('Message from server ', event.data);
$ c0 s; t1 i% K
});
) m" ]/ p, ^) H1 E2 o: k! o
( m" O- t$ C, C

复制代码

伪直播主播页面

html

<body>4 H x% b+ d- R9 n8 V2 O- e
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>" j. ^- c8 e$ J: }: h3 @ X
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
Z9 T% P3 ]6 K0 \
画布/ z: }, C9 G5 D% _9 }; {+ M
</canvas>
8 P0 W! U! p8 R) n! Y
<img src="" id="videoImage" width="350" height="700">
( G. a; k# Q) A/ O
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>0 Y" x( W( x; C8 R
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
. q) |7 d8 U+ Y: |5 {: {1 l G
</body>9 L/ z2 E. p. Y3 V9 i+ W: e& n" x

复制代码

javascript

var v = document.getElementById("myVideo");: m& `4 ~3 T& v, W3 U% I' b7 @
var c = document.getElementById("myCanvas");
- i0 @5 N! `, x6 @( Q
// var c = document.createElement("canvas");
5 V x* G- @1 ?) l9 R
var img = document.getElementById("videoImage");
9 m u" j4 k2 |+ i7 l8 |4 a
ctx = c.getContext('2d');
3 J3 Q% K+ W! X7 D9 m- S
var dataUrl;
3 L' ]/ H' P: W) q; Z
const socket = new WebSocket('ws://xxxx.com:9502');3 R) q/ a! G6 ?- ^3 e0 u" E5 F
//Connection opened
F* D M/ q. X/ R& Y
socket.addEventListener('open', function (event) {
- m. N% f5 z& x% W# D$ U9 ^
// socket.send('Hello Server! im websockt');; S( c5 V7 Z! I- P$ B
});
- |5 M/ ^6 r9 I8 A- w
// Listen for messages
% C2 }* |- B# C( m9 g( m5 O6 R
socket.addEventListener('message', function (event) {
$ }% a) d# _, ^) ?
console.log('Message from server ', event.data);
# R) B% d1 x5 n: X5 e, B0 [# {4 _ U
img.src = event.data;7 V% M/ F, l2 m" d! {5 u" s
});- n6 X( u1 A+ e; o
' W! S7 H4 Y% l0 k' D
function playVideo() {
# c% V" O, k" K4 Q
ctx.drawImage(v, 0, 0, 350, 700); S0 L0 }) X6 x6 j1 E' q1 A
dataUrl = c.toDataURL("image/png");0 o* r, h: G: t' r, |! J
// img.src = dataUrl;8 L% Z3 X+ B0 U6 V
socket.send(dataUrl);
/ W# j* V7 s" b( Z3 h% U! T
}+ m9 |$ q- U# @3 n$ J$ H0 f3 C
var tick;' m, w( q+ M' I+ N7 _/ \
function aphla() {7 k \2 m4 r ^# S" s/ z, L
tick = setInterval(function () {# b3 [& u- I" Z' l A
playVideo();; a5 B' n$ ? @) N4 T
}, 1);
* p! F3 v1 ]8 {0 `
}( ?8 t' e# @7 p
function vdStop() {- w% o' r; {" v1 y T
clearInterval(tick);
d; j5 k! L0 J2 q0 `
}
9 o' m6 Q, a$ m6 N8 \

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");5 C0 ]) W" J9 P( W) Z
const socket = new WebSocket("ws://lm.com:9502");4 M \3 K" i2 x, S( P& M
//
' o7 { z4 l; Q0 y
socket.addEventListener('open',function(){8 s! `* n6 l# D
socket.send('Hello Server! Im live.html');1 |. S3 [% ?* e" F' [
});0 k- {' x; W0 L2 [, [1 C
// Listen for messages
: l2 f) n( g" `. Q
socket.addEventListener('message', function (event) {9 p5 y; A7 m) u' Q
//图片地址* J2 V' M [& L/ C6 H+ {
img.src = event.data;! C4 \# I# M% [1 y8 Y, Y
});
: K, G; A: f0 A; J; Z* `

复制代码

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

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

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

浏览过的版块