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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); , C$ B3 b8 p* q2 U) h1 v, D; y& o2 d
//创建socket服务
8 ^8 f( ]: w5 G( R( V7 i3 r
$ws = new swoole_websocket_server("0.0.0.0", 9502);7 k. n, k2 J( \" Q1 _
//监听WebSocket连接打开事件
Q! n% Y- m9 u9 U* S4 F; x- m
$ws->on('open', function ($ws, $request) {
5 l3 h0 f* j) w0 V/ g0 ?
var_dump($request->fd, $request->get, $request->server);
# {3 i9 [; n5 ^! P8 F. i/ B/ b
$ws->push($request->fd, "hello, welcome\n");) U1 h2 h- U) Z5 }0 Z8 H Y0 L' N
});
8 ]" P, O. B/ R' M" E# E- {+ C2 w1 J
4 O9 l+ ~6 u0 l2 Q% n8 M
//监听WebSocket消息事件
& h! B' D S7 g0 B) o' G
$ws->on('message', function ($ws, $frame) {
//推送消息给所有用户
4 V. o8 L+ c3 ?9 y, Z1 ?2 B
foreach($ws->connections as $fd){; P, d' g5 a Y2 m
$ws->push($fd, $frame->data);
& q# k2 m# p# l6 d) r+ Q/ M& O P
}
7 b! ?/ C9 |" ^, |
});
/ E2 _* M, r( l" s2 A
- r9 V9 f9 l" R5 r5 |
//监听WebSocket连接关闭事件
7 N1 F! ]6 b9 _2 M: J" T
$ws->on('close', function ($ws, $fd) {; \1 k7 A0 I7 k% K' U" W2 K( O. S
echo "client-{$fd} is closed\n";$ p1 ]& u, P1 C* b2 C) T, |9 f
});
& g1 Z/ d- x3 O' v7 i
//启动服务. H, A9 L6 I) G; \& M$ b+ |6 @
$ws->start();
) X n+ K! t2 j& I" x# V
0 F4 l2 f% \6 a7 {' N

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器$ ?1 v8 ]0 z9 N2 Q3 o3 L: e
const socket = new WebSocket('ws://lm.com:9502');% p: k0 f' q- r$ m
//Connection opened4 P: Q, w3 y6 |) V2 [
socket.addEventListener('open', function (event) {2 S2 c- j' r2 j) C
//发送消息给服务器
& w: {& h$ t/ B1 u, s
socket.send('Hello Server! im websockt'); }8 K1 Z# t6 M) P" Y
});: \4 w/ O! k& y
// Listen for messages7 y) X# ], F& ]( {1 f- V5 Z0 [
socket.addEventListener('message', function (event) {
( I. D, |9 R3 _$ I: J, k
//接收服务器返回信息
! G5 u' d# ]8 U# ~) o. g
console.log('Message from server ', event.data);$ R* r/ V9 \& t# M
});4 ~$ n* g6 b" `8 R. t8 V$ I
7 X/ E; M9 B- e0 g* Q5 Q& x9 `9 U; a

复制代码

伪直播主播页面

html

<body>
* E, \4 ]2 V( w7 S/ S
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
" H! w' x( G/ w8 O5 Q
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
' e0 j* P/ `% d( V6 G
画布
) c! v7 F& ]; T+ Z& S- j/ P c
</canvas>2 m7 N t3 p) m7 T
<img src="" id="videoImage" width="350" height="700">4 b# p" c6 C7 S9 Z" i. C
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>: |% \: m5 D+ ^
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
7 L Z$ W0 l' A! N& j
</body>- H8 N* T0 ~% ^1 Y6 B. i; j- f

复制代码

javascript

var v = document.getElementById("myVideo");" E/ _& |( O% J/ d0 i" H! g: Z, c2 t6 ?
var c = document.getElementById("myCanvas");
X2 H7 G& `* t% ^. m! J/ ^
// var c = document.createElement("canvas");1 b7 F9 A0 i1 Q1 A) [% K+ k
var img = document.getElementById("videoImage");
0 `, Y5 Y, i* ?
ctx = c.getContext('2d');4 {5 Q7 H! M- ^0 Q& y% v
var dataUrl;, v9 ~( X9 f( `" a8 y& w3 ]8 E2 T% ^
const socket = new WebSocket('ws://xxxx.com:9502');
0 y! G$ t+ ]1 M3 o$ p
//Connection opened
( W9 N$ M3 {8 g
socket.addEventListener('open', function (event) {% `! Y; D7 q& \' A
// socket.send('Hello Server! im websockt');/ X8 o2 B) s& K( }" e3 R
});
4 I# F5 U( X: f3 l* r
// Listen for messages/ }! h5 t( d- f- B
socket.addEventListener('message', function (event) {' `0 ?0 m- m( R z
console.log('Message from server ', event.data);( p" R }1 f' D# _
img.src = event.data;
% T1 ~/ A5 L; a4 M
});2 ^' T, g) U8 g6 I, f' W
; G# O: I7 h4 f" g, |, u
function playVideo() {+ K t, N) X! f" ~3 q+ V ?
ctx.drawImage(v, 0, 0, 350, 700);
3 O- G* x9 u! }8 P3 t8 o( c
dataUrl = c.toDataURL("image/png");# r: J' N/ h! ~/ p0 y, k# s6 b
// img.src = dataUrl;6 ]1 X$ j+ V/ B0 N2 t; f! \
socket.send(dataUrl);4 r8 t! V% Q4 Y0 G( Q6 \
}
3 p, x0 m; U7 e6 I3 A
var tick;
# O0 B$ }+ w* E% b; u, k, d% o
function aphla() {8 L* N7 q, c5 f" N" M! ` u
tick = setInterval(function () {
. E, E( v9 j4 E8 h1 `& `7 w
playVideo();
$ ?1 b* c# X" w! ]' { w8 k4 }
}, 1); x; ~3 M& s& g \+ U/ Y0 S
}
' G( B& |' R5 X" p
function vdStop() {- }. ~ C3 O/ w4 y7 l, @7 R
clearInterval(tick);
; S3 m6 u, U* d2 F+ y# a2 u' T
}
o* H( j+ H' v: N6 X: {

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");( i, O, C: D7 }" }" B
const socket = new WebSocket("ws://lm.com:9502");- \' w8 t+ p( z3 f; b9 R1 C( R" u$ X
//4 b$ W% C1 ~- C/ a T/ w
socket.addEventListener('open',function(){
_3 Z. u+ d+ V% z L0 |
socket.send('Hello Server! Im live.html');
6 L A- y9 b: M" g& M1 N% M9 |, m
});
2 f8 }: L" h3 Q: r
// Listen for messages: V) N( t: v* B7 A
socket.addEventListener('message', function (event) {
8 {# S- g- @! k+ Q* s8 P6 \
//图片地址7 t& S# O4 b1 [ U$ g9 `
img.src = event.data;
& d; n! m1 Z9 m
});4 l/ q1 R+ L! [& O6 v! W8 I

复制代码

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

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

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

浏览过的版块