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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); ) a7 N' _: _8 j3 ? Z7 f
//创建socket服务4 ~; F6 s+ J, F6 \" q& D
$ws = new swoole_websocket_server("0.0.0.0", 9502);1 _; s/ U, C- i
//监听WebSocket连接打开事件+ Z9 u* T& Q* g9 l, P8 e
$ws->on('open', function ($ws, $request) {* t/ e" ?6 P; V4 _' O( F( J0 R
var_dump($request->fd, $request->get, $request->server);
. M. o. ^/ O+ Z% A/ g" H
$ws->push($request->fd, "hello, welcome\n");3 l' J- q( \: [5 e
});6 I( M/ C8 V+ U4 l0 V' e: f2 a
# ~) j6 k) @3 V- j2 W5 H
//监听WebSocket消息事件
]1 l; p- z. t4 N: u2 g- `
$ws->on('message', function ($ws, $frame) {
9 a: _* R5 O) ^6 ]! w7 R( ^$ V
//推送消息给所有用户8 g& f# N8 F- |! F% u
foreach($ws->connections as $fd){
6 x6 c3 v! q6 N
$ws->push($fd, $frame->data);
# r: J5 g- g: R7 Z3 y, d+ ~
}1 H8 u& x1 ?# U0 L% N
});& }$ y* H4 L+ `, u2 Y
% v1 ]1 _" g- K
//监听WebSocket连接关闭事件
: q! R1 y6 A" j% G9 M) s
$ws->on('close', function ($ws, $fd) {
) f$ o5 }9 D3 E" j1 o* _
echo "client-{$fd} is closed\n";
7 S8 e- @3 }7 e; r, p
});7 @2 u- G C! w% r# M6 B
//启动服务+ X3 G5 R4 \1 s9 M9 A1 C
$ws->start();" e9 W1 {2 a/ T0 C
, X# V3 E8 @4 @( e

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器, t) E3 ]3 ~/ R) p! e9 ~! W
const socket = new WebSocket('ws://lm.com:9502');, o, i4 Q i a( m
//Connection opened) S! S+ g* N# K3 m. v
socket.addEventListener('open', function (event) {, V4 D8 L; p8 f- N+ a5 S( E5 K
//发送消息给服务器
9 X3 [, V& C& Y# f
socket.send('Hello Server! im websockt');" w+ Y, H( i5 w5 r3 M
});
" N1 a8 W. [( p' |) F
// Listen for messages/ R8 S, x' _7 j! ^. [ U
socket.addEventListener('message', function (event) {
3 Q! h4 j- v6 I# ^/ W, J4 T7 _
//接收服务器返回信息) o& A4 Y1 P% a& S4 P
console.log('Message from server ', event.data);1 }$ ]4 c2 C. V& `) T* w, i
});
5 v, n5 O5 }; h" f7 C
* e5 g5 X0 j7 _

复制代码

伪直播主播页面

html

<body>
. Y0 ]/ @) V* \) v, C
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
* t }* M) w; [ k3 y8 e
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">: z! {1 |! j4 x" x5 @
画布$ l$ \6 U3 _5 @# C J0 h
</canvas>
5 C5 [6 Q: ~. ^4 H- i% h( S
<img src="" id="videoImage" width="350" height="700">
; n. m8 |# z; {# O
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>' c Y+ p# c" A2 T3 V1 t P
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>0 L$ x+ O7 R# Z" P% p$ s# T9 n
</body>
p! U4 E9 Q, E% O# Y$ C. o- M

复制代码

javascript

var v = document.getElementById("myVideo");
4 p+ e: ^( a+ l `
var c = document.getElementById("myCanvas");$ Y- ~; t1 [ L7 G. i
// var c = document.createElement("canvas");
2 U6 A- w9 @# M+ G
var img = document.getElementById("videoImage");
( S8 M5 u( n, q( E
ctx = c.getContext('2d');0 S6 k$ T: X3 S7 u
var dataUrl;+ S1 B C+ o, {- D( J* R6 K' y
const socket = new WebSocket('ws://xxxx.com:9502');. A7 n8 M M9 _( e1 i9 ~2 V5 p
//Connection opened
. n9 A, M E- I
socket.addEventListener('open', function (event) {
" d3 q, }& ^) O6 B( e) l
// socket.send('Hello Server! im websockt');+ D% v; w- M5 S1 L: Z4 X
});2 n3 T4 e: @# z* T( }) [
// Listen for messages
$ G5 Z3 ?9 q! P2 ?
socket.addEventListener('message', function (event) {
3 ~4 y! b B2 h1 z f
console.log('Message from server ', event.data);
7 Z3 y# {* O, Q# }6 T* F
img.src = event.data;
. j% R0 L R; O* V' A. c# V3 p
});
( ?* Z9 ]4 [7 {* p3 h! z. u- ^8 V
/ y$ k& ^5 K; V/ p v& Q( n
function playVideo() {
, R8 F$ {/ }6 c
ctx.drawImage(v, 0, 0, 350, 700);) g8 U' q6 O6 u
dataUrl = c.toDataURL("image/png");
; w3 ]6 s) {2 u$ U9 N. I- s: H4 U4 n
// img.src = dataUrl;
4 r( l' R5 {/ j$ O3 N
socket.send(dataUrl);
& \8 d: S- i# F2 O' p! v
}, N. T/ P. n; D
var tick;
9 P! W$ w; S8 @2 j" w ^$ e
function aphla() {
5 q& {3 ?' T2 ?4 G; E M9 \, i
tick = setInterval(function () {
' I4 c, B5 k; ?+ p5 B9 e
playVideo();
/ ?: `+ _) E9 j1 x7 i
}, 1);
% p' E4 @1 {8 t1 \. [) ]
} M N$ p& R R
function vdStop() {
9 g) q: V- i/ P8 @& A2 k+ e
clearInterval(tick);. O/ T2 Z8 o$ I/ Z* Z1 y! y5 c
}2 F) w" U \+ u+ n3 y

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");6 L8 w4 I4 U7 V6 h
const socket = new WebSocket("ws://lm.com:9502");$ j" a7 Z X: w. O
//
- n" j' Z) d! h& Z2 M/ K& L- |# l6 [
socket.addEventListener('open',function(){
$ o0 W7 q7 a$ q c; W
socket.send('Hello Server! Im live.html');
7 W& O' _7 \' L
});: m) `0 W: r" y0 q7 ^
// Listen for messages; T! O+ Y( b/ Y/ b0 l
socket.addEventListener('message', function (event) {" ]. }( D1 Q, n8 H6 A( v) B
//图片地址$ ] {* V/ i t! p6 d
img.src = event.data;
9 o& {- _" n5 c$ \
});, U) }0 Y r$ e4 P2 V4 f0 t

复制代码

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

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

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

浏览过的版块