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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); + t! j& \9 g, d
//创建socket服务$ c& f- |4 e. A
$ws = new swoole_websocket_server("0.0.0.0", 9502);
1 }# B5 m4 H6 R9 M6 ~
//监听WebSocket连接打开事件
4 ?+ F) Y0 B' M. Q. w
$ws->on('open', function ($ws, $request) {, ~% J- k) U' U, S, h$ c& ?
var_dump($request->fd, $request->get, $request->server);
+ u8 Q2 n" f7 E
$ws->push($request->fd, "hello, welcome\n");
5 ^ b9 p' T5 H; B1 A
});
" ?4 a1 {5 F; _3 L6 B a' f
/ {% C1 n/ I) [. p3 X
//监听WebSocket消息事件
0 m5 {9 O9 s6 I' C
$ws->on('message', function ($ws, $frame) {0 t& l3 }, F% f( |" q
//推送消息给所有用户
# L( \+ _3 V1 F) }" N, ]: t
foreach($ws->connections as $fd){4 i1 M2 }* W ]9 g- \* m
$ws->push($fd, $frame->data);
- H# g6 X2 ~5 O# h; L
}" }8 |0 L: ~3 a
});
# }- [, H# V- n1 c6 D& J6 B8 l5 y
/ J3 z" d& W3 J9 `! r
//监听WebSocket连接关闭事件( r% P- G/ t4 B
$ws->on('close', function ($ws, $fd) {
! x5 m1 H2 @ b& m, p( Z4 F+ t2 j
echo "client-{$fd} is closed\n";0 V7 }4 L2 t) |! s
});2 y7 m% f( s% v: o3 }
//启动服务/ v5 R$ i2 ^8 u
$ws->start();2 z, s6 M/ \$ S; X: H& j- d

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器5 S5 l0 m8 p1 d: p* N) {
const socket = new WebSocket('ws://lm.com:9502');
6 w \! Y. X1 u+ R" G
//Connection opened# O/ r3 P i1 {- y" o* ~
socket.addEventListener('open', function (event) {3 _) d6 m! K/ z! `" b
//发送消息给服务器# _ _- W7 l7 ` E, ], T/ C
socket.send('Hello Server! im websockt');' h* j n5 h( p W# j
});8 F+ r$ B* p$ O% [
// Listen for messages, \! N& U% W) m3 h) |+ C- o
socket.addEventListener('message', function (event) {
* p9 e# X3 V2 ~# j7 K
//接收服务器返回信息! ] a9 G4 U8 ?7 i
console.log('Message from server ', event.data);
- f# Z5 L# x1 ]+ {. j4 ^
});
" F/ o& y1 P7 ~, a
, M" Z# x2 L+ F- y

复制代码

伪直播主播页面

html

<body> l! s5 [ U9 t- F# g
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
: C9 r3 R7 H1 a3 j" Y" a8 \, X# q
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
% K' E" D) \- F5 o( z
画布3 \+ Y7 X% h( e
</canvas>
3 A; e8 m( ^! x: V2 I5 Z
<img src="" id="videoImage" width="350" height="700">
* m+ o1 l4 P' w: }
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
7 E1 R; E3 x8 o) B' A4 e
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>3 o9 t1 G9 k2 }$ K& J, c3 E: n
</body>
_( l3 t# S" m! K

复制代码

javascript

var v = document.getElementById("myVideo");6 j8 z0 }3 h: D; g; D6 ?6 O2 G
var c = document.getElementById("myCanvas"); w! s3 r7 w* A1 k8 G7 O
// var c = document.createElement("canvas");* T1 F+ u4 q- T) o! [; Y' i
var img = document.getElementById("videoImage");7 ^, |) ]4 @' l! R
ctx = c.getContext('2d');
3 K4 }1 V- T" z7 ? \
var dataUrl;
7 M! p( C4 m; J) v: O _+ P
const socket = new WebSocket('ws://xxxx.com:9502');! A. B& i$ |& O% u* X5 W4 i
//Connection opened
6 ?, h7 `3 v0 o- @: x- @0 N
socket.addEventListener('open', function (event) {
4 [7 i% L$ L7 U: a5 m: y4 Y
// socket.send('Hello Server! im websockt');- A, B7 o' F& z! G& J6 A7 M
});
1 Q& Z) }. R+ H
// Listen for messages, {2 k2 O& i4 N" b
socket.addEventListener('message', function (event) {' c- ]& r7 G2 T! H5 o
console.log('Message from server ', event.data); P/ l; E8 [; n7 i4 `9 K4 P+ A* g$ V/ F
img.src = event.data;
% Z" H7 w' Z* _: M6 F( A% u
});
# c; `4 B: }0 D! r1 X, H9 M# [' I" g
! {% q3 K9 G: j4 E4 Q2 u
function playVideo() {' S1 G b8 Z: I9 y* D3 h
ctx.drawImage(v, 0, 0, 350, 700);! ^4 |) q' k2 c) G
dataUrl = c.toDataURL("image/png");; L1 ~3 _: ?( e/ K
// img.src = dataUrl;' K; e# j9 p$ d% z; J6 b- c
socket.send(dataUrl);+ a6 i: W& n7 W/ D
}
4 _$ s8 a' r1 _% B4 O
var tick;: h/ {" K0 u: M8 N9 t( L7 F
function aphla() {
, d* r% n7 h1 R0 G" D; h8 V
tick = setInterval(function () {; h: z" r5 p) o _$ e
playVideo();3 K6 b8 P, A9 I
}, 1);
3 `# x, ^5 {$ g# P, \6 v
}
) J; L0 ^+ ?) F1 {
function vdStop() {7 \, ^# p5 [0 a+ ]
clearInterval(tick);
3 s( }/ T/ ]3 t0 h; u7 [' A; q0 f, G
}% Q4 I# L$ G$ r" F+ C3 m5 F, C( X: r

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");2 B( `; z* B: m0 ~" M
const socket = new WebSocket("ws://lm.com:9502");; v; M8 w# A1 K9 d& p7 h( w
//
5 F+ T$ D1 t! l- s; w6 ?0 F
socket.addEventListener('open',function(){" m2 D, n) x7 R$ S* [
socket.send('Hello Server! Im live.html');4 E* }/ x5 {2 a) n, f& u' \
});' y; o3 W, w: p; x" k% J
// Listen for messages
/ I9 E, a" |6 r i# C e N
socket.addEventListener('message', function (event) {
- s& F' _, X6 d3 T+ L3 K
//图片地址& T1 @$ @) N6 _' h
img.src = event.data;& F2 r0 L9 P' s- k6 E
});
1 A; {7 ~* b" ?9 {9 }( u0 _

复制代码

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

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

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