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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); ; i9 R* @# f$ a- { p0 l
//创建socket服务
0 I/ e2 G5 O& |0 T4 R
$ws = new swoole_websocket_server("0.0.0.0", 9502);$ t& P6 m: T w8 L1 t
//监听WebSocket连接打开事件
8 M5 l" q/ r7 Z# W% s
$ws->on('open', function ($ws, $request) {! m9 ?" V5 c1 U' `* {" k' k7 q
var_dump($request->fd, $request->get, $request->server);
1 _# T- R+ a5 a
$ws->push($request->fd, "hello, welcome\n");
- w) v" R- `5 x: d" O
});
8 H4 `4 k. w m4 e( Z+ o" ]4 U: R
1 l3 l2 ?: e. @6 P4 D
//监听WebSocket消息事件0 q+ s0 C5 m$ U2 H* g, l) ~3 y$ ~" I
$ws->on('message', function ($ws, $frame) {. ~8 V3 n' ~, g, ?6 I1 C
//推送消息给所有用户+ C7 o# i' M' T
foreach($ws->connections as $fd){
/ i$ U# x& j4 N' j1 a4 k8 R1 N
$ws->push($fd, $frame->data);. C; `% M$ X, H! j- I
}
! D1 ~; o4 Y+ {' L
});5 G. M& _! z) {( e% t
! _4 j9 p2 c0 ~0 O! c
//监听WebSocket连接关闭事件& l- J# t0 V' Y6 {
$ws->on('close', function ($ws, $fd) {4 V5 d8 x3 J' u# V: Y) R3 {
echo "client-{$fd} is closed\n";
& G/ B' h4 _7 _; ]. t
});
( A% V# v- G1 C! a/ g8 g* K( ~
//启动服务
& D0 |/ `( I$ ]2 K- [2 j5 g. t0 \, C. k
$ws->start();2 L) d0 d( f- ]) Y: E" q& t
0 I/ x6 S3 A) X% @% p3 L& k* P1 ]" _

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器6 _3 Y1 ^& d+ m& h
const socket = new WebSocket('ws://lm.com:9502');* O# L* h) l r: a* o/ h
//Connection opened9 u# i h! i; o! s& G
socket.addEventListener('open', function (event) {
. O+ x: h+ @! V
//发送消息给服务器+ R& Q" y+ T' t
socket.send('Hello Server! im websockt');
$ f/ c E& A+ c/ J* d4 J
});$ O) p( D' C) D9 l' J8 G+ k
// Listen for messages
: J E; A$ Q( l% N) P+ \4 F/ {
socket.addEventListener('message', function (event) {6 R' B1 n. T( o
//接收服务器返回信息6 z3 i( E: b: W; K, b! I
console.log('Message from server ', event.data);
});* L7 l2 s7 a% K/ p0 u# i7 `
4 h) J T" K0 o5 b- J" }* ?/ r

复制代码

伪直播主播页面

html

<body>+ L0 }6 {2 ^7 k( ]2 S
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
- \5 f' p& m4 d1 N$ ]
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
2 P2 V5 z! Y2 C: _$ G- j
画布# D8 V2 N1 V4 p5 R
</canvas>
- w/ N1 |! M/ j) Z. W/ v
<img src="" id="videoImage" width="350" height="700">
: v o4 Z4 B! Q- p' q. Q! m
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
2 G0 V" M9 ~& I, g* Q
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
9 [' o* M% T4 F( l3 E* g4 _
</body>/ ]! l3 }& P+ A& O1 T# Q& |

复制代码

javascript

var v = document.getElementById("myVideo");8 t4 G9 y0 @) e, H
var c = document.getElementById("myCanvas");: [+ y( n3 n- s9 ?
// var c = document.createElement("canvas");' y9 V1 t$ P6 q* j* O1 I
var img = document.getElementById("videoImage");
. R0 T0 V* F7 }+ g+ T1 j% K# l
ctx = c.getContext('2d');
& P$ d9 U3 J8 ]# u' c$ b
var dataUrl;
0 G9 C# S4 ^2 X, i b# R
const socket = new WebSocket('ws://xxxx.com:9502');
! L; x+ I# Y3 Y2 j Q7 H& P/ Z
//Connection opened
/ s8 Y" \7 x6 k( E1 T: z, |
socket.addEventListener('open', function (event) {
. g2 m* ?0 u$ @% c) f& ~
// socket.send('Hello Server! im websockt');6 m" ~3 u- [" S
});
// Listen for messages- ]! [6 ~2 f9 J0 I8 q4 k. o
socket.addEventListener('message', function (event) {9 K; P5 f. M0 M1 c, K
console.log('Message from server ', event.data);& |" e1 }' D; C! G9 F
img.src = event.data;7 }: P3 k* g s$ |- R4 r
});1 `! _+ a' K$ y1 q
/ N0 j5 C. I4 b! s/ f* E+ D- L) E
function playVideo() {
- l, ^* K; O* ?) Q9 d1 e) Q( D' Z" ^
ctx.drawImage(v, 0, 0, 350, 700);
* q. r; ~* |, T* S, |9 R
dataUrl = c.toDataURL("image/png");
$ f v, H$ e* j6 r/ X$ a
// img.src = dataUrl;/ R) R5 u i% A/ E# q7 ]& y' ~
socket.send(dataUrl);, |* k3 _2 w4 |% ?6 v2 W6 }4 e& m
}
. `" b8 l0 L* S3 ~
var tick;
H" h7 a6 s2 d1 O: l. T3 g& W
function aphla() {
; @) h6 |4 T) @5 w9 J
tick = setInterval(function () {
9 c# t% c3 o' j- } u# |
playVideo();) ]( T; t6 }1 t @9 Z
}, 1);
% o8 J7 F4 K& s h Z7 [
}6 s% @& l+ ~: E$ {4 z
function vdStop() {* K5 e9 R) z& D( T% ]" L
clearInterval(tick);6 {/ n/ G5 _" _. X. j
}
" Z7 ?. a+ ~- Z) J

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");4 c! ~2 v+ P. ~* u
const socket = new WebSocket("ws://lm.com:9502");
9 {( O, {, C' N9 q" `+ W
//4 [4 F! N, L5 i9 S' l
socket.addEventListener('open',function(){ T H/ p3 `, H N) N
socket.send('Hello Server! Im live.html');* |3 u: G. X# `4 d# i
});% A) b# Z3 k3 | o' X+ c# }
// Listen for messages
3 F5 O. Z! n! O
socket.addEventListener('message', function (event) {6 n5 Z {$ @) X$ x3 w
//图片地址
- J7 Q3 q6 c- ?! q
img.src = event.data;2 W: B& E( k9 I% c1 `$ g3 h
});
; k$ }5 Y f0 w# G3 M8 f

复制代码

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

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

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

浏览过的版块