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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
) |2 p+ O1 ?9 F5 J
//创建socket服务
1 K W7 n- M+ i7 U( J/ r
$ws = new swoole_websocket_server("0.0.0.0", 9502);
. f0 a& [( Q! e& f
//监听WebSocket连接打开事件
0 B7 G- _$ x. b$ E9 P: F$ x2 j
$ws->on('open', function ($ws, $request) {. C* z: v( o4 d, B
var_dump($request->fd, $request->get, $request->server);6 E" y9 e% t; |
$ws->push($request->fd, "hello, welcome\n");
; x- z) v+ c, Z
});% p* K1 V) P: ]: S o
g k) x7 W9 U! Z* {$ A1 M% N
//监听WebSocket消息事件
% j' A9 O: b& }; N$ h0 B, {
$ws->on('message', function ($ws, $frame) {- p& f$ [* g9 P" Z. O; i+ s
//推送消息给所有用户
; A g1 ?+ H* j- @! E/ I' `
foreach($ws->connections as $fd){
' |0 {1 z3 d' L- M' M4 p8 h$ f# N; ?
$ws->push($fd, $frame->data);
% P7 T% U+ }/ Q" Z, M! A' J/ U
}
( N5 |6 f2 D a' z
});, p( A* \$ O$ X4 {& Y1 @: G- k
$ `6 }8 F( V# V9 B% s! m7 B
//监听WebSocket连接关闭事件
4 F/ z1 A' q5 X' z+ y7 D
$ws->on('close', function ($ws, $fd) {
4 D" |% G& [3 h' {% p
echo "client-{$fd} is closed\n";$ c1 h5 w& F* ~3 f
});
; T9 Y3 c7 c4 X5 E
//启动服务6 s9 D z; S& x) u; [
$ws->start();
3 {& D' M- Q0 L5 t. [# r7 Q
4 f6 u, q7 W. i1 Y

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
: o' [2 }4 T( z% M
const socket = new WebSocket('ws://lm.com:9502');3 s' E1 m9 ]. a& j, ^5 m* D9 x
//Connection opened
6 W( v9 i1 j& _9 s4 x
socket.addEventListener('open', function (event) {
G' i# f% R! ^5 J. C0 l( k) ~
//发送消息给服务器/ r0 p$ O! g# ]
socket.send('Hello Server! im websockt');
});
; P( @+ C1 D9 J& M1 q+ f! |
// Listen for messages
+ E3 [2 N! L, \9 X, \: q
socket.addEventListener('message', function (event) {
& C/ Q: p* J& t: P2 Z; Q
//接收服务器返回信息7 ~& @8 G( r. |4 ]; M; R! q
console.log('Message from server ', event.data);+ W2 b) e% R2 u
});
, v c. ^: f. Q5 B$ W
4 R* k2 n; k* g7 f9 ?1 I

复制代码

伪直播主播页面

html

<body>
3 z* p# R* j0 H7 i; D" Q1 T" O. \
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
/ B" l( l9 p& C1 }6 C- N
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">3 x1 C$ B! f. [' Y! w7 D$ r
画布( Q! E4 k/ k. e2 c' E1 i
</canvas>4 l* N* o) N- J
<img src="" id="videoImage" width="350" height="700">0 \+ N6 @# _: x8 b% i- D- z
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
" X, `& i- O4 Y7 B* I
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>8 Q% H% W- N/ \' y0 j' U
</body>
- s3 i8 i D! j, N' Q

复制代码

javascript

var v = document.getElementById("myVideo");
/ a. Q0 R) w. V
var c = document.getElementById("myCanvas");- w! X3 d$ T9 V8 @ Q0 n
// var c = document.createElement("canvas");& M, y2 V0 \5 E* u1 r8 g( `; M
var img = document.getElementById("videoImage");
6 P& q y: _) w- L G
ctx = c.getContext('2d');
var dataUrl;
/ t- y2 T- z# ~- r: |9 n; V" w8 I+ M2 g
const socket = new WebSocket('ws://xxxx.com:9502');! d+ x8 H2 ]2 X3 w
//Connection opened
) U1 q5 k" p' p; M' E
socket.addEventListener('open', function (event) {
! N$ X' W1 t( `( H9 }! X# N; q: I
// socket.send('Hello Server! im websockt');
/ |6 q, E; f3 J& y$ X4 C
});2 \. m2 u7 z* a( t( O" \
// Listen for messages
) }3 E6 v3 u/ M
socket.addEventListener('message', function (event) {4 f- J; F4 R$ ^6 I$ Q7 I- i2 K, `
console.log('Message from server ', event.data);
5 B0 E% \% R0 e- @/ H& U. |
img.src = event.data;4 W* o0 [9 s" ?! J' b
});
! D8 W" P+ b# W$ O: {$ }
. S+ N' P, x4 y5 G* C3 _9 Q# B# K
function playVideo() {7 m' a+ c) X4 k- Z! V5 ^4 [
ctx.drawImage(v, 0, 0, 350, 700);1 N5 t' J- ~ l9 `$ t: A
dataUrl = c.toDataURL("image/png");
+ K! V: c, t9 v; R& ^
// img.src = dataUrl;
% `( T, P+ T. Y" v; A3 t, N3 r( }
socket.send(dataUrl);
T3 Z4 G: ^& i' I# B
}
^6 e# x- [% R2 `5 {
var tick; e% e8 X* p1 Y# F1 ?* P2 e
function aphla() {5 |3 f. _% x; r+ x( P* a( a
tick = setInterval(function () {. c4 r& g; U, i4 H ]
playVideo();
+ R( s7 X: U; C1 M7 A2 B+ P+ I+ a
}, 1);
2 I6 u+ h f8 R# v. M
}5 x& c( k8 t0 U# q' g
function vdStop() {
) R# {- g$ y0 Z: \3 [
clearInterval(tick);7 m$ y0 y1 @; M X% w
}! Z* t$ r. A4 S+ P

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");5 n# _6 }7 \5 k5 w4 n3 r+ S3 K! O ^
const socket = new WebSocket("ws://lm.com:9502");; ~( C$ N8 G9 W* ]* r3 \
// ~, E. G$ N8 _* R/ v Y
socket.addEventListener('open',function(){. P$ I: r, h* L$ N& O& q
socket.send('Hello Server! Im live.html');8 ^3 K& @' _ [$ {3 q
});
1 c; Y% J/ k, A0 x0 Q
// Listen for messages
. e) a i7 X3 }% i
socket.addEventListener('message', function (event) {
5 V9 {' L6 V& n" U* ^" s9 k
//图片地址
) j. {$ n2 {" y, \2 }
img.src = event.data;: H" b8 {$ N* S4 B" l' X
});
" Q9 k; |; y# a4 _+ b: d/ q, o

复制代码

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

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

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

浏览过的版块