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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 8 U. {* C' T n0 @( n2 H: k
//创建socket服务
, j3 S/ L" ~; `+ f( }7 r; e
$ws = new swoole_websocket_server("0.0.0.0", 9502);, i. m( p6 j5 X. G X! |
//监听WebSocket连接打开事件
$ z! \0 g4 G4 M: B$ U7 ?
$ws->on('open', function ($ws, $request) {! S7 t% m3 J* L1 g+ }7 g _$ d
var_dump($request->fd, $request->get, $request->server);
# c7 D: n9 S }3 c, f/ W' a
$ws->push($request->fd, "hello, welcome\n");5 M1 \$ D4 g6 ~7 x, F, [! f5 p+ W
});/ \+ X) K p6 n; K# t
! Y t2 m ?+ y5 H% C5 a
//监听WebSocket消息事件
+ a1 R- P A4 ]* n M
$ws->on('message', function ($ws, $frame) {
5 L* Y+ D. y9 U$ @7 w) u& R3 T
//推送消息给所有用户
) X0 H, U" Q- L2 y. ~
foreach($ws->connections as $fd){+ J/ x% Q5 t5 I4 J- V9 g- E
$ws->push($fd, $frame->data);2 H/ k* {7 \7 M8 y# ^0 {
}* p& S# I6 L/ b; V$ l3 H, r
});
1 p/ k- N2 c8 H
H9 N6 k# }3 u- S8 J# E1 E
//监听WebSocket连接关闭事件8 v6 j9 U. C: d8 R, t
$ws->on('close', function ($ws, $fd) {- o6 I% |# p# I: X6 h2 c, U
echo "client-{$fd} is closed\n";# b9 V# ^& w' q3 v9 v
});
# S( b! `4 F4 R
//启动服务5 `1 J, p9 C, H8 S" |
$ws->start();
1 X/ J: e; r: n& P* |/ ~
5 b& Q+ c4 W$ c8 ^* D6 q9 ]- W! N

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
4 m+ M8 F: q' ?% w
const socket = new WebSocket('ws://lm.com:9502'); b+ g" d6 ]$ I4 M+ s3 z& x" V
//Connection opened
$ i5 \- [- B8 M& R" ^3 f
socket.addEventListener('open', function (event) {
) @* B6 R$ w* ^/ m2 x6 Z$ j! W6 }
//发送消息给服务器
' p9 S3 ~4 j- D7 x
socket.send('Hello Server! im websockt');
1 U% X2 B }. h
});3 I3 x1 E) k: s3 {( L
// Listen for messages
3 H& t5 n( V& F! Y
socket.addEventListener('message', function (event) {1 N9 B' h; y; Y0 O0 _: q
//接收服务器返回信息/ `- w, B: p" @: Y+ }. T9 M$ H
console.log('Message from server ', event.data);
- k# j& a3 X! [* X9 g
});
* _% l8 ?1 }% t& o
* A2 k* S! l5 c" ]: ?

复制代码

伪直播主播页面

html

<body>
3 r! u0 @3 A( |; R
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>0 e/ E" a: K; [* D, y: X2 C) ?
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
8 N" x2 e, a/ m
画布
</canvas>
2 R, y% J6 F- u
<img src="" id="videoImage" width="350" height="700">5 f1 P( O' A& H6 q+ x0 j( u
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
" t( H5 K' p- ^+ Z* X
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>1 s" M8 \' @5 l- v" b" T
</body>
$ ^" I5 n! m) h

复制代码

javascript

var v = document.getElementById("myVideo");, f d1 k3 ~8 I0 x! l5 Q! K
var c = document.getElementById("myCanvas");
9 b; p. E! h6 C B3 j
// var c = document.createElement("canvas");
* z9 @9 a, {% L! A; A! N2 @5 H
var img = document.getElementById("videoImage");7 p+ P* s, U& E$ X
ctx = c.getContext('2d');& J2 z5 b7 P- X1 z$ }
var dataUrl;) `7 t+ P$ y* v, Q
const socket = new WebSocket('ws://xxxx.com:9502');' U" K# a$ |# a
//Connection opened
6 T& ]3 ?" r5 L
socket.addEventListener('open', function (event) {
$ @2 Q! A5 | F+ U' y. M- X5 S/ j
// socket.send('Hello Server! im websockt');
7 M7 J0 D# D4 S( S* O6 F( Q
});
- a1 D8 P/ s$ x+ u8 G# |. \- q
// Listen for messages
8 @; f% B0 C1 m2 m5 e( I
socket.addEventListener('message', function (event) {9 j7 O& Z9 j+ S* N
console.log('Message from server ', event.data);
4 V2 @" T# g( Y: }
img.src = event.data;1 ?, U1 L0 X9 a# H* U% R& X* l
});
( I6 s6 [: w7 V4 T. b% T/ w
P0 h" m. @% ]+ g0 Q8 L3 _
function playVideo() {7 t9 Q, x9 p/ M* P i4 F
ctx.drawImage(v, 0, 0, 350, 700);9 [/ j! X s# u' ^4 }/ b
dataUrl = c.toDataURL("image/png");* H F& B+ i7 r" H( [ {7 z. l
// img.src = dataUrl;
% \& s: H v, C+ a$ E
socket.send(dataUrl);4 e& m( g- P9 {: w9 C1 q! V$ |
}2 q; o6 J6 Q1 ^+ U/ {
var tick;
5 k" ^0 `+ o# p
function aphla() {2 W6 d: |, L, V9 }. @6 c$ x
tick = setInterval(function () {
! n9 O0 T: t3 T3 M- Q4 s
playVideo();# a" q% L' |4 a" l0 A
}, 1);8 g; ^5 D1 t+ Z; ~$ h2 @$ [
}
5 K- g$ q {6 p! E( }. m0 r: W
function vdStop() {
; I6 s( B/ e& I& L& ~; N0 H
clearInterval(tick);8 A' W, Z" M4 ^" |; Y& ~
}
- z, b. h1 k* D( m. {# k

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
- E" _9 b. y1 ^0 a7 Q
const socket = new WebSocket("ws://lm.com:9502");
" u* l; Z) F% j& o! a9 D
//
( z; C4 ^8 X$ F/ g1 K: e! ]
socket.addEventListener('open',function(){
0 o, r7 R8 }8 X' O
socket.send('Hello Server! Im live.html');
0 i& Z. l; B- P4 K; i
});
+ H4 \% _/ M8 y% ?
// Listen for messages* o. x* [1 l0 o
socket.addEventListener('message', function (event) {. }- [3 X3 L8 u( j
//图片地址8 ?' z- r' y0 m$ ?9 U, v+ G
img.src = event.data;
' M' P" ^+ V3 P3 Y0 M
});! H( ^7 M+ A1 r# D

复制代码

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

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

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

浏览过的版块