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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); ; M; K% `: \& H$ n/ ?
//创建socket服务5 n; p* I: l" D# j
$ws = new swoole_websocket_server("0.0.0.0", 9502);
, r9 \0 g, C" _6 D; _1 k& u8 `9 l( U5 h
//监听WebSocket连接打开事件
: y. \( y9 j; E
$ws->on('open', function ($ws, $request) {
1 M) \6 l4 t& z B. }' ?( a
var_dump($request->fd, $request->get, $request->server);# X! |" q+ p+ k8 v
$ws->push($request->fd, "hello, welcome\n");
# t( y! a; u- K0 z: D
});
9 F) m" r1 l _* Q% s
" D( F# T; w1 G2 _/ y; L( S
//监听WebSocket消息事件
% ^7 v* A) m! f& |0 ]$ E4 n
$ws->on('message', function ($ws, $frame) {
4 f V- R- h, O
//推送消息给所有用户
8 C) r2 w N7 S7 {2 v" |
foreach($ws->connections as $fd){2 _# \: o/ A1 S, V8 d
$ws->push($fd, $frame->data);/ o$ L/ c6 ^: b3 ?- x0 p
}5 W1 a6 C' f9 N6 |- W, {
});
4 _# r* s* i0 }2 m2 F
1 t$ g7 S% F, I1 U1 B$ j+ o7 F
//监听WebSocket连接关闭事件0 e6 [( y2 o, S
$ws->on('close', function ($ws, $fd) {! ~/ R- ^+ a( a) k
echo "client-{$fd} is closed\n";" ~1 a. f) M/ U/ t% b2 c9 m
}); O! C. K2 f0 P" H1 n" s
//启动服务2 U; B0 a1 [ ?% F: F/ z
$ws->start();
- Y4 w' r1 d, [/ g8 [% V6 k+ B" x
5 p, H- k# Y$ N9 ?

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
& m: X9 \' [# e5 ^- a, r3 h
const socket = new WebSocket('ws://lm.com:9502'); @4 l) ~2 }0 u0 v2 F& [
//Connection opened
* P# ]( ]" W3 M& a B$ e. `
socket.addEventListener('open', function (event) {9 O2 @& D+ X4 V* s- E( m4 d" A- _
//发送消息给服务器, } r8 g( @9 Z, P6 I) T+ b2 g
socket.send('Hello Server! im websockt');: `9 z" W7 Y+ S4 R' |# s) _
});
6 b5 k( T) E: ^# J# M$ K6 b6 _
// Listen for messages
% }3 t3 t. Q F F- O' h: L
socket.addEventListener('message', function (event) {
* {" u! |" P: b, k5 S0 H0 v8 p
//接收服务器返回信息) ]9 o5 I8 d+ {; E$ L+ A; ]
console.log('Message from server ', event.data);
+ I' G+ o3 t! y2 m9 j: o
});
% O! Y6 X1 Q, i7 _9 g% d, x; C Z
) B0 |3 p: B- n9 ]$ Z

复制代码

伪直播主播页面

html

<body>2 }6 ^7 s) S2 T$ w$ u
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
" S1 u, X2 x0 q2 n7 G
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">9 Z9 H6 D6 O* b& ^) U
画布
4 _3 i, ` B7 S
</canvas>0 N. {" J9 ^0 m% X$ A5 U1 `: w4 h
<img src="" id="videoImage" width="350" height="700">
. Y3 f/ t. T% P% Z
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>8 ?/ ^/ v* B" g9 ?4 k& @
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
. B, w0 j6 X, H3 V- n
</body>: Z/ y4 r8 U& l

复制代码

javascript

var v = document.getElementById("myVideo");
" u5 \0 [' i. C" x" G1 N) U+ s
var c = document.getElementById("myCanvas");& C, F( m$ E* \# R: P
// var c = document.createElement("canvas");! h R! F/ ~$ L- M" S7 b
var img = document.getElementById("videoImage");
2 x+ o( h+ R n
ctx = c.getContext('2d');
2 G6 A/ c& {6 Q) j
var dataUrl;/ L, G2 s/ y2 c
const socket = new WebSocket('ws://xxxx.com:9502');
$ }6 O0 p! o$ Q6 G5 X$ B+ d
//Connection opened$ j' k2 G5 ^2 K
socket.addEventListener('open', function (event) {% f$ w+ ?# Q, D: J: x
// socket.send('Hello Server! im websockt');8 z0 `$ Q$ o. R
});
: ]1 E/ B: l+ d1 D8 m
// Listen for messages
8 z5 d( ?" q+ @! [* t# `
socket.addEventListener('message', function (event) {
) J$ T9 W' U- X) r \6 c8 h9 \
console.log('Message from server ', event.data);! K1 Y# l8 I% ~+ s' L$ h! ~8 `- R8 v
img.src = event.data;( B% n9 d) i% }2 d9 l1 _; ?9 O# g
});! `4 k, }6 R1 E( o& p7 V
# V+ o {: l& L1 v' q4 J
function playVideo() {1 ^" C- y+ Z$ a5 C+ R; E2 h2 f) S
ctx.drawImage(v, 0, 0, 350, 700);
5 _5 Y8 k% `/ L! T; f5 g
dataUrl = c.toDataURL("image/png");0 E; `" j3 h+ P& M& \- n9 e% A
// img.src = dataUrl;
) g( E4 K. k0 G2 B
socket.send(dataUrl);
7 R; }- p" i h7 `' g3 f5 r3 D4 t
}
% Y; h+ f4 O/ ~& h
var tick;
8 {# l/ S; }% Q) h
function aphla() {
) R) d$ E7 t C
tick = setInterval(function () {
& k4 Y7 _9 V4 I' l( b
playVideo();
+ D. \( H0 a0 M# M9 x5 W
}, 1);
. W# h8 W5 h! m
}: l' [) J- r1 a* {+ N& i; ^
function vdStop() {9 n2 X7 @2 M4 b1 e" A" }2 z
clearInterval(tick);! p' \4 `. F9 K- k3 a* F
}
8 J) J5 S9 [+ m$ I& c' k& e" F

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
' L4 p- @0 s2 X2 k
const socket = new WebSocket("ws://lm.com:9502");
; a" \1 j% V; ?/ l' ]0 |# o3 H& [/ T
//1 w& o$ @, s+ w# v$ ?) `
socket.addEventListener('open',function(){& ~- i8 I% e' q1 S6 R) V2 F3 F
socket.send('Hello Server! Im live.html');; o9 O9 n/ ?6 d: f8 Y c a
});4 @3 ^5 C4 ?3 g6 W9 k3 ?
// Listen for messages# K6 c: J+ Z/ q" G
socket.addEventListener('message', function (event) {% h0 I$ t' i. l- c& g1 c
//图片地址
: Z* b/ R5 h; I! u5 d+ o$ U
img.src = event.data;) b2 k, y2 C" s" p! P
});
6 u- |5 E. p3 k! p

复制代码

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

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

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

浏览过的版块