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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); ' n5 P6 c* q, v I+ M- N, {
//创建socket服务3 \/ }3 A; S0 l
$ws = new swoole_websocket_server("0.0.0.0", 9502);& H$ @3 x" l* x6 W& g( s" \( l+ y7 L3 u
//监听WebSocket连接打开事件
/ q5 p9 H- V: t; V# M* x
$ws->on('open', function ($ws, $request) {5 O0 A9 W+ Y L2 o( Z6 n% \
var_dump($request->fd, $request->get, $request->server);+ L- i% m3 c G0 o- H6 X6 e* p
$ws->push($request->fd, "hello, welcome\n");3 C" W8 |. T; ^( \4 C# E
});4 w( L/ y' C" P. i- K6 q4 I' J
& L1 A4 S3 r+ h, e9 F; ]
//监听WebSocket消息事件1 O! v3 `" x# q0 U
$ws->on('message', function ($ws, $frame) {) _! P& p5 A0 c. U2 k7 Z* X
//推送消息给所有用户
/ t. p8 g0 M. J+ |( _: a1 n2 x6 G7 p: `
foreach($ws->connections as $fd){2 u, m1 R' W3 E1 i& o' [3 D
$ws->push($fd, $frame->data);
, O# Y5 u% j6 P$ J, K6 `0 I
}, T1 r p& C- p. G5 v/ G
});
8 p9 R9 Y: J1 S; n5 H, {: ^) r* A
; T# `) e% B2 J1 q! _& {
//监听WebSocket连接关闭事件
+ ]8 H3 b Z! d+ j" n9 p
$ws->on('close', function ($ws, $fd) {
echo "client-{$fd} is closed\n";
" v! d2 Q/ E m# ^- H, ~! K
});
# z- P# D. I. H! A. l" ?- w' v" x
//启动服务
" a$ H8 J9 H. b3 T! E3 p3 V! d
$ws->start();, Z3 J3 G# A9 h
5 k: a$ ~, c' ]3 W1 I- g% M

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
! [) k2 D7 Q, `% ~
const socket = new WebSocket('ws://lm.com:9502');
$ b: Y5 L' f9 `
//Connection opened% v* H3 E5 K( {; I
socket.addEventListener('open', function (event) {7 ^/ ?/ w' z$ j' q+ ]+ x; O
//发送消息给服务器
# I) {2 U# x6 ~
socket.send('Hello Server! im websockt');* O/ x3 d& K/ o
});4 u* {1 {- u8 g1 P
// Listen for messages8 F3 p/ a/ R" A/ y' r
socket.addEventListener('message', function (event) {
! n6 `1 v- ~7 V) Z) z+ |$ R
//接收服务器返回信息
' W# ?8 _. I* V; D- R
console.log('Message from server ', event.data);
9 }+ I2 n/ H; G5 h5 `
});
8 r4 a1 \; `/ o$ L+ U* D# k

复制代码

伪直播主播页面

html

<body>
" S$ k1 B4 S2 y% r; o) g
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
/ E# ~" Q8 s! S4 J& r" G, [* ~% \
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">, J) H4 z5 m' e( w( ?
画布
1 ], u) q4 T9 s* c, s: G) y
</canvas>/ p2 I+ L6 }! H8 S9 a" P7 ?) q
<img src="" id="videoImage" width="350" height="700">
% e6 T. N# l& h6 T- ~$ r( G
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>$ o! b- f' `8 s
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
& S% ]* k$ Y4 E- W7 m+ E: y
</body>% K: n. p1 A2 a3 ^2 O) e

复制代码

javascript

var v = document.getElementById("myVideo");
: Q( d; K4 n! q7 n7 {
var c = document.getElementById("myCanvas");0 o% n* W( W& E7 B1 C
// var c = document.createElement("canvas");8 e( k; x4 } b; n
var img = document.getElementById("videoImage");2 c, H( _% r j6 y2 t
ctx = c.getContext('2d');7 d5 \7 E0 q% l; \8 _0 F& {9 d9 i7 z: m9 _
var dataUrl;
1 A$ B# p' U# Y+ i7 Z. q# c# t
const socket = new WebSocket('ws://xxxx.com:9502');9 s" `4 i9 t4 Y8 G
//Connection opened3 Y2 o2 ~& N: s& f! Z
socket.addEventListener('open', function (event) {
% k( N! `1 S3 j1 t) U' t0 ]. b
// socket.send('Hello Server! im websockt');
: u! w) B: m% G8 |, f8 P
});7 N7 k/ X- h2 l6 e. r# P3 [4 ~
// Listen for messages3 x! n9 w8 D1 a5 T
socket.addEventListener('message', function (event) {
7 W c0 M @! W3 J, r* A! @
console.log('Message from server ', event.data);
7 A+ x9 m7 u9 L! o/ D3 y
img.src = event.data;
1 t+ F6 J; `/ G* H
});
w8 m3 f# v! E; ~2 v2 P1 |
( J0 k- Z! c3 F; ^" l/ m
function playVideo() {
: H( R: `# @4 X
ctx.drawImage(v, 0, 0, 350, 700);
& H7 Z9 G ]/ O# q) I' h) {! N
dataUrl = c.toDataURL("image/png");
& l" K9 `; u$ q" Z$ v" S. V$ `
// img.src = dataUrl;7 a5 z( A% H2 h! h" k9 J
socket.send(dataUrl);
# V! } g e9 L/ w) u5 e' Y6 k6 v
}
- J L D8 b3 f4 b/ _
var tick;/ G# a: d5 T+ W$ w. g
function aphla() {
+ m( E- p* a5 M* d- q5 d
tick = setInterval(function () {
5 t+ A0 o6 `; u3 S9 T }1 C" h
playVideo();
8 u( n$ E5 K8 \4 |2 _( P
}, 1);; y( I6 d1 f4 `) h% c- J c
}
* [$ g2 A& c u5 f, t* ?
function vdStop() {
3 V* g* W" U# N5 O0 ?6 `
clearInterval(tick);% F- N) c! j) M7 H
}, ^ h* I) \8 I7 F+ `

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");" h, q3 g. A ~5 S+ g& f5 Y! c
const socket = new WebSocket("ws://lm.com:9502");
/ |5 `8 R: J+ k0 ~
//
% P% J5 {! Q2 W, v. o* G
socket.addEventListener('open',function(){9 E! l( B8 q6 D
socket.send('Hello Server! Im live.html');
( u: i8 A9 } l% k: E8 H' z8 H
});
& m) n! x% S7 v2 c9 Z" g
// Listen for messages7 q5 a( |; {4 x* {7 Z0 Y! a6 D
socket.addEventListener('message', function (event) { y2 n5 ]/ k0 Y# ^: V, X8 }0 l# A
//图片地址 S+ _1 C4 v- {. c3 h! P) ]7 a( `! m R
img.src = event.data;0 `! ], E$ Q. d6 n' y
});
# h7 n4 E& W; b4 O: l

复制代码

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

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

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

浏览过的版块