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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
; Z. l5 c- n: P ?% T
//创建socket服务; s6 C9 Z3 p- J* g2 [. s# B
$ws = new swoole_websocket_server("0.0.0.0", 9502);
9 Q8 l5 v$ P1 w* Y, e" a
//监听WebSocket连接打开事件. d. L6 A( `$ U" b% ?' o2 p, a$ D1 t, |7 R
$ws->on('open', function ($ws, $request) {, j6 Z$ ~8 L. Y6 [; G: j
var_dump($request->fd, $request->get, $request->server);. T1 F" G, ~/ }5 M. ~* X* c; `
$ws->push($request->fd, "hello, welcome\n");) W0 g# l% |9 @" K
});# C* e1 Q$ W1 Y) r+ w
* i a6 z3 _4 @4 j0 @( J
//监听WebSocket消息事件( m4 H7 Z" v: A$ q3 G
$ws->on('message', function ($ws, $frame) {
) t4 t+ [, x9 e; l
//推送消息给所有用户# i& G' e) D9 s" ? M
foreach($ws->connections as $fd){
* }% ~1 ?2 s: q% {- K
$ws->push($fd, $frame->data);( T; i( l1 X; O
}& O; A7 b. E2 {/ X( b
});2 Y1 d" N* R- _% A7 m9 }
0 E7 B* T+ \) m" C3 s l& X
//监听WebSocket连接关闭事件! G: V! G* }0 i& k
$ws->on('close', function ($ws, $fd) {0 H& g' [+ d* O
echo "client-{$fd} is closed\n";# ]6 t" o) w# X! P! t, a! h
});' O$ p1 M |7 q
//启动服务1 N: ?6 \2 I8 R
$ws->start();" g) \5 p; y+ a) z( [
- p o- d# U% d0 V: H

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
+ i6 `/ v& A2 s3 c0 F
const socket = new WebSocket('ws://lm.com:9502');
6 g" s" U0 \, o) k$ [
//Connection opened
* y u* |# u$ j" x U9 z) `; n* o
socket.addEventListener('open', function (event) {
& k# z) U+ S' p, i. ?
//发送消息给服务器
8 I& J3 R; P, w6 H. X) P3 e' X2 l
socket.send('Hello Server! im websockt');
5 D3 ?! ^9 o& i0 [
});
2 U; y: t4 N" H3 u5 E
// Listen for messages3 E; P" o% t# J7 h
socket.addEventListener('message', function (event) {( d, L) C5 Z+ ], H/ b( b- V& ]9 D- v+ \
//接收服务器返回信息- ?; a1 g! D) E) N3 c% z5 e) ~
console.log('Message from server ', event.data);; E7 L+ |$ F2 G% f7 T' r
});& T2 X; \3 ^ I
1 L' x' j3 k5 t; o/ P% a+ X

复制代码

伪直播主播页面

html

<body>
5 |; V V/ `) [7 [0 c
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
^) T- W& q* K$ c
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
# P+ P6 k. Z- a% l& M
画布. k2 l2 |& O* D8 z+ _6 h* D; q
</canvas>
% F2 I5 z, a3 D0 s1 v0 j* s
<img src="" id="videoImage" width="350" height="700">
7 w) s4 C2 F6 @/ Q; Z0 K1 s
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>: M# g2 h4 w: L: W, t: ?
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>. U1 r" b( e# d$ n
</body>
! P0 `/ u# l. \" f6 x2 V: A" f5 m

复制代码

javascript

var v = document.getElementById("myVideo");
6 x9 i9 m; x# f/ _
var c = document.getElementById("myCanvas");5 ]4 |! p% Y4 E; m& Z( F9 ^
// var c = document.createElement("canvas");
. ]0 W1 k2 O: _) U" x6 E
var img = document.getElementById("videoImage");
1 h# [/ H/ n( y. V
ctx = c.getContext('2d');
( h1 g2 K: \1 ^
var dataUrl;+ h$ m( T$ Y, |5 Y' L, s ^
const socket = new WebSocket('ws://xxxx.com:9502');$ G- {; w7 H. L) { s- V
//Connection opened/ c0 g- C/ Q+ ?6 G# W3 a2 N
socket.addEventListener('open', function (event) {4 X2 ]$ T/ z5 d5 V# n6 a6 S7 L
// socket.send('Hello Server! im websockt');- U: |: L) n _. n% \2 V' {! o
});& }) ^; U+ K) u& i; O" r( q
// Listen for messages- x' G% T9 Z5 a8 V: J7 C5 @. Z+ m
socket.addEventListener('message', function (event) {
6 Y7 B. c: x! H7 b6 \; }
console.log('Message from server ', event.data);0 \" U! e+ `& j! F) z2 d: _
img.src = event.data;
B$ f% t- a! ?6 P4 g+ T9 E a
});
4 g0 k) W3 h$ {' y/ {9 o/ D
8 @- A7 S6 q/ y$ `$ ]; y/ b, J7 H |
function playVideo() {
6 i9 B n- K/ z9 R
ctx.drawImage(v, 0, 0, 350, 700);* b! ~ x d* f/ _! o% @
dataUrl = c.toDataURL("image/png");
: @ [' Q- f5 L' I
// img.src = dataUrl;" g [) ]# O9 u" l: L+ L
socket.send(dataUrl);
. r7 M3 Y0 ^$ R" z6 s
}
3 T+ A8 i* j5 u }
var tick;
- R2 l+ z0 Q( F* G9 x$ W
function aphla() {( t# b b6 x/ d4 `3 k' M7 e
tick = setInterval(function () {$ J5 {/ t' ^; s- l Z
playVideo();
) q7 ]; y/ L" k. ?9 L( l
}, 1);
7 o+ c; i( B* k7 F+ r
}2 n8 x' F- ^* u6 U1 n
function vdStop() {( k* ^& l8 l0 a |* Y
clearInterval(tick);
- r6 W/ Y6 ~+ n; F6 t) V
}
! k9 C# G6 ]4 S4 g) T3 H+ x

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
+ Q' h2 S4 c$ e& B) C0 Z
const socket = new WebSocket("ws://lm.com:9502");( e7 r6 j& t4 @" a% B# C
//$ X& C/ g' G. O" d
socket.addEventListener('open',function(){8 C, Z0 {* w# p4 ?8 Z$ w3 L
socket.send('Hello Server! Im live.html');2 k c3 t: }7 q" }* V* E
});
) ?- r7 a }& Z; L. |# [0 ]4 _
// Listen for messages# y; ?2 `4 G. b+ z/ z; A, R
socket.addEventListener('message', function (event) {3 M- d+ o% x4 L" S% H0 n8 Z9 G7 E) y
//图片地址
3 i" J! D$ z/ Q0 f) B7 h
img.src = event.data;
% f' t) O, M, d+ _1 K$ Y
});
}- X f2 }- L) H* n W% w

复制代码

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

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

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