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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 7 \ R) f- [! b/ {" a
//创建socket服务! `: O [5 E2 m/ @: a" l' a5 G
$ws = new swoole_websocket_server("0.0.0.0", 9502);5 |8 \' Z+ c' @6 H n+ Y0 J. a8 g
//监听WebSocket连接打开事件7 u+ D9 Z8 V$ w! M9 J/ i: y; ~
$ws->on('open', function ($ws, $request) {
7 t7 j, R/ ~0 F" T1 A v
var_dump($request->fd, $request->get, $request->server);+ ]5 @: l, l9 z+ C6 e
$ws->push($request->fd, "hello, welcome\n");
. Z# T) L5 u' y" O7 P1 h) k4 a
});- Q7 {% g- E. x
% X7 f4 [. z7 @: U8 Z U
//监听WebSocket消息事件; a6 m0 N, `( ~
$ws->on('message', function ($ws, $frame) {. L, i9 I0 n) j4 b. Y0 o
//推送消息给所有用户 a7 f$ h* ~) u, j. y, c
foreach($ws->connections as $fd){7 b" d# G, Y W5 X' f. n: d
$ws->push($fd, $frame->data);. b/ ^5 y2 G$ v( P! u1 W o- e
}
* u; Z/ U- c, }. I% r
});
# {% F4 F) r0 r1 }
( s8 `" b! [! ?/ U5 c* j
//监听WebSocket连接关闭事件
. F% q6 `1 u+ \+ I$ \% s9 m6 u( r
$ws->on('close', function ($ws, $fd) {5 b6 U0 p: \, {
echo "client-{$fd} is closed\n";2 X9 {) R: W) m9 u, o& C
});! M8 p J/ w0 L
//启动服务
+ d. Y0 N& J% S
$ws->start();2 h C: |$ m& m6 I$ [$ |) C: U1 Y2 O
+ {% Y6 L) @, m; H: o0 ]' m, I

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
9 z9 b+ B9 z R% b( Y2 N, D
const socket = new WebSocket('ws://lm.com:9502');+ k5 ?# Q: M1 m, P1 ^; `( @
//Connection opened0 H3 V2 _- V) C5 ^% z; w6 v9 H( U; I
socket.addEventListener('open', function (event) {
% D( h5 `, D2 |
//发送消息给服务器+ z7 O3 N! ^% D& z
socket.send('Hello Server! im websockt');4 m/ C5 H2 g8 \3 l& F$ P( Z* ^* }
});, a9 y4 V) A% u' y2 F
// Listen for messages2 k2 O0 D, j7 n: [6 _/ p# o
socket.addEventListener('message', function (event) {
# y! I6 a! h) T
//接收服务器返回信息, v1 ^2 N: c2 U& y
console.log('Message from server ', event.data);$ B B# P. D* ~3 \( V$ Q4 o" @! ~% K: f
});
1 W9 |( c8 Y) @$ \" [3 g
- R$ M$ o7 x7 T

复制代码

伪直播主播页面

html

<body>
: w% h. G5 W* t! ?
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>- N5 N, Y# k$ v) y5 A7 j
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">/ m1 m7 m8 q& L0 s( P
画布; R8 `$ m) j- O4 l% g
</canvas>
$ {4 u$ }# L) j( w- p& o
<img src="" id="videoImage" width="350" height="700">8 L# l) ~: x1 ^% z* Y
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
" q; q1 ~+ b# y! l1 d! g5 t
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
+ v& T! ?! r' J8 r$ y5 ]
</body>
) \( p% a7 ~- m1 t

复制代码

javascript

var v = document.getElementById("myVideo");8 y4 ?1 i- P! a/ B( }
var c = document.getElementById("myCanvas");
- Z5 H5 t2 z3 ]8 e+ S/ j% P. |" R* j
// var c = document.createElement("canvas");) ?+ u$ L6 v8 x! Y- |
var img = document.getElementById("videoImage");9 f( g0 J" [( M' C! Y' f6 Y
ctx = c.getContext('2d');0 F: l9 X7 a% M9 L9 _
var dataUrl;
6 z8 h" k& q# l! y7 H
const socket = new WebSocket('ws://xxxx.com:9502');
2 X* o; C: i+ @/ T2 h+ X8 n
//Connection opened* W7 G2 @, f- [! u4 g* i- k
socket.addEventListener('open', function (event) {# P$ d: J3 W' k8 x* _
// socket.send('Hello Server! im websockt');
* Q( G- h% X! i( ~5 T( m+ k3 s
});
" B* y, k- B% Z; w2 q& R8 N
// Listen for messages
; Z0 J2 ~' x* b6 S7 }3 E
socket.addEventListener('message', function (event) {2 D1 a6 M7 Y8 N+ P
console.log('Message from server ', event.data);9 u1 w7 ]# [# \3 N( x% }2 N
img.src = event.data;
4 x/ e8 [8 ^6 O2 B1 f
});9 U7 L; o5 c! r0 W0 r) w' d* `+ Q1 ]
, g4 `* S" S0 P& t
function playVideo() {# k! @, p7 B# i( R% C1 `( w
ctx.drawImage(v, 0, 0, 350, 700);. R0 Y8 T" L2 l2 E f& u7 Q9 B
dataUrl = c.toDataURL("image/png");4 [3 t' w8 G. o2 c/ Q: l
// img.src = dataUrl;
# b: V! T. d# d( ?9 i
socket.send(dataUrl);7 O% I8 a# `! @- }2 o. p% }
}( G, R, H0 U7 l( v" N
var tick;
. S# Y3 P7 d* U8 C. @6 \" K$ ?
function aphla() {
7 j; t8 ~9 S! k: T5 \2 R9 ^" [0 R8 a
tick = setInterval(function () {
2 f: t7 d5 P1 u% V% T! v
playVideo();% d% `: A4 A- l: P% w) @( `4 e+ B
}, 1);& ? R/ t! N, a" Y. K
}/ {) C( r, `9 {# t
function vdStop() {, {3 M& o! ?) q/ ~; ?7 Z
clearInterval(tick);; q0 D# S- C/ y2 T5 ^
}
T1 u2 E# ?8 E5 h n

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");5 G* y/ Z% L: B) x0 }* E; D
const socket = new WebSocket("ws://lm.com:9502");
8 L. R/ g6 i- z8 z+ N
//
% t$ o: I- }" U; i
socket.addEventListener('open',function(){: K% m) ]7 R, v+ v7 ] S
socket.send('Hello Server! Im live.html');
. \6 R+ k7 h9 V9 i( Q) I C0 O% Z
});* g% F l# E# D% k! r$ S% J
// Listen for messages+ h+ C* z. R, x
socket.addEventListener('message', function (event) {
+ {. `2 \3 N% I o; w" i5 c
//图片地址
/ M1 N/ ]0 ^/ p" a$ {( n% D$ I/ K
img.src = event.data;
; |2 p- ?+ T. U
});
) e: {- F/ v9 T' ~6 S

复制代码

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

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

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

浏览过的版块