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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); ! _* ]& W. V. ^6 e% e; `2 b- t8 Q' Y
//创建socket服务
: _# Y/ u5 b% U% F) v
$ws = new swoole_websocket_server("0.0.0.0", 9502);2 l% C' w# t1 r' R' G3 p3 ?
//监听WebSocket连接打开事件
2 N0 B; m- D0 f8 e
$ws->on('open', function ($ws, $request) {, J* O f4 c- x( m W1 e
var_dump($request->fd, $request->get, $request->server);* q6 [3 m( b- D5 U2 ^
$ws->push($request->fd, "hello, welcome\n");6 a6 C' o0 G. W9 B8 z3 A2 ]
});! U' y, V5 w, y7 [" o
- {( K v @6 }7 q6 n
//监听WebSocket消息事件
" L: t) Q6 o. b1 B
$ws->on('message', function ($ws, $frame) {. a9 U" w- k. t) t+ y; M
//推送消息给所有用户
# m7 I d" T W
foreach($ws->connections as $fd){1 P' R! o+ r; b3 c9 ^
$ws->push($fd, $frame->data);
( R2 P+ ]( ~# ~6 f" p. a
}
7 t0 e' j" e* z' a. y* g8 y" h
});
( l) T& r' _( }6 I+ ]
! p. H) p8 E1 h' q% U
//监听WebSocket连接关闭事件
$ e' R+ H2 r' I/ Z( ?6 o
$ws->on('close', function ($ws, $fd) {
* ^# R5 M* a% t: ~" s t
echo "client-{$fd} is closed\n";+ p1 [1 _) l9 v" ]2 p/ h' Y7 g
});. i( c$ m! s9 U. U! N7 `: j
//启动服务
, Z5 @; C \$ O3 N
$ws->start();
2 ^' {* S0 I" c) y& t, e
0 j8 r- E+ Y6 B; u

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
7 a+ Y" ^$ S6 j1 U, _- L
const socket = new WebSocket('ws://lm.com:9502');+ @2 O' B6 N! F; W
//Connection opened
6 i S: t( Q p
socket.addEventListener('open', function (event) {- O* E. H' q& r1 v- @
//发送消息给服务器0 P7 ]# |5 O! s& D; X: D3 g7 X! ^
socket.send('Hello Server! im websockt');7 u0 C0 e; V3 {$ Z! n$ C; Y
});& g% G i- |. o2 }% Q* A
// Listen for messages
$ V* K4 _' j+ O- P, V
socket.addEventListener('message', function (event) {
$ i0 S" U" D& u
//接收服务器返回信息
8 g& @2 w: y* v+ b. Z f2 s! E; h
console.log('Message from server ', event.data);" @8 q3 X0 x" P$ x- A! S
}); K/ N* I- g. L) T
9 d3 M; \: Y0 C0 a1 R b

复制代码

伪直播主播页面

html

<body>% z8 q( r/ ~. {
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
, t8 I# A2 ?* s, Z
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
( \5 w9 x. L# a! `. b9 ?- q% S
画布
; Y) h8 Y2 {2 p) S, Y
</canvas>: R* z* t* `$ o) O8 z
<img src="" id="videoImage" width="350" height="700">0 v3 e. t' D0 E) p
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>! ^( C% H0 U9 z& T$ A
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
: P4 U0 z, z) m) \/ M3 k, C. I
</body>
0 V1 F" [' v3 z, L) W

复制代码

javascript

var v = document.getElementById("myVideo");
9 b: ?( }8 y8 ]" y0 X8 o" r( G
var c = document.getElementById("myCanvas");# g w: c+ l- Y5 n% {( l
// var c = document.createElement("canvas");+ z* b2 H* E' q& S9 m ^
var img = document.getElementById("videoImage");/ ]0 O1 T' ?* m; U, n; M
ctx = c.getContext('2d');
+ U, m7 ^9 h ]3 n% |2 H! Z7 Z
var dataUrl;
" X! Y6 d/ r) O9 _+ n4 g+ j1 P
const socket = new WebSocket('ws://xxxx.com:9502');
& V+ x) I. r2 b$ R- t3 E
//Connection opened/ k. t! m1 U0 z6 I) t
socket.addEventListener('open', function (event) {; ?5 L& ]8 I8 L( c* d5 @- ~
// socket.send('Hello Server! im websockt');' C' m1 h) v0 B# N- }, r
});
9 H/ F- S( {& X+ Q
// Listen for messages
$ u1 D1 j% g# L% o( z# U1 _
socket.addEventListener('message', function (event) {
3 r0 N1 z' t% y3 ~. ~5 G$ n+ \; H
console.log('Message from server ', event.data);
! {% o7 `. Z; a
img.src = event.data;5 }+ B2 |% @2 U s
});( `2 U8 j* I! R# A! ~
2 {* B$ D, w+ ^3 M$ x
function playVideo() {7 [2 o7 ? f0 B3 M3 S
ctx.drawImage(v, 0, 0, 350, 700);" c9 g( I/ Y- \' D( R3 P; U
dataUrl = c.toDataURL("image/png");" M- l5 T0 ^" y6 Q$ j9 m z
// img.src = dataUrl; g3 t* a- ?- X8 _0 X2 @6 ~ k5 A2 s
socket.send(dataUrl);6 h9 y& M3 @( f5 l' P* K
}
0 Q% R1 F! n8 [) ]" j5 t0 G# f; U5 g
var tick;0 {; I6 M; Z4 W# J+ N+ e
function aphla() {8 N# W/ |5 n9 y6 F8 U7 T0 c
tick = setInterval(function () {+ V5 G, ]( [ N+ Z, E
playVideo();
: M+ V) y2 \' Z
}, 1);
. {$ ]" `: ^, a7 S9 y; e
}. T8 E f1 E. ?
function vdStop() {
8 d2 Q, M9 ~2 `
clearInterval(tick);' f( V2 E/ t S* r) Z8 t
}, Q7 v$ t% [) Y

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
5 ~$ ?! i9 ` [5 J
const socket = new WebSocket("ws://lm.com:9502");1 V F2 |+ c8 W: M. {
//4 g! {5 K3 E4 V9 x# {, O8 D6 `# V5 H5 |
socket.addEventListener('open',function(){ L* O7 s; i3 y# Q) S9 D
socket.send('Hello Server! Im live.html');
( Y7 [2 O7 v+ l2 |5 p" {+ N/ {
});
$ y8 C1 t2 C* ^
// Listen for messages/ E: @+ K( s; y2 p( v, `7 o! x
socket.addEventListener('message', function (event) {: ~, J8 N" T# f) {: t- R+ r, ^
//图片地址+ K% Y5 R; A5 [8 m0 }3 a
img.src = event.data;) S$ A2 e+ u3 S- Q! X6 m7 i
});. X4 D9 N# \" t

复制代码

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

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

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

浏览过的版块