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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); . U0 i( k8 v" R& [* N* a D
//创建socket服务
) o; l* `& I3 l! ]( K5 j; S
$ws = new swoole_websocket_server("0.0.0.0", 9502);+ c; Z, U$ S9 |$ p
//监听WebSocket连接打开事件
) ]; q) E) B: J: ^9 R0 L$ e' J
$ws->on('open', function ($ws, $request) { i/ k- T9 [- x" K. i# ]4 I4 P/ M
var_dump($request->fd, $request->get, $request->server);" n! K+ L2 l9 ~! c8 D
$ws->push($request->fd, "hello, welcome\n");
8 Y x: \" ?' T4 N, H
});
4 g0 N0 n" B! l" m% ]7 D% t
) x( C: Z2 W- e$ F; ^
//监听WebSocket消息事件
' G% {( C9 x0 ?8 j# S
$ws->on('message', function ($ws, $frame) {/ f2 w) W8 O, T: G$ A, M/ o
//推送消息给所有用户5 r1 ~ K6 B/ S0 o
foreach($ws->connections as $fd){9 i4 }% y' T; ?6 I L1 K
$ws->push($fd, $frame->data);! X; _/ }- \0 o& z6 o& \& n. W; b
}
8 X, Z- |' M) x7 d' u+ k G+ {
});
, G4 k5 c+ e5 `% G0 k5 d5 U
, W4 X: O6 y4 L% t* b& G8 b2 {
//监听WebSocket连接关闭事件- ^/ g5 i3 e. f/ h
$ws->on('close', function ($ws, $fd) {
o5 D8 m0 Y% {3 F6 y( B
echo "client-{$fd} is closed\n";
8 r9 `2 l _( M4 x8 C
});
7 x8 P- x4 B+ c' S0 O- w* C
//启动服务) p( q" C* [* s; y
$ws->start();
, k+ y6 C: c# {' L
. L4 Y& Z* U, @, |

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
. v/ A" t: Q; f8 H# I
const socket = new WebSocket('ws://lm.com:9502');6 j9 B& y9 {, U) G' Y
//Connection opened
& b( ^0 Y% g) M6 O2 P1 s
socket.addEventListener('open', function (event) {
; ?, T/ y5 t5 ]& l- m
//发送消息给服务器
$ q3 I( H; B: v! l( j
socket.send('Hello Server! im websockt');8 j4 h; U& N& D. K
});
* E0 H6 t( A, L
// Listen for messages
( y3 D. E0 G7 v
socket.addEventListener('message', function (event) {
7 f6 V* I0 v0 g+ v! J4 M
//接收服务器返回信息7 P. g& P0 N3 h8 L
console.log('Message from server ', event.data);) H. o2 \& O% p+ W _
});; @6 Q0 [ N/ P. w1 ]( m4 ^
' q, C0 O3 c- @2 c% v

复制代码

伪直播主播页面

html

<body>& `( P8 y# j9 Z1 \3 R6 I3 N
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>0 P* \$ W `3 Y, @9 i
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">' ^$ h b. ?, I& d# _9 s
画布
, i! G4 k; Z# Z* \9 j
</canvas>
$ ], `/ z* X' @: ^! ^ m
<img src="" id="videoImage" width="350" height="700">
O+ W4 x2 G/ L- S
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
+ y4 m5 h6 A, Y0 v5 Z
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
) `$ X/ J$ R1 J' \/ C' c. [5 z( U/ L/ _
</body>
) \, {2 g; D. L7 Y' `% ^, b

复制代码

javascript

var v = document.getElementById("myVideo");
$ b! i7 k7 C0 C* ^0 S/ X
var c = document.getElementById("myCanvas");1 K6 H2 ?, G2 F% |" G
// var c = document.createElement("canvas");! n7 j& k! N- y3 w9 p. Q! N/ f
var img = document.getElementById("videoImage"); V8 Y/ E6 `5 l9 T2 q) w7 Q
ctx = c.getContext('2d');
) @5 o& G$ D; e- _0 t1 y
var dataUrl;/ u' i! x+ `' F; `2 y
const socket = new WebSocket('ws://xxxx.com:9502');
/ }# e5 P0 F, I- J* ?( B
//Connection opened
1 @2 c5 g: }: @2 J
socket.addEventListener('open', function (event) {
! R6 G) ^8 j! o2 o4 ]
// socket.send('Hello Server! im websockt');4 a- m" e7 j3 m/ K: v
});
. [7 S# E- `; u- e4 p& k! o
// Listen for messages. }! _! V/ ?- ]$ ?# V* R
socket.addEventListener('message', function (event) {
! K5 G5 S4 |. b) [$ e: ~
console.log('Message from server ', event.data);
; F4 R3 i6 B3 ~& {; o/ t
img.src = event.data;
7 u) y: c. b5 h# H% s
});7 Q/ ]2 |$ {* p2 k
. L/ P. V1 x4 O6 c- ]
function playVideo() {9 w' h. V2 E8 ~6 T2 X% S/ j
ctx.drawImage(v, 0, 0, 350, 700);
3 ] ]6 f6 Y* C3 }" v
dataUrl = c.toDataURL("image/png");% T+ c, ? V4 |, Y/ m8 ~
// img.src = dataUrl;
% i2 L; I9 U+ O! A4 M
socket.send(dataUrl);! X5 o! {: c& F/ q# u2 c9 U7 {
}) P& ?; g7 v5 p
var tick;! B9 t# j! u# j4 O1 M1 T h2 x9 p
function aphla() {
: \4 R# c+ q' I
tick = setInterval(function () {: Y8 x* J4 s, h( R
playVideo();
6 A% a) t z2 L n1 W1 \$ q# ?
}, 1);7 v# r, t/ i$ x& k3 L( N
}3 \* X: N* m, T
function vdStop() {- Z) [0 k$ z* q! s1 {: ^
clearInterval(tick);' ~. {. N0 {; E a8 K
}
' w# R0 w. X7 z

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");* b+ X4 l8 O0 [0 c. ~& f9 u; Z( d
const socket = new WebSocket("ws://lm.com:9502");
" E& L. `, H h! z8 K3 `
//
# A; `7 e/ `- T5 X- U
socket.addEventListener('open',function(){- v. o9 c8 H. w3 p* c; D t& Z( X, c
socket.send('Hello Server! Im live.html');
# A( X8 |' G7 Z5 ^
});
% o) U: F8 }" Q+ F0 C+ Q0 l5 k
// Listen for messages# ~* ~8 z' X; u/ |/ V4 Y
socket.addEventListener('message', function (event) {
3 P! k v0 w& J7 z3 `7 o7 X6 ~4 u
//图片地址2 c3 ]* L& o& S, f7 I
img.src = event.data;$ A k- o, C& |6 V4 P" Z, S
});, n4 { o9 P( [" F- P% v8 Y

复制代码

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

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

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

浏览过的版块