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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 4 a; X) O8 j2 T! Y8 V
//创建socket服务
3 `6 |+ N# r* ]3 ~# U$ o9 E8 e* Y
$ws = new swoole_websocket_server("0.0.0.0", 9502);/ W$ H0 \, @0 ]. N$ ^9 t U5 J
//监听WebSocket连接打开事件
" U/ O6 @9 D. ?1 X/ F
$ws->on('open', function ($ws, $request) {' Q* W' Z2 q& K
var_dump($request->fd, $request->get, $request->server);$ L: \) g. {/ J n" }
$ws->push($request->fd, "hello, welcome\n");# b* [+ W6 u/ U7 j" @
});- |! a7 q; w" F) u
1 b! ^; U' A# e4 a% T% a6 Z+ ]' O
//监听WebSocket消息事件: r: f, L0 e6 F5 S
$ws->on('message', function ($ws, $frame) {) _3 b, O2 Y0 |( G
//推送消息给所有用户) Q0 r( X& E: K9 L9 C# O
foreach($ws->connections as $fd){
: Y, ]& t- O1 v/ {1 R/ f1 k& k6 `
$ws->push($fd, $frame->data);- `& E" H6 f( {0 M6 I' Z$ {2 m
}- _8 a; x. n' N2 w8 d1 Q
});4 X2 P( z7 B" Y/ E; _% a8 j
- Q; ?4 z5 R+ a9 J
//监听WebSocket连接关闭事件) Z+ R2 _/ G9 t- C; S; W8 v
$ws->on('close', function ($ws, $fd) {9 ?9 s, V3 Q: _* N' s9 k% w4 |
echo "client-{$fd} is closed\n";8 {8 r6 \1 ]8 R0 v0 O, ?
});& W8 h( @1 }0 ^% K
//启动服务( P$ R0 R8 k7 i, a
$ws->start();; y W4 v6 h! x% N1 C/ _
/ e6 b: v+ k9 Y X$ `

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
3 o; s' Q6 s$ Q/ x) i1 t: q ~ ?
const socket = new WebSocket('ws://lm.com:9502');
! S/ N" D& h; p. w$ c, L+ c
//Connection opened9 u( V" p& P0 ?4 A( G
socket.addEventListener('open', function (event) {- a+ A; m# M, ]0 m" J* G9 e
//发送消息给服务器
: i! B( [) G4 h2 p5 \. S3 z) T
socket.send('Hello Server! im websockt');
6 ~; I& I5 a5 |0 C
});
3 }" V. F9 ]) l; Y
// Listen for messages0 h/ v0 v0 u8 w9 X
socket.addEventListener('message', function (event) {
6 ^! I S6 y" P7 Y- \! R7 D
//接收服务器返回信息
3 j- l+ T# g3 J; C; F- A
console.log('Message from server ', event.data);
! j7 \) b2 ^* s% b. ]
});/ S9 b8 r. W9 J
0 Z$ a. M7 z2 L

复制代码

伪直播主播页面

html

<body>3 G; @- x5 T7 d: x4 b. A2 Q3 P! K4 l
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>% o8 n; Y' J; o
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
! `; F2 ~8 A9 O
画布
, p+ v% u0 k7 p2 P0 c
</canvas>) H2 `: i6 E8 H2 S' i
<img src="" id="videoImage" width="350" height="700">2 d+ C" C& a& X; L" p3 q
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>; k! i4 n& a. G% q* G. |3 H* I' Z
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>6 _) L3 s( g! ^4 N3 A$ F
</body>$ H4 p* q& i5 r4 U; u8 t% t2 m

复制代码

javascript

var v = document.getElementById("myVideo");$ E; s, U$ L9 g! |9 l$ o2 u1 }
var c = document.getElementById("myCanvas");
$ E, e! `5 d) d% Q" d* ?+ z
// var c = document.createElement("canvas");
4 y% j3 Q5 |. C9 K) r+ e+ z
var img = document.getElementById("videoImage");8 E2 s2 t+ L2 T$ M9 s" P
ctx = c.getContext('2d');8 I8 z3 I) V% U* A. Y$ [; ^( ^
var dataUrl;& ?0 O% R5 }4 b( ~0 U" h
const socket = new WebSocket('ws://xxxx.com:9502');
4 \; z- N; A& k% Z
//Connection opened1 |6 z: S; g! L8 j8 `5 m3 K
socket.addEventListener('open', function (event) {
# [& a- [/ a5 J) c
// socket.send('Hello Server! im websockt');) x, N1 D, W) i
});% J4 c& W, R7 Q
// Listen for messages
( ^9 }5 s0 g) w" s+ a
socket.addEventListener('message', function (event) {% K7 a9 @+ e* n& k' T4 X% L
console.log('Message from server ', event.data);; Q1 u' E) W; s
img.src = event.data;- D3 q) F5 r% b) A
});
$ K) A) E" n' t# e
* n1 s, p* D: W/ h
function playVideo() {
& E' T! ]* L' D. u# A
ctx.drawImage(v, 0, 0, 350, 700);+ w2 F2 d% q: |/ u& d: U
dataUrl = c.toDataURL("image/png");
) K6 _' I( k: t
// img.src = dataUrl;
7 \: X* n8 r$ N! y. k1 p
socket.send(dataUrl);
' M( [& G+ ~% e) q0 b1 }2 |
}# s" g7 h# A1 a) r( C' T
var tick;
- {. R- b; @% v! A2 y
function aphla() {$ z+ k q2 z; ?3 N' a9 I
tick = setInterval(function () {
H! J, E" H1 Z" B! W4 k2 j9 P
playVideo();/ N& t: a) \7 j% A$ ~. |
}, 1);* [5 y/ k1 s% ]- d# |; F
}
* t/ x6 F/ z* B( B2 m; z) q/ l2 W
function vdStop() {
6 X1 r! ?! A; |- s2 P. w- Z
clearInterval(tick);" V9 n# _- V* v4 J% p( H3 j ^
}, M' s8 A2 @- v$ ~; w

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");' p/ y5 S5 P% Z n: l, {- [
const socket = new WebSocket("ws://lm.com:9502");
4 z7 b7 y/ Z, [0 k6 O" r
//
+ b3 r, y9 e$ v4 i/ d/ U- o
socket.addEventListener('open',function(){. i( Z" K+ v2 E3 _+ K* W ]& p
socket.send('Hello Server! Im live.html');
w3 f' d+ n. b) O0 ?
});
5 X B% H% ~1 C
// Listen for messages
0 X G9 U1 h/ z7 V/ ^; b
socket.addEventListener('message', function (event) {" Z C, e0 A# H. R7 y4 `
//图片地址
2 k* K8 A/ T4 _7 [6 }: J5 y b
img.src = event.data;
4 t1 z9 T l7 a/ Z
});: N* K0 s8 H$ z/ O9 Q

复制代码

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

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

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