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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); . c% E. ^1 E3 l5 ?/ R
//创建socket服务
- H; `. w" p' g* v3 H9 k( r, U0 [
$ws = new swoole_websocket_server("0.0.0.0", 9502); ?8 j/ I) d8 u, N
//监听WebSocket连接打开事件& g8 X {4 B9 u$ J) O
$ws->on('open', function ($ws, $request) {
5 ^' _% g% `6 I7 _. h: N' c( b, w% q
var_dump($request->fd, $request->get, $request->server);/ P3 s# V% P" K M/ a+ g
$ws->push($request->fd, "hello, welcome\n");9 C m2 ?9 u# v5 K+ w* q' m
});4 T0 e' b3 R7 r
, U" j! A$ p) ]) m
//监听WebSocket消息事件
8 N" Z/ A! f4 i% J/ @( W
$ws->on('message', function ($ws, $frame) {4 w. J9 D) e' o' k; q8 c( _2 f
//推送消息给所有用户. E1 d1 ?( T9 F1 G9 T
foreach($ws->connections as $fd){# m$ l5 x$ W& i/ U$ P
$ws->push($fd, $frame->data);* R' f) r# x& L: a' d2 S# R7 y
}1 \$ b2 R% D8 V6 f
});7 E, k+ k9 _9 Q3 h+ f$ }
( z8 P& B* a" v% |
//监听WebSocket连接关闭事件1 L7 W$ n6 m1 o" o, G
$ws->on('close', function ($ws, $fd) {0 ]# k7 H# i8 H5 H ?$ I! H, h
echo "client-{$fd} is closed\n";# ?9 K* ]( r( ^' W6 N/ K$ a+ m
});
$ G4 P7 a4 V3 {2 B+ ~1 x7 `$ D
//启动服务
9 D5 M& N: @7 x7 \) u+ D
$ws->start();
7 D5 q+ W7 k# j) X( _" b/ x; p
) Y: J$ Q+ H0 n2 T

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器- `7 k) [/ E9 R% _ _5 Y$ P
const socket = new WebSocket('ws://lm.com:9502');0 Y% n8 C" C/ L. j4 n) b
//Connection opened
; @0 o* ~" u, Y5 x$ M* r
socket.addEventListener('open', function (event) {- m6 w5 `& j! Z% v7 K
//发送消息给服务器
% N4 f1 j- |7 S$ |
socket.send('Hello Server! im websockt');
( Y: ]; ?$ R N$ c) C s
});
& O$ p+ H# H3 Z/ D# f
// Listen for messages
7 h2 H( Z9 u8 m% q+ o3 I* o
socket.addEventListener('message', function (event) {
* ]* V' M7 l6 B C; s; R3 ]
//接收服务器返回信息
/ Q8 {: u% Q8 Q4 t. q, e/ _
console.log('Message from server ', event.data);
* F: _1 i8 z3 X0 _' t
});0 \# [7 }2 F+ S" `/ a# D* d
& w3 m |/ l9 W# X8 s3 w; f3 C2 I; I8 a+ O

复制代码

伪直播主播页面

html

<body>
7 Z% H' Y! F) A9 E g+ J M
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>' ?2 n0 H/ p" |: Z# i
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
0 g( p3 U( h( N% X$ z" t1 I3 \4 S
画布' V! [1 N* k; b0 V8 `0 E
</canvas>
! N! q; J1 |& X
<img src="" id="videoImage" width="350" height="700">
: \% l2 V ?2 r2 `
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>; G8 y* C2 i Z1 r1 Q
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
4 g7 k8 F* P3 L$ M- D$ |' ]
</body>
8 {, `' t7 r5 p; n7 X6 X8 r# M

复制代码

javascript

var v = document.getElementById("myVideo");
; k9 ]) W1 u6 z% _* b: N
var c = document.getElementById("myCanvas");
: B! ~! ^) f8 P. a
// var c = document.createElement("canvas");/ J9 j9 X- A: A# Z; U: D1 W
var img = document.getElementById("videoImage");
6 w5 S) x: u: T: W$ X+ _, M
ctx = c.getContext('2d');/ {3 L% Z e% j& j4 n9 [+ Z) K9 x# h
var dataUrl;
8 z9 h! V a. k$ J/ s, n
const socket = new WebSocket('ws://xxxx.com:9502');' t9 g$ }8 ]( A
//Connection opened6 W0 _0 m- j# p. ^6 B
socket.addEventListener('open', function (event) {
& ]1 T {4 m; N, \3 G8 O: c
// socket.send('Hello Server! im websockt');
3 J, r8 W6 h5 j( u( M3 J- r0 O$ x
});
( ` L4 E; K4 P e+ B0 c( y* n
// Listen for messages# ]* h" L, `% V! |- r1 `' X( \* s0 T
socket.addEventListener('message', function (event) {9 u9 _6 F2 {/ t% s* @4 n, k
console.log('Message from server ', event.data);
: ?. \( k; U# b3 d
img.src = event.data;3 L6 v+ r; B' d" z0 D: b( c, t
});
* v# i Y0 j4 |( r' w3 n$ s2 z
8 ]& e( ^! x0 I B \
function playVideo() {! M! |/ E U) x
ctx.drawImage(v, 0, 0, 350, 700);, Z, o' M1 W) M: R1 w* o+ P; o+ I
dataUrl = c.toDataURL("image/png");
e" I2 C# Q/ D# a o
// img.src = dataUrl;3 Q( K8 J) y9 y
socket.send(dataUrl);
2 ]$ ]0 a6 ~7 l5 L3 h* D
}/ |/ I2 O8 a, f
var tick;4 J" |# v, `1 d6 r
function aphla() {
7 W; x/ M0 s$ ?: G- ?" C, g" T
tick = setInterval(function () { W" z# Z( J* J$ b C+ _4 g' j
playVideo();
' P% S0 K+ g6 t" z7 a+ h5 S. i7 y
}, 1);
( B0 ^1 L4 K) K% g; {. L% E
}$ X8 V: _! J" j' D
function vdStop() {* d/ S. m+ s( V0 j
clearInterval(tick);5 K9 R! @9 i- W) `7 i
}6 v) J7 k$ ]0 }+ S/ n |

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
% F: A2 G" o) }8 W: @) O
const socket = new WebSocket("ws://lm.com:9502");
! B" I9 y; `6 H
//# X3 N5 O1 ^, S' I
socket.addEventListener('open',function(){
4 l e# b2 `9 a( j8 F
socket.send('Hello Server! Im live.html');
1 E w" l2 m q* J
});
8 c t( v2 B' V3 T) Q/ z
// Listen for messages. _, M; C) D7 O4 n" }' \; A
socket.addEventListener('message', function (event) {
9 C7 J0 v8 m, c5 M6 ~5 D
//图片地址
( @) @! V5 g# K3 `6 e/ n
img.src = event.data;
: h7 J0 W% @' N; M, ^9 ]
});
/ o: h" U! C, f+ |! m( R

复制代码

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

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

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