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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
: Q; T8 |2 q9 g- U. {9 ^, m& ^
//创建socket服务
, q' j+ `5 |4 k& c0 q* A
$ws = new swoole_websocket_server("0.0.0.0", 9502);
1 X. w& S, f5 B+ y5 `
//监听WebSocket连接打开事件
1 j& g6 t& h0 F
$ws->on('open', function ($ws, $request) {0 a$ q4 D- L! s- E& C/ h
var_dump($request->fd, $request->get, $request->server);0 I) R7 g0 u1 }
$ws->push($request->fd, "hello, welcome\n");
: S/ b0 C2 c4 Q4 \7 b0 Z3 [
});7 C2 @7 @2 c& s
- _* i" n: v# K% _ B
//监听WebSocket消息事件
( k5 p% d' a8 Y! O+ ~# P
$ws->on('message', function ($ws, $frame) { V8 p$ R" G+ @
//推送消息给所有用户& b% p# Q; Z( q9 n: R; C' [
foreach($ws->connections as $fd){' K. o+ [' ], K6 I4 R# e9 ^
$ws->push($fd, $frame->data);
- h3 ]+ j/ E, }) H
}2 c+ W% |: R' T) w/ f
});
" o$ o( {" D" l% H
# I* J- O: P; u1 ]2 S( k
//监听WebSocket连接关闭事件3 Y5 |& d$ G" l9 z' U) o
$ws->on('close', function ($ws, $fd) {& u# k) f$ T, s1 p
echo "client-{$fd} is closed\n";$ }! M/ V7 ~# L8 q
});
, n% Z) ~$ p: l: d! i2 t; B
//启动服务9 a8 B6 x% e* H. f
$ws->start();
+ E) \% N! j6 o; Q% Y( n u
- Q5 M: [1 T7 w% ?; ~/ P) O

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
7 M3 L$ w# j% `; ]5 a. q
const socket = new WebSocket('ws://lm.com:9502');
5 B! f5 M' R4 T! F" }- T/ W& @3 b
//Connection opened
0 t9 U- J# B e/ r, O& p4 E9 ~
socket.addEventListener('open', function (event) {
" w" I+ j! n4 o( C2 O
//发送消息给服务器
6 n) b. {' ?. t* h5 ^& H" k
socket.send('Hello Server! im websockt');1 T3 h8 R3 ~" j! W* V
});
; g7 {; W) K5 d5 a+ U3 ?
// Listen for messages7 k: B% x9 v1 r: U0 p( r7 u
socket.addEventListener('message', function (event) {# @, l; {0 u- l/ T* x X" b
//接收服务器返回信息" t; Z, @9 K' x
console.log('Message from server ', event.data);
0 m# `7 |$ `, E8 `/ M/ p
});9 X; t. O6 j% G
7 R+ g j5 ]4 l: t8 X3 j

复制代码

伪直播主播页面

html

<body>3 |" u1 c% c1 F( l" ~. {1 n
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>% [# o ?' c" D( x6 v
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
, ]+ V3 k1 n7 l2 G; p/ ?
画布
" t8 n& Q- l& N2 }# B( d
</canvas>
* p5 D {4 y8 L& f; B( Q
<img src="" id="videoImage" width="350" height="700">0 z6 L# I( Z$ }' o* Y+ g- U/ k
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>/ W s V- [) D6 p4 Z. o1 g
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>: q: G, m( r* @4 e; v% @. ~
</body>
. X& G. `0 k0 x8 G! i0 y) v

复制代码

javascript

var v = document.getElementById("myVideo");% k' i$ g d Q9 \
var c = document.getElementById("myCanvas");) z( Z7 n# h8 n8 N+ m8 W! w, y
// var c = document.createElement("canvas");
* {/ C& X) A L. k. E% v
var img = document.getElementById("videoImage");! L! Q! P+ |1 K2 ?9 |
ctx = c.getContext('2d');2 n/ w% ]. K% v! M; i( M
var dataUrl;# H4 ], V1 Q7 Z# T. ]' q1 r
const socket = new WebSocket('ws://xxxx.com:9502');
8 g1 [; \! [ E6 _( p. H' M8 L
//Connection opened
2 |/ O2 G" I/ m! L0 m d( ~
socket.addEventListener('open', function (event) {
5 R" |. s5 p( y! K
// socket.send('Hello Server! im websockt');
0 h$ \ @: m% f; z9 L6 o9 r+ _
});
+ z, _9 \, s e+ T6 o1 J
// Listen for messages: Q! { Y2 m) `7 g% o2 W+ x
socket.addEventListener('message', function (event) {
' P" q# q" I0 O4 F, N0 C
console.log('Message from server ', event.data);: \: h1 I& z9 Y5 b' N B% x
img.src = event.data;
9 E" Q7 M/ E3 \, g
});5 x! ?! U1 b) Z; _
9 O* E1 P6 u% b2 d$ ?+ T. U8 @
function playVideo() {( {( S% K1 Q% W* U6 s+ a6 q- M
ctx.drawImage(v, 0, 0, 350, 700);' f' ~$ x) S6 T, G
dataUrl = c.toDataURL("image/png");* P2 P1 ?) r/ Z
// img.src = dataUrl;* o: y" @/ g* R( w* q; p! J
socket.send(dataUrl);3 e! K) @, q8 r* [7 N6 ^) Q
}
2 B1 x$ w0 N4 w; X0 h
var tick;
6 y. |# v2 E1 ^# ]2 I" O
function aphla() {( m9 B& E: P0 A
tick = setInterval(function () {
7 o/ J3 d% z8 O7 O. V. c7 s
playVideo();: C' I. n6 s* _2 Q$ \3 z" @6 E4 g
}, 1);- w) n5 g8 R! |0 x2 F" P
}/ p% t4 e7 l) o
function vdStop() {
F& U( J* R6 S& m
clearInterval(tick);
( ^. T a% F, \6 l9 h; q% t- @3 G
}
3 G0 h3 Z) i4 a% C

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
* i, n! v( p. x0 i: U" a1 O
const socket = new WebSocket("ws://lm.com:9502");
$ a1 D9 V% x3 f+ f
//6 q+ k* @' G. X1 W# A
socket.addEventListener('open',function(){
% ?! ^3 Y6 u9 b
socket.send('Hello Server! Im live.html');
! }. P; I! d3 I+ k: z O/ a5 b9 S
});8 e2 h+ h3 X! R& d' s2 w
// Listen for messages% Y) L4 ^$ r- }! I
socket.addEventListener('message', function (event) {9 F/ L4 Q* q. ~$ T
//图片地址% [) p l r# X( V
img.src = event.data;
' ?: M$ \9 k0 C3 ]0 }$ O8 B
});
; Y2 |5 G! F- c2 g! S: \

复制代码

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

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

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

浏览过的版块