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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 1 ]! m8 x3 _) S- H- V
//创建socket服务
6 G$ U' M' j4 E+ ]
$ws = new swoole_websocket_server("0.0.0.0", 9502);2 V$ L/ v1 I4 d+ Y" x0 n9 F: y
//监听WebSocket连接打开事件) M8 {1 e; v! Y6 ^5 H, d3 y9 q5 f
$ws->on('open', function ($ws, $request) {# L# V; D# W/ Q+ M4 a* }6 c
var_dump($request->fd, $request->get, $request->server);9 K6 j3 h! B. l" ~
$ws->push($request->fd, "hello, welcome\n");
( _% P& U) t ^# g
});
) ~3 E5 [: z1 u$ g6 j
( S, l' W5 p, b( W0 {7 `
//监听WebSocket消息事件
( F! ?% v, o% P5 b) H$ z
$ws->on('message', function ($ws, $frame) {1 R0 j1 i3 |5 g/ i
//推送消息给所有用户4 g/ A9 X# Q. a
foreach($ws->connections as $fd){
% f* f, b$ Q. x
$ws->push($fd, $frame->data);( [& |) Z" \: h
}& i$ ^7 @' k# n$ F
});
}8 W. _% p! z5 J2 ^' S4 v
& f& F3 y: h n" N5 E4 f3 Q. a
//监听WebSocket连接关闭事件
- r: R5 _1 L$ e6 r+ Z. F! o. J: i
$ws->on('close', function ($ws, $fd) {
4 V! V# o" w* l, x
echo "client-{$fd} is closed\n";8 y& b- h, H. i4 l3 O' N0 {
});: u. D! l6 i/ h' }1 r9 ? i
//启动服务* m7 V" }6 E. h/ n$ I
$ws->start();1 ^" ^7 B) `/ z
3 l% s! u; n( f- m, v( D! E B

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
+ F8 O' L! K2 |0 }
const socket = new WebSocket('ws://lm.com:9502');1 B1 N; q- s4 L- ]- z/ ^5 r/ H
//Connection opened5 A4 T+ j3 ^" L' O. H
socket.addEventListener('open', function (event) {
6 N G0 p/ a- ~ K) ?7 g2 N
//发送消息给服务器
2 @, T5 s, z* @* a
socket.send('Hello Server! im websockt');7 s* s" K& V+ v' Y% ^7 Y: @, r- V
});( f, Y1 p! g+ C P
// Listen for messages
9 Z: A0 e% l; ~6 W" ~
socket.addEventListener('message', function (event) {
& ^$ V/ B) {- Z( O- Y# P' m( `- J
//接收服务器返回信息, a6 b; i6 n: B- b! b, g) A
console.log('Message from server ', event.data);
1 Q5 }) h- _8 N! n7 D' @$ i
});; { n; r& r* t) y
, H. M, I0 r: J) o6 I

复制代码

伪直播主播页面

html

<body>
% E* m" e# z H$ j1 {; D& H
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
- t; M m5 z, h: c% f5 c8 m1 L; q9 s
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">8 a4 F6 D" T* ^) V5 F
画布5 {' F. F* d/ l/ U- c8 j
</canvas>: M8 D2 x |( Y
<img src="" id="videoImage" width="350" height="700">" [, @9 ]6 h1 Y
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
% P0 c& A1 J6 f* I- t
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>- A' R4 Q6 t$ B: Q6 T) ?1 R
</body>
1 E Y$ k: g8 @# ?6 U2 u& d5 C- S3 C

复制代码

javascript

var v = document.getElementById("myVideo");
4 `, W. B0 S8 ]% \% Z3 V; \
var c = document.getElementById("myCanvas");
u' A0 a9 n4 Z3 g
// var c = document.createElement("canvas");1 {4 Y" F$ P5 D8 L5 q7 @6 |. c
var img = document.getElementById("videoImage");6 ?/ `: f4 ~5 Y/ W: H/ S
ctx = c.getContext('2d');
; y2 z7 M- Z7 v$ ^( X: @
var dataUrl;
" K2 S x) b" ?, T4 e! h' U b
const socket = new WebSocket('ws://xxxx.com:9502');
9 r) `" z _ J4 g+ v& H+ H( m
//Connection opened
4 u' E' `1 U4 g( R3 Z8 m, W
socket.addEventListener('open', function (event) {
2 D. N( f( Z9 k* ?# q0 k( T [
// socket.send('Hello Server! im websockt');
/ {$ B+ N$ G) T/ f
});
0 B, [' l, q: ~- A, A8 k
// Listen for messages
5 y5 \; g9 k. Y
socket.addEventListener('message', function (event) {9 C% Q" z* @) H0 P2 U. Z7 ]6 {6 g
console.log('Message from server ', event.data);
: k; K* l& X' @1 G6 O; h, I
img.src = event.data;/ K9 t% @* u- R9 M0 ]
});& E* M2 K2 h* r+ D0 Q
: ^" L, l8 _4 B" Q* S( n
function playVideo() {
9 A$ C, P1 u1 B t/ s# ~! [/ A: k
ctx.drawImage(v, 0, 0, 350, 700);: t- ?2 }% d4 N2 V
dataUrl = c.toDataURL("image/png");3 d6 `$ \0 ~# d6 ~5 @& Z) p
// img.src = dataUrl;: h! O3 ?2 ^ y3 k" E6 J F
socket.send(dataUrl);: b r% B" L/ T, ^( L$ S3 p
}
3 W2 i, \9 B9 r0 R
var tick;
# `( `1 v6 f7 t; Q
function aphla() {
6 q: V9 z. C# _; \( e' C
tick = setInterval(function () {
9 F. F2 v% V7 r) J: K
playVideo();+ q7 U: R* N& z
}, 1);% j& j- N. w# [' c# w/ [( i; c
}9 p1 ]2 ]5 f# j( ?
function vdStop() {! ^ ^; i. d2 }
clearInterval(tick);
7 u, Y* D& ~9 j+ }7 K
}, \: ?2 |, k8 L- {+ w

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");$ y q/ X$ i* e. t T* A
const socket = new WebSocket("ws://lm.com:9502");
& E9 h/ n) R8 Y4 Q% o# e! a
//3 {9 u: q3 ?3 C
socket.addEventListener('open',function(){( ~! n# ^+ ^1 i4 p' l2 K
socket.send('Hello Server! Im live.html');
) J; ~! B7 Q! e, t# x$ p
});7 b1 m( {3 u% H4 ?3 z
// Listen for messages* V, Y; h3 h( e) X+ Q, A
socket.addEventListener('message', function (event) {
( T3 u6 {: X. p6 Y. Y9 ^" D2 S1 D- V
//图片地址" t' \8 F# f. _9 F F. N
img.src = event.data;4 A5 w4 ?: j* J& Y$ P/ n
});# Z ]6 i4 I- G- n

复制代码

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

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

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