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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); ! a: Q/ V9 [! R- Q$ `; i
//创建socket服务- t, p, t. `4 t+ ]5 ^; B( W6 {/ k
$ws = new swoole_websocket_server("0.0.0.0", 9502);
# y8 y2 r6 H) Z/ w6 G5 Y, b# k- g
//监听WebSocket连接打开事件# n) x- R8 v7 _
$ws->on('open', function ($ws, $request) {: `$ U" P8 Q8 [ `4 k+ \2 B' h
var_dump($request->fd, $request->get, $request->server); p0 b7 g& V1 F$ p' f5 }' A
$ws->push($request->fd, "hello, welcome\n");
a: L6 Z" h; H9 v0 L
});! t3 p) a# |( U' o3 |3 j
. {2 G, `+ [4 Y% ]- ^0 Z* ~1 Q
//监听WebSocket消息事件
$ws->on('message', function ($ws, $frame) {# s0 t9 a0 p1 U: B% _) ]7 q# |
//推送消息给所有用户
" y# [% @$ | T+ e3 d
foreach($ws->connections as $fd){
( F) x6 J( Y7 q/ r2 _& V
$ws->push($fd, $frame->data);- A4 x5 {9 N, x0 R* ~+ {9 Z
}
5 B+ o @6 a; H3 p) o
});* U# V5 D* o( m% S3 O1 A5 c o
3 ^5 h" \ ], k, R# G
//监听WebSocket连接关闭事件* [8 a' q2 O8 ]+ K( J" N
$ws->on('close', function ($ws, $fd) {' Y& V6 _# F: M1 ?' d, y, \
echo "client-{$fd} is closed\n";
, c4 ]( x0 V/ t5 ?7 [
});
9 Q5 M2 e& }, K' f. m6 d
//启动服务" U$ K: Q+ ?7 y+ T8 p
$ws->start();9 H, _+ y n) Y9 ~; I
- Y: R @" @. \% ? ^8 a# e

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器3 M9 T8 ` V$ o, v, j! I+ B0 {
const socket = new WebSocket('ws://lm.com:9502');
$ D- d* n4 E2 ]- r2 \
//Connection opened+ q; N! M+ ` S6 } N9 D
socket.addEventListener('open', function (event) {
I4 r# z0 L8 Q3 m% J: ]5 ^
//发送消息给服务器5 ] a( L9 S1 k& x2 [" c
socket.send('Hello Server! im websockt');, p% L. b9 d$ |
});6 h3 M! H6 ~! Q* G. z+ t
// Listen for messages
/ \" g( G6 r# U, I8 c. q
socket.addEventListener('message', function (event) {( Q) T/ g4 `4 Z! X8 F1 C( Q
//接收服务器返回信息# J+ N2 ^/ x# ]% W" q
console.log('Message from server ', event.data);
! K$ h+ X2 G% z! }1 b; E
});8 h8 R! l5 t) V S1 L& | Y" b0 l: r
( `8 @: N% F, W( V; _

复制代码

伪直播主播页面

html

<body>: L }! o8 d, |, Q! f c) s
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>+ `1 `, h" Z( a
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">" T2 \- }# z% O' ?! i! Z; i
画布" E3 ~+ n& }9 o" J
</canvas>
2 R$ U# P$ n. C
<img src="" id="videoImage" width="350" height="700">
& }- s/ ?3 @, t& ?) r' O
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>4 _6 ~/ v0 k! S* V. ^3 }3 ~: q
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
2 b- q; y4 }' k/ q7 L
</body>
9 R0 \. B- ~: f

复制代码

javascript

var v = document.getElementById("myVideo");' Y+ X3 K) V) i& l9 R) R
var c = document.getElementById("myCanvas");" P2 o" \: b: S$ O3 X. s
// var c = document.createElement("canvas");: E9 ?# |; W1 Q ^% h
var img = document.getElementById("videoImage");5 M! e, F# ]$ V
ctx = c.getContext('2d'); s, S8 c" d8 U6 c8 o E) E9 h2 ~
var dataUrl;
e# H9 K: ]; F5 C: K0 a/ M4 t) k
const socket = new WebSocket('ws://xxxx.com:9502');$ I- H2 q& x. T |: M+ }
//Connection opened
0 s/ \* o% v+ e+ x: z3 B
socket.addEventListener('open', function (event) {1 v: T6 r& s* |% v* j3 C
// socket.send('Hello Server! im websockt');
; c* c2 ?$ O7 Q& d" f$ H
});
0 E- p% V& \9 r1 H$ n2 A$ M
// Listen for messages' Z7 t6 L# z5 [# @9 m3 o$ I
socket.addEventListener('message', function (event) {
$ Q4 \( l/ p& B" L8 l
console.log('Message from server ', event.data);; j8 \" X" |, X: p, t
img.src = event.data;* k; N2 M! {6 Q- D2 Y2 i/ C6 ^9 I
});
' w: S1 F. b; D5 O8 Q
- S, \ L+ o' G2 }5 P$ J! f; I- ~
function playVideo() {
0 ^% z/ k; Z' y! ]( d/ g
ctx.drawImage(v, 0, 0, 350, 700);
6 u- B5 }* A+ E8 E6 r* e5 T0 V
dataUrl = c.toDataURL("image/png");. l4 J; u6 [6 _( Q- q/ I
// img.src = dataUrl;" c- x. b9 F' S- Y% G! b% R
socket.send(dataUrl);
/ U6 s% @! ?/ U, \1 L, Y
}
var tick;, g$ r# I! N. S1 s
function aphla() {
2 k+ ~6 n- R! S" W) o
tick = setInterval(function () { r' X, s# K" r- O
playVideo();
8 w# m, ^6 J( d1 h* ^
}, 1);; h( U5 M1 S( F% u# u9 |
}. i+ ?; M" J. \
function vdStop() {, ]0 \" t0 J" J2 v7 y$ _
clearInterval(tick);
$ e* c- {6 O/ _- _" v: g* t6 z
}
2 S* n& v( _% j

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
) F" |( q6 k" |( j
const socket = new WebSocket("ws://lm.com:9502");
, E& r8 F2 H! o' B2 d/ H$ i
//
. {; e( V B% N6 j
socket.addEventListener('open',function(){
4 X$ ?* | T3 O9 P: ^7 x. \
socket.send('Hello Server! Im live.html');7 D. B( @ D S7 M' o) M' O9 S
});$ C2 c8 y, D4 x# ^2 y! O, B- b
// Listen for messages( S3 r% \( X3 N3 k( z, U* g8 U8 ^
socket.addEventListener('message', function (event) {
+ A- f- z' V+ e
//图片地址
$ f1 Q1 A R& }" e) J4 S# f e
img.src = event.data;% R3 Y& \' g6 f) U
});
# P9 k* s$ D* R& t/ h# t- f9 n, t- C

复制代码

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

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

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