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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); , h; z/ p4 Y0 m. e' N
//创建socket服务
$ T6 b$ m; j% j6 p
$ws = new swoole_websocket_server("0.0.0.0", 9502);
O( w8 s; o5 w" Q. T. C2 _
//监听WebSocket连接打开事件# j t) T3 t$ ^2 M! H1 d
$ws->on('open', function ($ws, $request) {
0 |0 }6 J, [/ Q
var_dump($request->fd, $request->get, $request->server);
3 @3 O: p, u; [8 f
$ws->push($request->fd, "hello, welcome\n");
' X1 u* U0 l' q* Y
});
- r, T' Z+ Y& A' Q2 U5 |8 |
! u6 o* @. _6 [- Z
//监听WebSocket消息事件# y2 _# ], l& ^( V/ I! Q k& E V
$ws->on('message', function ($ws, $frame) {( v8 {# ?: s4 C
//推送消息给所有用户
! J7 ?: u2 f$ C: C( @
foreach($ws->connections as $fd){
& \0 p" E( p( m% y+ J6 n. K9 W
$ws->push($fd, $frame->data);* P( p5 a9 P! y. W" N
}/ N; Q: l6 |* R g z' g
});1 H8 x3 m1 y6 _! {/ C% Q
8 W% ]+ L2 k0 M
//监听WebSocket连接关闭事件 [1 ?2 `$ Y- P4 y& ~
$ws->on('close', function ($ws, $fd) {
2 x5 U! |5 m( T U2 t- S8 D1 p
echo "client-{$fd} is closed\n";
' r/ a2 Y- q8 n y3 L
});( l0 | ~8 |0 g
//启动服务6 v+ y3 G4 V0 t
$ws->start();# U4 [( Z& ?5 T- Y% M
- ]' ? S; S1 r4 K

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
! N, R6 x/ i1 k6 {! Z: z. B
const socket = new WebSocket('ws://lm.com:9502');& M" y0 K5 F) h/ l) T4 M- u+ h/ i
//Connection opened
2 |! T, u$ ~7 m' D
socket.addEventListener('open', function (event) {, W# j! b+ z, t! e& c6 v
//发送消息给服务器- [& C1 p$ }& B2 s$ Z/ I( P
socket.send('Hello Server! im websockt');
- Z+ }7 Y' L. X
});
3 I& }1 ]# R/ u, E0 f9 W* b' K: J
// Listen for messages# Q1 z. h3 A2 s# y- k
socket.addEventListener('message', function (event) {* [$ `7 P5 }- {. H
//接收服务器返回信息2 i8 G) K" d# n2 n1 p: x `
console.log('Message from server ', event.data);7 {! E' `' |) w& n6 t% {( {( {
});
$ q% ~/ L5 P4 G; G1 h
, ]5 s* ?1 S) k, L$ P: c; W

复制代码

伪直播主播页面

html

<body>
3 i! g# K' Z4 u1 E) c* M) M" i
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>. [$ Q$ `8 z6 A
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
$ j3 H- g' t5 r+ |, l. X
画布1 M3 o m3 z: g7 e- X( A
</canvas>& k/ k0 t( e: O7 `0 ~
<img src="" id="videoImage" width="350" height="700">" G7 o6 x7 r+ f K7 L
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>3 D( z) m: L" J% f: ^7 z4 w+ i* d
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button># B6 E# c" a+ P# {' ~
</body>! L6 k, U3 J, q( D

复制代码

javascript

var v = document.getElementById("myVideo");, N& {+ d% y) N( o: N
var c = document.getElementById("myCanvas");- Y2 `1 x: \7 r$ R8 [* e
// var c = document.createElement("canvas");
' y8 a# H$ D( P4 X) Z: D9 L
var img = document.getElementById("videoImage");
& i7 s( h3 I( [5 r! S
ctx = c.getContext('2d');
+ k1 O7 E7 ]* ?. H, f4 A& ?' i
var dataUrl;
% g( Z3 I3 V) I5 n' x' U7 O
const socket = new WebSocket('ws://xxxx.com:9502');% Y* s: p# J; ~9 q% _3 |
//Connection opened
- y( r5 C$ L8 ?+ E/ _
socket.addEventListener('open', function (event) {7 u0 R9 c) M1 \2 s5 ]5 Z( a
// socket.send('Hello Server! im websockt');
});
: c/ N" A2 D# h1 J' z6 E8 @
// Listen for messages
& O; X4 v- u- ?# O7 c
socket.addEventListener('message', function (event) {
5 o# k9 G: p/ r' e* x" u) ?) D
console.log('Message from server ', event.data);
3 _( j' Y5 S8 k# Z3 u. d
img.src = event.data;2 W7 m+ o6 B. i# y. N- v2 [5 G
});
3 n7 k' U. Y( ^4 c
& u, w% y$ }) m6 {0 U% ]; z2 _
function playVideo() {& m, `9 r& ~, i; N$ m8 V
ctx.drawImage(v, 0, 0, 350, 700);
8 d ^, [. c- p; X7 y3 n
dataUrl = c.toDataURL("image/png");( H" g. n O- P% Q7 G9 |& T* L& ]
// img.src = dataUrl;, o$ ~5 a% W" Q8 F5 K4 u/ ]
socket.send(dataUrl);% j, x% p0 a) n+ }5 n6 ?
}( ]2 l6 r9 H1 ^
var tick;
8 e4 r, S# L5 O- d
function aphla() {0 B8 D( ~, ^, J0 y
tick = setInterval(function () {' u3 l7 l* U! |( R
playVideo();
% x. ^1 `+ o% `3 Y9 h# n, J9 Y- W: G
}, 1);
2 O, ^9 O5 X& h* s
}
/ q0 D) I' R0 S$ B8 v
function vdStop() {
+ X5 x; }( g: ~: K D! _
clearInterval(tick);. t/ W5 `$ r) \4 h4 p( a( ]+ W
}) u6 k. O8 H h" D- A9 `

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");0 ?* E% V3 x6 K ~- X0 ]
const socket = new WebSocket("ws://lm.com:9502");: A m3 l, S, U! F$ u# V
//
% a- f& T3 [$ K8 Q
socket.addEventListener('open',function(){
5 t" P2 d/ y! B; U: {0 G7 o$ q2 d
socket.send('Hello Server! Im live.html');
; P7 m7 e! G% Z0 B
});$ o) K& e. l7 X2 ~+ v8 o
// Listen for messages- A% Z8 v( k, N9 U7 T+ X
socket.addEventListener('message', function (event) {6 X; u$ U+ b! B
//图片地址
- [# m' D; N; @6 g+ S
img.src = event.data;/ F( ?2 u8 P$ q7 a: C7 ?
});
: ?6 J, x1 k* H" T( s

复制代码

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

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

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