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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); ( x: X6 X1 T1 G7 m1 w% j6 ~
//创建socket服务4 G6 U; D+ q3 M( [
$ws = new swoole_websocket_server("0.0.0.0", 9502);
. f/ e. x/ l" h; ? c
//监听WebSocket连接打开事件
" ?* I0 I4 X# k" D( C% [# Z1 W
$ws->on('open', function ($ws, $request) {: r4 N4 R6 z2 Y: B1 ]
var_dump($request->fd, $request->get, $request->server);/ Y. H5 P' o6 r% k9 k( L
$ws->push($request->fd, "hello, welcome\n");
; u$ `+ N/ Y- \5 S- y
});
0 E, m2 I2 ~% k
+ y/ b. y I; M k% \' X
//监听WebSocket消息事件 X* w2 e3 p& l5 T
$ws->on('message', function ($ws, $frame) {
; P, [6 I& h' n; f" k/ e8 o
//推送消息给所有用户
m# S; f& g1 _8 j4 u& G
foreach($ws->connections as $fd){2 i$ K2 S! `$ }5 F- E
$ws->push($fd, $frame->data);
; z. l. e$ S) s' m
}
* U, V6 ?; h. ] N
});
% X7 H% B+ b+ y6 k1 g n8 p
* @8 n( z' o2 w. |- E+ \) U7 a
//监听WebSocket连接关闭事件1 R: T6 ^: Y5 u0 a. ]4 ]
$ws->on('close', function ($ws, $fd) {6 d( J' k9 p3 ]4 z" \
echo "client-{$fd} is closed\n";. q5 y2 A4 ~1 N
});8 F, p3 U$ ~0 ~( }( X4 }
//启动服务) b: K. ]& I, Y8 f+ f+ }- g; a
$ws->start();7 y4 |, b4 s; T' G9 ^) f
' t8 A; v4 B4 Q2 S+ S

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
, e. K& B/ H' S
const socket = new WebSocket('ws://lm.com:9502');6 U. v2 s3 i8 \! V. M% X
//Connection opened
2 |; l& Z5 F9 E6 a) ]6 o6 u
socket.addEventListener('open', function (event) {
f# c1 M' }4 B" ?
//发送消息给服务器
2 s k& Y% u5 z* f/ E
socket.send('Hello Server! im websockt');( V9 b# @1 s+ m- L
});
6 d; l% X" v- y1 A
// Listen for messages+ I5 k6 {3 \6 G! Q
socket.addEventListener('message', function (event) {" }8 F* X; t+ |6 Q3 M
//接收服务器返回信息
0 O7 K$ W+ b: R; |
console.log('Message from server ', event.data);
, M- _9 S8 ?% k5 N6 ?
});' e( B! c6 H3 ~4 M. w/ H
: J6 c2 }& r( h9 T3 \; ^0 u( @

复制代码

伪直播主播页面

html

<body>2 A/ l3 Y/ B8 x7 b6 ~
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
: n: J# \6 v: x1 w8 v2 i! Q$ S
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">( ^" {6 h) z/ ?1 R' K9 z( U
画布
_/ e; e+ b2 h5 g/ f2 e
</canvas>6 e# `2 }+ f9 g9 z0 V! f
<img src="" id="videoImage" width="350" height="700">+ i# [2 A# @7 m0 ]. j) R
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
& J4 O/ X% P6 a, ^( [+ r
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>- p. `5 B; Z5 d
</body>4 c$ F' B5 D% L

复制代码

javascript

var v = document.getElementById("myVideo");
# E7 f4 x2 S% h4 a% j9 t" Y5 ^8 r
var c = document.getElementById("myCanvas");/ l) J5 J- O- U0 | \
// var c = document.createElement("canvas");5 B( h# `6 J! z, M! ~6 X
var img = document.getElementById("videoImage");5 o* |; N2 ^. A* Y) M
ctx = c.getContext('2d');
7 B. }% F) N1 D ^
var dataUrl;
. O4 w' t* q- r6 y" g5 r: R d/ Y( r
const socket = new WebSocket('ws://xxxx.com:9502');2 F3 R4 G% K9 L8 L$ T/ V" J1 M% W
//Connection opened3 }3 X! l& ~$ x- P+ Z
socket.addEventListener('open', function (event) {& [4 P' }! g. J( g: I) M
// socket.send('Hello Server! im websockt');
3 q, [: V+ z, {
});
% v# g7 S2 R& |+ M% f" g
// Listen for messages' B- u. J1 w/ g- p- N3 O0 p
socket.addEventListener('message', function (event) {! Z( Q, Y+ \1 A, V3 ^9 R% [
console.log('Message from server ', event.data);
* S$ O1 V( v, T# _8 Y! Y
img.src = event.data;
3 S4 ]& R9 g# n. [- H- F, O9 e8 G
});7 V6 j) K. X+ G! c2 q0 B; O+ B
4 S9 v) ]: g% y2 Y- X4 I8 B
function playVideo() {
y5 S$ B* k, C d8 N9 O$ e
ctx.drawImage(v, 0, 0, 350, 700);
+ Y( j( n* Z: @6 I& x# }; g9 ~& n/ m: l
dataUrl = c.toDataURL("image/png");# H8 Y# P( w* m: X4 C( F
// img.src = dataUrl;
* }0 z% P# J) k7 H. X
socket.send(dataUrl);
, O/ V# ?% ^, X& E& ~
}& d: H6 y, Z7 B' E* n6 O* m) b- o
var tick;
, I& K+ d, i/ f; d+ u
function aphla() {
P& i) U# l! {7 u! i3 S
tick = setInterval(function () {
6 |3 O$ \$ e1 x+ }
playVideo();
% z' {8 I% l3 S0 t2 J; ^$ f+ z2 e
}, 1);
; y! y% B. y9 P/ _
}: z/ Z0 u7 c$ j( ~
function vdStop() {
: ]4 v) M% n a' W; q
clearInterval(tick);) |- P W* V# `; Q( y W8 U
}7 ^% Z* a. }4 N7 T

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");/ d4 w- H9 b$ O N W& A. u
const socket = new WebSocket("ws://lm.com:9502");; b: f" j& n! C3 y. j
//
6 B I+ x X: L+ d: ?! a2 s# {
socket.addEventListener('open',function(){
7 @9 |" t$ L0 F2 g# z
socket.send('Hello Server! Im live.html');
, e! ? K3 P: c, k
});
// Listen for messages9 B% [7 T: E) F L7 ^- n
socket.addEventListener('message', function (event) {
. `3 b4 F, A0 X7 u7 S6 |. _
//图片地址8 p+ k5 P- e" _/ f; d$ `4 R3 H
img.src = event.data;
( k/ G4 G0 \$ K9 Z& [
});
- D5 K! h! {; `# f; r% N

复制代码

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

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

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

浏览过的版块