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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 1 f C) m0 ^, c7 B6 S7 ^. S1 Z0 t# ^
//创建socket服务
% x3 R) e7 r" y! ^4 J, s
$ws = new swoole_websocket_server("0.0.0.0", 9502);4 O4 |) d/ N, ]' T" x
//监听WebSocket连接打开事件 h+ m* x3 d- z" R: K" K
$ws->on('open', function ($ws, $request) {7 p. o" G8 x$ ?* g
var_dump($request->fd, $request->get, $request->server);
& s' t$ T6 a% ~8 `% F
$ws->push($request->fd, "hello, welcome\n");
& Y5 W4 h3 P, N) S+ M
});
/ h0 d+ k! p) j* F# E2 B
( @' P4 Z6 p/ ~8 L
//监听WebSocket消息事件7 U% Y$ S, I$ g, F
$ws->on('message', function ($ws, $frame) {
m, A3 y) y& \- r Y0 l$ i# l
//推送消息给所有用户
; Q" n o: L% @. M
foreach($ws->connections as $fd){
# m1 o8 {" A5 S0 Z$ m
$ws->push($fd, $frame->data);
$ Z3 d6 c, S2 \3 s; ]8 a/ v' Y7 g9 J
}
& {2 q. k4 S( t* }/ U; N2 k
});8 B% d; f- D0 r2 q" c' q9 {5 `! H
7 E" n% l; t6 S; H
//监听WebSocket连接关闭事件
9 R- G# F- V* x9 _- J q9 L
$ws->on('close', function ($ws, $fd) {
9 ?) {$ [6 | d0 G5 n
echo "client-{$fd} is closed\n";+ _: l- }* ]- L% Q4 o; z( p
});
1 M5 W$ T% _: K3 s8 ]& D
//启动服务" p, I8 F, Q' S; K7 K
$ws->start();0 l7 A, p& r. j9 y5 _7 |' o; c
5 ~6 n6 N2 g/ U. V

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器( r& x# [9 t/ P( x+ `% F0 d
const socket = new WebSocket('ws://lm.com:9502');
5 k) J4 `9 y# E# O4 V( l
//Connection opened- W* Q y! Z9 _/ `' i7 W/ L9 x
socket.addEventListener('open', function (event) {5 p4 B6 z( c c Q
//发送消息给服务器& j1 ^$ T; T( q- ?# g
socket.send('Hello Server! im websockt');% ^# u4 F7 M% A4 |: I
});7 L; r, w8 V0 X/ o' b
// Listen for messages& F3 A4 M8 _! e, S* H
socket.addEventListener('message', function (event) {
" Z9 X2 f' Z3 H) g% P$ R6 Y
//接收服务器返回信息9 y2 e0 n' L: V: T. Y1 z
console.log('Message from server ', event.data);# n9 n/ U6 A$ g h% Q
});! I, y- ]0 I1 i1 S9 P1 {
+ x o* r. Q$ v( M; E6 h6 F

复制代码

伪直播主播页面

html

<body>7 N) g' G! z5 ]! a: v, o
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video># m$ f1 ?8 f y: r2 Q
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
* g/ f3 S' X# P) d, D2 {4 j% }
画布
3 g( B# {* N2 t8 q y# z
</canvas>! {0 F8 z/ {- [8 W1 n
<img src="" id="videoImage" width="350" height="700">" F5 ~: Q! e) X' @4 z0 u0 H
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
* L9 s, g. e# O _- A
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>- H9 q( E% h4 v# u
</body>
& `! Z, C. C: Z. _& L$ H

复制代码

javascript

var v = document.getElementById("myVideo");: G0 L0 T" t% ^% H9 n9 V
var c = document.getElementById("myCanvas");
8 D( \# q6 N& q: A) E, K
// var c = document.createElement("canvas");
- U% \4 Y( R( d7 f
var img = document.getElementById("videoImage");% F4 b+ m2 p1 k9 }
ctx = c.getContext('2d');! E7 t- r a4 Y# S; x; D1 w
var dataUrl;, n# c* w. q ?3 e1 K
const socket = new WebSocket('ws://xxxx.com:9502');
. p% u) o9 R( Q! I6 V( H2 P1 v
//Connection opened
6 L! O5 t% z3 B2 O1 q2 K3 g
socket.addEventListener('open', function (event) {
5 W: U- @5 i: n% C5 |% j( L+ \
// socket.send('Hello Server! im websockt');; z6 ^) a, B: _/ V# Q. d7 b8 U6 m
});( M l7 @/ p" {0 Z v
// Listen for messages
) p' H* L' t2 V+ Q* p# D) z: Y
socket.addEventListener('message', function (event) {3 d; b5 ^1 p1 _% l/ A H `
console.log('Message from server ', event.data);
6 S! X+ O7 I: L+ V, O
img.src = event.data;8 Y0 t; @( K- p F! ?
});
3 I6 M- X( o! w: U) P [
$ N% k) S6 @* R) S M8 d$ d
function playVideo() {8 [: e5 ]) D. p/ M' o% C3 }7 u
ctx.drawImage(v, 0, 0, 350, 700);) z& e; D/ p* q; {4 y, }: I
dataUrl = c.toDataURL("image/png");
/ K; o7 _8 h/ T. O# a
// img.src = dataUrl;
- F7 z$ y+ C8 U3 Q, U h. c
socket.send(dataUrl);; x r ^4 P0 Q) B E
}
7 P R5 m' C, T( _% k
var tick;
& Y( `0 u) ]" o m+ Y B
function aphla() {8 I4 M0 W% ~4 C, z: S
tick = setInterval(function () {% S( H7 Q9 v; z8 D6 R
playVideo();
+ P; \1 e5 x2 c1 a: M) ]) |. l
}, 1);
4 S5 Q. Z9 J; ~" f4 l8 F
}
% v6 M; I% O5 {( x5 U @
function vdStop() {- V! }2 n" m; I" @
clearInterval(tick);
7 Q1 {% M+ s5 e; {' r1 P
}5 p; z B# Y" `5 N" X

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
# s( x# }0 ]2 ?! C
const socket = new WebSocket("ws://lm.com:9502");( Q( q% M- n' ^. k6 t
//' P5 K% f. ]; p
socket.addEventListener('open',function(){9 i2 M& c' m4 O/ r
socket.send('Hello Server! Im live.html');" ~+ G) D8 I3 ?% [$ D
});8 X6 j9 |( c( C% C& @/ i% J
// Listen for messages
4 y" \. _" L$ X1 T
socket.addEventListener('message', function (event) {( U* E% A( L8 ]1 d) y7 P
//图片地址. _0 X9 I' N) m+ }
img.src = event.data;8 \# [1 X. U! R; d5 ~4 A6 x! z2 [
});
1 F; i* m) O$ _ g- l, _( Y

复制代码

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

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

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

浏览过的版块