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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); ' V b8 \) ]7 j
//创建socket服务2 [( `/ o( M7 u! O
$ws = new swoole_websocket_server("0.0.0.0", 9502);+ q* Q/ q% t$ i9 Q9 C7 N
//监听WebSocket连接打开事件% C/ K3 a( p, F! L# Z( Z: b
$ws->on('open', function ($ws, $request) {
) \/ B5 c) N; Q7 N& o9 C; l6 b
var_dump($request->fd, $request->get, $request->server);
1 g* V8 _2 q' n
$ws->push($request->fd, "hello, welcome\n");
5 L: g' o6 ?( v; z' i& n' E
});
3 o6 _! o$ `1 w# \8 C
' ]$ `/ q0 k' B W
//监听WebSocket消息事件( l9 V3 t( a: G& Q
$ws->on('message', function ($ws, $frame) {
Y: E$ j8 B8 Q! x3 A$ ]
//推送消息给所有用户
, V3 h, r! E+ r3 \3 y$ } S" k
foreach($ws->connections as $fd){, W5 E$ e9 ?, }" p) {% z2 \
$ws->push($fd, $frame->data);
! O0 j, X* O' W7 [' e( v6 b8 D# M
}3 U: d, T+ ~; J! ~% z3 f4 n. q( B
});* Z% E5 P' S9 A+ ?) r% k
$ `7 p* w+ r& f' Z
//监听WebSocket连接关闭事件
% q [$ s* }& g- J' d8 ]- T1 e
$ws->on('close', function ($ws, $fd) {# D) i0 l" N) ~3 Y" Q2 p; E
echo "client-{$fd} is closed\n"; q* W6 m: P Z# [, g' K
});
' S" j# P5 |3 B( B: Z: G6 }( k& H
//启动服务! I2 e' t! u! R$ w) R% X8 ~1 ~9 S
$ws->start();
) ~; C$ b6 R' y9 F s
; g- h$ A) r6 Z# A

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器' x# @$ X! ~) i; p
const socket = new WebSocket('ws://lm.com:9502');9 [2 i* {8 Q/ C Q( i% f
//Connection opened
7 K b4 Z* J+ G h- W9 e
socket.addEventListener('open', function (event) {
' E- Y9 @+ K6 F2 L. p* ?6 N
//发送消息给服务器' G# {! E, l( ]! l/ r+ Z }
socket.send('Hello Server! im websockt');
& T! ]' h6 w' P4 ?0 k
});
- @- M' N% @+ i2 A2 m
// Listen for messages
7 [" O$ l- n c+ z
socket.addEventListener('message', function (event) {
7 h% a( A) f, [- w/ P2 H' ]
//接收服务器返回信息
0 Y7 r7 ?8 ^ P7 X6 f( }$ h
console.log('Message from server ', event.data);& o- h8 ] d* F$ ] |- Q9 ~/ [! o
});+ q* F: G% I2 I+ [/ b# A# F% A: j
/ D6 w- J/ o/ F+ |9 a' v

复制代码

伪直播主播页面

html

<body>! [9 S9 G6 Q" z c: n
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>1 r* b- Z c2 e9 M
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;"># l; W- n, P( y" n6 I# `' A
画布
/ E" o4 r7 X& `0 u4 _" ]
</canvas>
' R v m2 V1 y! ^& I$ u& p
<img src="" id="videoImage" width="350" height="700">: f. w. Q, m1 S* E: @
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
0 W9 q k- `0 R, f2 @" C
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>4 K1 i, E; k' S) }
</body>
$ h/ T2 A- p. | w2 x. P

复制代码

javascript

var v = document.getElementById("myVideo");
6 Y5 ~2 Q q( Q& v7 C% d
var c = document.getElementById("myCanvas");" ~! Q+ f8 o8 H1 p: d0 Z
// var c = document.createElement("canvas");1 b( D! \' x3 r: _* s+ L3 T
var img = document.getElementById("videoImage");
) J+ S$ v R3 r+ ~9 \
ctx = c.getContext('2d');2 @' _0 D" {/ L0 k6 R
var dataUrl;, W0 _: d. U/ X
const socket = new WebSocket('ws://xxxx.com:9502');
1 S$ K# k6 T: g% d
//Connection opened
' |3 P$ p' H. g7 z3 |6 o
socket.addEventListener('open', function (event) {
' P0 ]% J9 \0 Z& W* O
// socket.send('Hello Server! im websockt');
5 d8 O, |& W* M) M! ?- ~/ X" i8 U, s
});: ~. Y1 ^) M9 L+ p
// Listen for messages
$ F6 q& r6 H4 ^% t
socket.addEventListener('message', function (event) {& u$ \: d& H& ~7 P
console.log('Message from server ', event.data); d# h& T4 n% Z4 u( E. k4 G, a% |: w
img.src = event.data;
5 B6 Z Z9 I" I8 H" \+ @
});; |1 e; k1 v3 G" V- J' `
% K, ?2 A0 s6 @0 H% {. y
function playVideo() {+ L% v$ V& Y1 t N7 \% C
ctx.drawImage(v, 0, 0, 350, 700);
" s% ]1 y* L: z
dataUrl = c.toDataURL("image/png");' x U$ x* r j/ ?" X p! }
// img.src = dataUrl;
5 B1 F _- P' C1 o2 w9 I
socket.send(dataUrl);
# p2 w4 r5 r* b8 Z
}0 B6 n* V. F+ w4 G9 k
var tick;; S; K& C- J }5 H- I+ t3 L
function aphla() {! B5 @) p0 g( C h! \* a9 p: z
tick = setInterval(function () {
# W7 A- L+ @- E
playVideo();
. _) B3 I& ~6 T% H
}, 1);8 R B) Z# @+ E/ k0 H
} h f b9 e) M# Z2 F8 O9 h! X( v
function vdStop() {
[0 X3 a; |& Q2 J; ^
clearInterval(tick);
# ^' ^0 e5 w/ ]1 Z
}+ b- C. N7 C) M! }6 C2 o

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
. `8 w, [. I5 q: M6 z A3 S
const socket = new WebSocket("ws://lm.com:9502");
]+ R6 m1 ~& M3 @
//
/ m) Y; d/ T Z0 |1 b; @' }
socket.addEventListener('open',function(){
9 d/ b: x( C# B* G( l5 A" ~
socket.send('Hello Server! Im live.html');
g1 N0 F( v' \' K
});/ _+ R w0 u* q! H) |
// Listen for messages% a; `( h8 m, M p+ O* s
socket.addEventListener('message', function (event) { f0 Z1 C3 U) j/ { s
//图片地址: S) I4 ^4 {6 T0 ~1 `! k
img.src = event.data;
1 n/ Z9 A) L/ Y
});" q1 d( Z. I/ s& Y8 O- b f

复制代码

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

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

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