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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); / `0 f! U6 m* Z' E5 S
//创建socket服务
) }+ ~) `& z& H* r1 ]8 T
$ws = new swoole_websocket_server("0.0.0.0", 9502);7 a( h2 n0 B1 t6 y' X
//监听WebSocket连接打开事件
! @, |) i$ J0 B& H9 |% z
$ws->on('open', function ($ws, $request) {
2 @: ~. @# s( @5 ~. ^7 q% E4 }- @
var_dump($request->fd, $request->get, $request->server);
/ h% G3 Y" X% b; M4 m
$ws->push($request->fd, "hello, welcome\n");5 |/ ^& {4 u+ Z% W( T. m
});
4 U6 S7 P! F* G7 J, l$ E) L
# D- r3 _( U& u
//监听WebSocket消息事件7 j: y6 ^9 ~, |( J
$ws->on('message', function ($ws, $frame) {8 D' V2 v% v4 _& Z# n+ c
//推送消息给所有用户
! L1 i+ o4 `6 y# @- _# U" B+ T
foreach($ws->connections as $fd){/ s: O4 k" p. J7 ]7 k
$ws->push($fd, $frame->data);
* k7 @% `9 {) O0 r) F2 B8 l
}
# \& \9 x* ]; t+ Y5 W! Z
});& c& s9 N; Z8 Y: M( o% v
, E& t& h$ U& P' ^0 S7 M# y% l
//监听WebSocket连接关闭事件- {7 g! h6 g2 _+ x! N7 O7 D' S
$ws->on('close', function ($ws, $fd) {2 d% C+ y7 Q1 y
echo "client-{$fd} is closed\n";
) ^$ K" d) V. H2 U( \* s- Y* o5 c' T
});6 C' q% m* L6 n( ^" U; c
//启动服务" A+ o8 s1 K/ M& W
$ws->start();
2 V9 E6 R+ M# u' p5 f& |
7 v1 E1 ~8 p7 U& v- x" A) D2 m/ y

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器3 f* o: [4 ~. S4 U0 d; R
const socket = new WebSocket('ws://lm.com:9502');7 e5 I) \4 c/ \4 U+ i% u+ Y
//Connection opened6 V+ P2 [3 v+ N
socket.addEventListener('open', function (event) {7 `0 e, [4 a5 H% Y6 R. b
//发送消息给服务器6 l. C! O( P2 N
socket.send('Hello Server! im websockt');" j0 Z- d3 W3 C6 `+ e3 U
});& d p4 C) @6 {# q4 f
// Listen for messages1 i6 b3 w9 _" g, f
socket.addEventListener('message', function (event) {& M$ ?; o4 R5 ]8 w3 d* q6 G
//接收服务器返回信息
( `% s0 G3 X F. [/ L
console.log('Message from server ', event.data);
, H+ k; `. N$ u+ _/ _1 [5 Y! g
});% @" C* j, g- w: i- Q7 v
, |" T- L) D1 H" g6 Q3 O

复制代码

伪直播主播页面

html

<body>
. M; Q# F* ~! a; `4 u
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>* U/ m: ]4 n+ @$ y9 p6 [8 S( V1 Z
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
0 Y; H6 ]+ U: V( K: z9 L# X
画布
3 ~- K' j$ q6 I7 N
</canvas>9 d$ z6 a9 L; _
<img src="" id="videoImage" width="350" height="700">
/ \' G% h3 j- r9 w! E" Y
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
( B9 \! b z8 @9 g* Q
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>5 F1 P2 {+ Z$ f, Q! _
</body>
6 f' I* I% E' J% F/ c

复制代码

javascript

var v = document.getElementById("myVideo");
8 @! a+ ^: n& P
var c = document.getElementById("myCanvas");
$ o1 ]2 |2 m' Q9 l) ~
// var c = document.createElement("canvas");
, o1 e) q! s/ M. ~0 H
var img = document.getElementById("videoImage");1 b: B6 W2 B+ Z5 F8 o: d- C) u
ctx = c.getContext('2d');
& `- u, r/ d( U3 y9 G( y( N
var dataUrl;
. B# V# P7 r+ L8 G1 ^2 f
const socket = new WebSocket('ws://xxxx.com:9502');
L: t% E$ k4 Y
//Connection opened
9 c/ b" B( P; t5 j& ]# {: r
socket.addEventListener('open', function (event) {2 G! @" _( W3 @/ s9 R4 O; d% E+ N
// socket.send('Hello Server! im websockt');6 B5 ]8 C. L( K6 \, ]
});8 P4 F/ A6 Q8 U7 N' d; v
// Listen for messages( ^ ~ M9 o' ~. J% {! n7 n& U; ~
socket.addEventListener('message', function (event) {: k- c0 [% \! F+ \# @) u2 Z: w
console.log('Message from server ', event.data);. A+ j8 i3 i' @0 x
img.src = event.data;8 C8 ?- k. _% I1 h
});
6 H6 N' V9 D5 Y! v2 L6 d
/ ^- d# [( e) E1 U9 t: M [
function playVideo() {& J( z. [5 H0 C1 j+ v H# g
ctx.drawImage(v, 0, 0, 350, 700);. D5 U, L9 M9 Q& i. O: E
dataUrl = c.toDataURL("image/png");
( g( B! j* q; x4 P3 }
// img.src = dataUrl;- X/ F+ ^& |0 X" ^
socket.send(dataUrl);
* `7 L( ?6 j/ x. K9 M, h* I; S! G
}5 U+ y. q4 ]- [2 y4 ]6 A
var tick;* D* T6 u1 A& Z2 ?) M: w
function aphla() {
, y1 i2 \. }2 S
tick = setInterval(function () {! g: B# I+ Z( X; c" Z2 w0 \
playVideo();5 S" [/ w3 {/ ^: d& |! I
}, 1);
% l) T' k8 p: U4 I( e
}
/ J# P9 r. L( I2 G
function vdStop() {* e+ X8 {$ P8 k! L7 r$ ?
clearInterval(tick);6 `# l+ X9 M: \& z( N$ r
}7 ]& Q% c5 E) P0 ^$ b" G

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");# b6 ]5 `4 o, D2 E |
const socket = new WebSocket("ws://lm.com:9502");
# I2 V! s6 h2 S3 Y: X
//) h8 F; Q3 l0 _1 \, A5 D" w6 o/ c
socket.addEventListener('open',function(){
6 m0 U' x- I0 C/ ~6 a! v' \
socket.send('Hello Server! Im live.html');. V1 r4 Q( V" z H$ L: g% r' w0 n
});% [; E8 J! _# v1 j+ k1 ^
// Listen for messages1 W/ N6 Q0 s8 A
socket.addEventListener('message', function (event) {/ ^* V5 k: K. w
//图片地址% s0 a" ^& S7 Y! P2 \
img.src = event.data;
4 r. r/ F0 z$ _9 ~1 k% E4 j M4 m9 Y
});
* N4 S7 G# C0 f& G9 c5 a, I

复制代码

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

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

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