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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); # I2 W3 `7 h6 _6 q
//创建socket服务
. d" s7 v& F! X0 E: V. D% e$ W
$ws = new swoole_websocket_server("0.0.0.0", 9502);
( T3 V: l% ^4 J9 G3 l3 y
//监听WebSocket连接打开事件, v3 z3 @/ [& }' C
$ws->on('open', function ($ws, $request) {7 ^6 T% G. f0 e# h- v$ L; [) T
var_dump($request->fd, $request->get, $request->server);2 y& x4 t8 x7 e& c; ~+ j
$ws->push($request->fd, "hello, welcome\n");
( y2 {* x: }3 E8 P3 e. R" ?/ e
});8 @2 L7 c. x. k% |
' T+ T* e' k9 W: J3 U$ Q5 t
//监听WebSocket消息事件
5 U7 l. K2 i' d9 a* {
$ws->on('message', function ($ws, $frame) {
: V9 p1 X+ C$ E8 `& J& a
//推送消息给所有用户$ g! R6 z# F2 A2 r. t
foreach($ws->connections as $fd){
* w k9 G4 O# v2 |) O
$ws->push($fd, $frame->data);
8 I; F3 G3 V: Y. R& r$ W8 F
}
2 v0 a& o; Y, R: V! B( _2 p |
});
3 l9 X5 X- ]7 R. Y* A: k( M. u
; R% l5 q& ^/ Y
//监听WebSocket连接关闭事件. v9 b/ f7 a- D0 j
$ws->on('close', function ($ws, $fd) {& Y. H3 W) K5 N4 ?( {
echo "client-{$fd} is closed\n";9 z2 a: ]/ b( P ~- f0 H
});
2 n: m* V s, a: ]) F
//启动服务
& l5 e, I) L' r: J9 u* d5 C2 m
$ws->start();; k* C) P1 w2 ~4 @/ U1 {2 y
9 }- r0 M0 m' k. m# {9 |% Q

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器( @; }' |8 a; {% K
const socket = new WebSocket('ws://lm.com:9502');# R% |% W" p; ~
//Connection opened( l) k4 M; y) _1 d& q
socket.addEventListener('open', function (event) {
- O5 W( {. T) V/ {
//发送消息给服务器
/ q$ f8 x' B) q2 U
socket.send('Hello Server! im websockt');
; c! x! p! {7 L7 k- A9 a
});
5 T/ v+ r8 l) `# L
// Listen for messages( U& U* ?6 f7 G- S! W
socket.addEventListener('message', function (event) {6 J( O( v- m) H+ i; R
//接收服务器返回信息# k, P7 w3 i Z _: i& F% H1 f; ]$ f
console.log('Message from server ', event.data);
" z$ H* f1 A: D2 z3 l3 V
});
3 L" k0 G! S9 t/ r* ^8 x
, v1 E! W. y: h8 `) C7 D4 N+ X

复制代码

伪直播主播页面

html

<body>
, t4 N& t* y7 a
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
& p/ {* K$ x6 I# [$ U
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">2 r7 J2 n- C7 _* Z- O
画布' H$ d. x0 {& m
</canvas>7 ~& T! _% s/ Q. Y
<img src="" id="videoImage" width="350" height="700">5 S8 f L, M. g! m+ D+ A( t
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>- w8 c* n' S% w- h- I
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
+ c2 K& o. R% J# ^: a: ^
</body>. D" Z9 A p) p* e6 B

复制代码

javascript

var v = document.getElementById("myVideo");
6 n0 P. F! m' u+ Q9 K/ m
var c = document.getElementById("myCanvas");5 D0 E9 P) g0 I5 }4 c t
// var c = document.createElement("canvas");% e& c' @% ]- }) q& x
var img = document.getElementById("videoImage");! e) @- Z7 X* I3 I
ctx = c.getContext('2d');
+ l, z) ^6 v, i" B
var dataUrl;7 a3 _+ A+ B" R
const socket = new WebSocket('ws://xxxx.com:9502');
. [+ ~9 J4 O* Y9 ^: u: N; i9 f
//Connection opened
3 ?* z. m& z J
socket.addEventListener('open', function (event) {
3 z; W' A9 u" A4 l* M: a2 N1 E$ n
// socket.send('Hello Server! im websockt');
+ }9 Z9 A- l _. j( y7 s/ u& t
});/ n! \7 k8 l. U) q$ Q
// Listen for messages+ e% ]& c. \& I8 B5 v S' ^: |
socket.addEventListener('message', function (event) {
. j. l9 J1 q* [6 A9 b+ C
console.log('Message from server ', event.data);) ~; x$ h; ]7 K2 w2 h# y( y
img.src = event.data;
, T2 L: m5 K1 x5 S4 L8 R4 i: h3 c
});
& s" x/ Q. T5 N% V& f
2 L5 F. w6 i2 _+ H
function playVideo() {
: B! j) f& W9 Y
ctx.drawImage(v, 0, 0, 350, 700);' L- K5 R; T- p( Z0 d6 l$ u
dataUrl = c.toDataURL("image/png");
! n" q) F& `" \$ ~3 I" C- v }4 X
// img.src = dataUrl;
: K. B( h' F0 O& N, [$ b
socket.send(dataUrl);
% n& x3 f7 k) J
}+ a) h4 D* @' r0 o: a$ H( N9 [
var tick;3 v' W& z4 R( y2 ?+ y$ I$ C |
function aphla() {$ r" g9 e, t. F9 P9 K
tick = setInterval(function () {* G( Y+ r3 ]. w2 R- S: j
playVideo();
9 B: h& ^5 J- @/ H3 R, Z
}, 1);
# l& B2 N& Z1 _4 j# o
}
" w9 u |5 r. q. L7 n2 g2 Z
function vdStop() {9 L/ q- u' m9 ]( E+ T( p
clearInterval(tick);5 m% L( A- \* n1 n6 H
}7 s6 \5 N0 \/ B( [+ ]5 [

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
1 H a; s$ w- a2 y- s9 y: d
const socket = new WebSocket("ws://lm.com:9502");. T" U4 u. e/ v0 E% W; Z( b1 p) ]7 G7 u
//
: Z! @* z1 w( {: F) [5 Q/ B
socket.addEventListener('open',function(){* [; O4 [ @7 ]& \) {
socket.send('Hello Server! Im live.html');5 G0 x$ C$ l& r u1 L) I
});: m5 I' D3 h% e3 Z" q* i. Q
// Listen for messages2 ?& v- R/ x h- ?2 [2 W0 q
socket.addEventListener('message', function (event) {
0 i9 g5 h3 Q1 R0 U
//图片地址
5 c7 ~3 o/ }0 i. W5 j: R
img.src = event.data;
" v% Y: u6 e. U$ V c6 J
});4 w' i6 D8 n: J9 `" W( E9 l

复制代码

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

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

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