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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 2 T$ U2 ?, f& D6 k- Y
//创建socket服务
2 U: K2 w! r& N
$ws = new swoole_websocket_server("0.0.0.0", 9502);
( g: h# n/ l, Y% X
//监听WebSocket连接打开事件4 o* t; L8 c0 u, \' Z
$ws->on('open', function ($ws, $request) {( W9 _6 _; c5 D6 n, g& Z
var_dump($request->fd, $request->get, $request->server);" r- c- b% {- z9 a
$ws->push($request->fd, "hello, welcome\n");
3 O' `: }5 Z+ u! c) e7 F. Y
});
' b( u: ~) x# R. U/ P @, h
, A7 c5 H+ k6 G& f3 O* G
//监听WebSocket消息事件
7 S3 U* b* r+ N
$ws->on('message', function ($ws, $frame) {
" \! e/ x1 |" B# n
//推送消息给所有用户
) O& e" @- ], f. v9 a% X
foreach($ws->connections as $fd){
& E( f+ ^- k% }# B! |, H
$ws->push($fd, $frame->data);, D9 u* z6 ^6 S: h M
}
$ V5 A5 O3 R0 h& S# \
});# r+ R+ t! s( B- u$ n
, K a2 s; e- J& R
//监听WebSocket连接关闭事件
8 }# S6 J# g+ o( {* \8 P! c
$ws->on('close', function ($ws, $fd) {
9 t0 w0 G! b! N% ]" F6 {
echo "client-{$fd} is closed\n";
% v- h( i6 M6 J1 u7 D- n* T$ L
});9 k3 J1 x3 T9 i* ~, ]" o
//启动服务. J: \# }0 e! ~1 ^ ?/ }
$ws->start();) R- P- l, b( {' g( B( |' j
& p" U# K* O( s# G

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器2 p* o0 G' V+ E/ w
const socket = new WebSocket('ws://lm.com:9502');
% u$ E9 x+ I$ z( o% z: @, `$ J
//Connection opened; K6 @8 X c9 X8 T
socket.addEventListener('open', function (event) {
9 J4 d. B0 ~" r7 W4 p
//发送消息给服务器
6 u; Y" A) r4 Q2 Z8 Y
socket.send('Hello Server! im websockt');; {5 o% D* q Q! y6 z) k1 E3 u2 S. U
});* ~0 e% ]" O2 L o* G
// Listen for messages8 f" v. ]; J" }% T2 j
socket.addEventListener('message', function (event) {
' N( q9 l- ]7 y% g8 `* c
//接收服务器返回信息/ R2 H2 Q" ^6 M/ ?
console.log('Message from server ', event.data);
x- {1 w6 D. E! A
});
7 g- `: o8 z$ S, \/ c4 G2 _$ x
0 \/ F+ u8 q+ j) p j F3 o3 }' W' S1 h

复制代码

伪直播主播页面

html

<body>
3 }! P# a8 o! T" f
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>4 y: G4 M5 W0 T% E, G
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">3 L% t) X6 W/ D# `: n. i$ N
画布
, z1 d6 b r, L; R
</canvas>
/ L& |( @- h& F) f. @3 l. e, ]$ U
<img src="" id="videoImage" width="350" height="700">3 m P# Q/ A1 l# b: N6 d
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
- I* z4 T5 v. a( C$ s$ R2 z. I! H, R, D
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>" K R: s7 G. |: A* W' P1 J8 h
</body>
. e0 h! t/ F8 b$ \. @! }$ f% S8 R

复制代码

javascript

var v = document.getElementById("myVideo");
3 {' }" @1 D7 ?' b/ D' O
var c = document.getElementById("myCanvas");9 w: j8 V2 v6 o2 n* J5 W
// var c = document.createElement("canvas");- i# }4 S6 j* u4 y' b8 P. A% d4 H2 ~
var img = document.getElementById("videoImage");
) q- ?/ r0 J9 p9 v" @8 g
ctx = c.getContext('2d');
7 E( y! `, Z3 V
var dataUrl;
5 A6 q' ~! }$ I' O% }) V( n" Y$ U N
const socket = new WebSocket('ws://xxxx.com:9502');( ~ c3 v) p* W1 j( [% N
//Connection opened
3 J& R2 m/ `' X3 \: U8 a
socket.addEventListener('open', function (event) {
/ V6 @4 ] d5 [* Q% U8 i
// socket.send('Hello Server! im websockt');
% b0 g6 h5 c# ~
});
) }. s7 f; h# M) z4 }" m$ u: r0 q
// Listen for messages
9 ?/ q6 S; s) |* n5 e* `1 D
socket.addEventListener('message', function (event) {
8 |6 [3 e; } K
console.log('Message from server ', event.data);
+ m* U4 ~. l$ h* }6 w& g
img.src = event.data;; ]! b5 A4 X# A- ^% H3 X, B
});0 Q S" r# M/ `/ `; w3 B
3 Y# D, O0 L' a# _2 j
function playVideo() {
, _* q& p# F. O
ctx.drawImage(v, 0, 0, 350, 700);
) \2 n2 G) v5 K
dataUrl = c.toDataURL("image/png");4 Y6 P' h2 }) t8 I W; q2 X* O
// img.src = dataUrl;
socket.send(dataUrl);
9 q) h _, U. J- u
}
+ h; K" o' A+ l1 s5 R+ s8 G6 h, y
var tick;0 E$ k- t |7 V. _ i# F \/ O2 |
function aphla() {
7 q. n( I, H- y" K9 _
tick = setInterval(function () {
0 u7 q' j S$ w# F3 c
playVideo();
; f! N' Y" u/ l. j: ]- J0 V
}, 1);
; D- A2 s! h" T6 R# ]
}) `- d( x) W6 \, |
function vdStop() {1 v# @* {& q! R+ p6 H0 O
clearInterval(tick);3 Q9 I$ W& a+ {. l
}* E& g5 [6 J( w1 {' l9 x$ V4 A( F

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");) N9 X0 g6 O' m9 V3 n9 C& f: F) C. z; V
const socket = new WebSocket("ws://lm.com:9502");# k9 ]! v! m. V8 }
//
, ]. f5 m" v: }4 u# O' J4 Y/ D
socket.addEventListener('open',function(){- Z, c$ {4 q2 l* N* l
socket.send('Hello Server! Im live.html');! V8 E8 J6 C% [; T3 \9 V8 c
});
2 l( V$ X, p, C+ A
// Listen for messages6 F+ B3 O, k# ~( |( i* A" w
socket.addEventListener('message', function (event) {
1 Z) u. F2 p+ |. s1 [& k `% W
//图片地址
+ Q$ j" P) k& e, c2 T) ?5 B
img.src = event.data;
) g7 X$ n v0 `; l8 N
});' H& y7 j( f" b4 M, U5 e

复制代码

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

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

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