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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); t6 K: T7 A* n( }- R! L+ q
//创建socket服务
7 ^" F7 N: R. y' i$ f$ x1 t+ X
$ws = new swoole_websocket_server("0.0.0.0", 9502);. H9 y& ^; K q [# c# ?
//监听WebSocket连接打开事件
! w, ]5 b4 j4 n' E! G2 c
$ws->on('open', function ($ws, $request) {
5 i2 d( o: X6 p; }2 Y0 @
var_dump($request->fd, $request->get, $request->server);& \! O1 g% B6 T" P) R' a
$ws->push($request->fd, "hello, welcome\n");# _" B; ^& n- }: g; X
});
4 a( S, U" y2 P4 R
2 ]7 V: N# C. h
//监听WebSocket消息事件
9 n8 i" U3 G- s, \. }
$ws->on('message', function ($ws, $frame) {
4 o8 e( @ N2 u- u, K0 A( s
//推送消息给所有用户
" ]- J$ D$ N! w. S. ?, D" o! J
foreach($ws->connections as $fd){! e/ H" n; d" c
$ws->push($fd, $frame->data);0 }5 }+ n* E. i* ?- ? t
}
) ~2 p! ?: y# ]6 @& r" R. L* g
});3 G1 [8 ?0 l( e( ?
, x9 w3 f; x5 {) h1 T* h
//监听WebSocket连接关闭事件 T! s1 M. b; Z" c% L
$ws->on('close', function ($ws, $fd) {
% n! ` b- K* c7 v
echo "client-{$fd} is closed\n";
2 Z9 c5 _ r! r! f& _
});9 v7 h% I( P% J# `6 O
//启动服务
5 R* b V, [5 U) U4 U& `/ n
$ws->start();/ l2 n/ r% [! j$ ?
3 ^ B) {5 {* o3 G* P7 O( S' R: o

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器' s/ G' p3 I8 k) i
const socket = new WebSocket('ws://lm.com:9502');
+ N: F- N7 x" y" e) f# D7 r1 b8 }
//Connection opened
6 I; I( H) v6 n+ l5 G0 [
socket.addEventListener('open', function (event) {
- Z; }7 ?! n9 w
//发送消息给服务器1 {& @# P+ A& n4 c1 E! \' Q$ K$ Y [
socket.send('Hello Server! im websockt');9 t7 k1 X k5 s N6 A7 R, Z
});
4 e- u4 q/ K( M* ~ e
// Listen for messages) @% K$ e0 ~2 J& W# S2 g- E! j
socket.addEventListener('message', function (event) {+ a- h8 t9 b$ _( e' g: _+ q
//接收服务器返回信息* y% o# H2 r3 w2 }$ @$ T
console.log('Message from server ', event.data);. X7 R$ s5 K- h: y4 x
});
! u9 y: n2 A. _& U% e0 V
1 f5 u6 }# X1 I' n6 [

复制代码

伪直播主播页面

html

<body>
% j5 S2 [, o/ M. U |% m. b
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
% T" g- i, V7 m4 ?) R( T2 q
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">3 t2 |( m2 @& p# q) l7 q
画布
9 y, ~- w" {9 l ^: u
</canvas>+ m4 t& y3 I" i1 d2 f k t; F6 D
<img src="" id="videoImage" width="350" height="700">
0 m" T/ L& W: v5 b$ e; Z3 p$ O
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
& k' i4 V0 o& ]/ b5 U
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>1 {- L& z4 i% T
</body> V* t" M: |$ k; g& N4 X

复制代码

javascript

var v = document.getElementById("myVideo");
$ [6 l; K8 Z( s" k7 T- u' q
var c = document.getElementById("myCanvas");4 U6 c; d: a9 m9 U# v2 g d% G
// var c = document.createElement("canvas");, l, g- S8 e6 |- u# l4 [ [$ b" s
var img = document.getElementById("videoImage");
6 V- D& W! a2 Y* h6 M1 V3 o. P/ G
ctx = c.getContext('2d');; t. I4 p4 M* b' Y
var dataUrl;
( g; D: C! z7 f- ~+ l
const socket = new WebSocket('ws://xxxx.com:9502');3 N# h5 L0 o0 ~4 \9 _( M: V" u5 D
//Connection opened
5 B7 O" B6 G: C# M# T- Y: }
socket.addEventListener('open', function (event) {
" h: |$ I" A$ @$ J/ Q$ Y9 L9 W" w
// socket.send('Hello Server! im websockt');
e! D( ?2 B5 q9 {. X
});3 y. N: b8 f6 H* I& M& l( v' i0 l
// Listen for messages; ` |: n7 W) S
socket.addEventListener('message', function (event) {
l' R/ u, a- z. \
console.log('Message from server ', event.data);
( o: E: V- |/ e0 O, L. x1 ]3 p3 {. y
img.src = event.data;7 }4 A% l$ _5 t, @
});
6 d4 E4 {! ^% C) p% Y
3 d6 J6 I) A) _7 f
function playVideo() {
- ?* ?( w2 J0 s" c5 g$ p
ctx.drawImage(v, 0, 0, 350, 700);2 D' `2 D& ~6 c% R6 r
dataUrl = c.toDataURL("image/png");0 ]1 h# \9 q4 e5 f
// img.src = dataUrl;
2 C! x4 j! r4 M$ D9 e' S0 g
socket.send(dataUrl);
# n- G( Y* R o/ e" R: k) e
}
, n: F: c6 o# c9 l9 `3 Y# c4 j
var tick;. T [: w0 H5 N
function aphla() {
: y5 ]6 ^. z% d7 j9 l5 T
tick = setInterval(function () {( q- |* j, \' r* O& d# Q
playVideo();
: w: m, V7 V; b% t: S2 Z N
}, 1);
2 y) f/ g" e H0 U8 L, n
}: H% P; w7 ^7 {: M
function vdStop() {
# B& M, Q. M' Q
clearInterval(tick);- e0 Q6 [1 |# L0 Z
}
6 v/ n% T7 U1 d" Y( e6 D8 G. L

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");# [# y9 j a) t( h/ G$ l& Y
const socket = new WebSocket("ws://lm.com:9502");
; n* K3 n+ U1 O% F+ b
//6 ?% W4 W/ k8 m6 g# k3 b6 A! A" R
socket.addEventListener('open',function(){3 g% ^9 y( W7 m4 V& N* V+ `* E
socket.send('Hello Server! Im live.html');
4 L; H- x, q2 R( b# g' J q
});
+ | L1 v9 B t2 m# _- o8 L& k; Z
// Listen for messages
4 q9 y! W* h* @$ l e$ a
socket.addEventListener('message', function (event) {
" }4 V0 a$ s# T/ j
//图片地址7 v2 f- k5 S5 d9 ^
img.src = event.data;; ^1 A( c3 P4 g9 q# O: C" t5 y9 \
});
/ @+ P0 P4 Y t1 z9 p: b

复制代码

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

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

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