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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
1 C! w% t& Q" w8 Z I
//创建socket服务
3 m+ x. y, j. b% G) D6 J% a+ ]9 N
$ws = new swoole_websocket_server("0.0.0.0", 9502);
5 ?/ d5 U% K7 o! ?: B8 D
//监听WebSocket连接打开事件! ~" ^& Z4 y! s8 F3 b
$ws->on('open', function ($ws, $request) {
& Q7 U6 N5 A; e4 P* m
var_dump($request->fd, $request->get, $request->server);
7 m j" ~8 |8 |- y
$ws->push($request->fd, "hello, welcome\n");# g1 q& N4 B: q
});# w# l" U- R9 |4 B7 ?3 i% A0 \( z
, y i$ I* W: [, _1 |# ?! K
//监听WebSocket消息事件, V% w# M0 J1 X2 e2 l
$ws->on('message', function ($ws, $frame) {
& Y. n7 L3 f6 n. z! `2 k; o
//推送消息给所有用户7 H$ ]) a5 E0 ^" ^; W
foreach($ws->connections as $fd){
5 G8 ?* i1 g- i- {: C9 |9 O- l/ f4 p
$ws->push($fd, $frame->data); d0 |* g8 p8 E
}0 E; U( |3 W& d Y" |* S% G3 y
});. d& i, z( U9 M% g6 I, S9 q3 j1 H$ i
$ h4 t- d" Z6 t# k0 K& {1 V0 U
//监听WebSocket连接关闭事件
; Y8 V$ q7 m8 K
$ws->on('close', function ($ws, $fd) {- v) R9 ?, x& w$ ~
echo "client-{$fd} is closed\n";9 D5 h- U. I9 r" n; ^; |' _
}); r5 }) b1 T. [4 }" s* H t- F2 B
//启动服务9 ^, t9 n) r) o% s/ p! T
$ws->start();% \( V+ l' o+ N
6 E3 R/ o% x9 W0 q. Q: X- b9 j9 h. M

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
9 \; _+ R- c7 H- k$ Z# e
const socket = new WebSocket('ws://lm.com:9502');% F- ^7 D X8 B4 x
//Connection opened
0 x# W+ f" r' J* b! t
socket.addEventListener('open', function (event) {: Q( h& O3 _& j
//发送消息给服务器
% w9 i& f$ `; v( \+ N
socket.send('Hello Server! im websockt');2 N: r* V, A. f" p& R6 f
});" }5 F5 {& a+ q N, K! I
// Listen for messages
; Y4 x; o5 q3 i: t, H1 b
socket.addEventListener('message', function (event) {4 @# x/ c9 a: N, d3 |0 P
//接收服务器返回信息
! E' f4 P. R7 U8 B. q. j
console.log('Message from server ', event.data);; m9 t3 \; z- o- u& U' Q {
});2 f# v$ [& m& ?* y( f
+ j6 ^) Q/ \9 `) S) J6 y

复制代码

伪直播主播页面

html

<body>
& a: {8 {$ f# n/ p1 p8 M) c9 n
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>" I3 m+ Q% g/ M3 w/ B* v
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
& r5 v/ A& Q) v% K
画布
2 L9 N4 s% {. h( V! s' c
</canvas>" N+ r" V& p! O! A. _
<img src="" id="videoImage" width="350" height="700">
& G% d- Q* V Y- k: A
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
, q( P: L9 o& x: F: T7 p1 j
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>/ m& s% Y3 D" ?* L) x" \
</body>
1 g3 N) j: Q0 H3 e

复制代码

javascript

var v = document.getElementById("myVideo");
+ i4 z- U+ {: C( ^, t
var c = document.getElementById("myCanvas");
* s( g: `* K7 T/ G1 h/ y
// var c = document.createElement("canvas");3 r2 b. Q5 Z" D* h6 v% t9 Z
var img = document.getElementById("videoImage");
& D1 m q2 |$ M6 z
ctx = c.getContext('2d');7 H$ _, a) @9 ?2 T- d0 M" o
var dataUrl;7 H: |8 X* U0 w9 `4 v8 r. t
const socket = new WebSocket('ws://xxxx.com:9502');
: Z* s0 _* q8 N) z' G
//Connection opened) K6 |5 H$ `! N* N
socket.addEventListener('open', function (event) {
1 x( ~" h, L4 p2 C" M( A
// socket.send('Hello Server! im websockt');
* U& ~1 \/ a: m* L; U3 H4 `5 g
});
* u, p2 P& {- Q% S7 X k, I9 B
// Listen for messages
3 G: d4 m) h+ c6 I# b5 O
socket.addEventListener('message', function (event) {
* r& d0 r. A7 _ a( C
console.log('Message from server ', event.data);
( I( z3 ]5 [4 l0 l0 w& v1 z1 R+ `
img.src = event.data;
; [4 Z6 g9 u5 A
});
! z' I% i4 \4 p0 g3 a
- V+ x6 [1 J. u* c G
function playVideo() {
* d' c6 e4 e" R6 b5 L
ctx.drawImage(v, 0, 0, 350, 700);
$ u- {7 r6 g1 t$ H/ J( x! M
dataUrl = c.toDataURL("image/png");8 R$ [- N0 ?$ n$ ?
// img.src = dataUrl;, @! l- r; ]$ o$ g2 U y
socket.send(dataUrl);7 C& v' y1 L4 {6 z9 O
}
& D0 l1 W3 x6 z6 H
var tick;
' o$ Q$ k1 B# |8 X+ n" o7 r- t
function aphla() {
: P9 U/ Q; }5 ]3 S7 i
tick = setInterval(function () {
) {( Q0 `. e5 N- R# m3 e
playVideo();2 t* W# u n4 I7 d1 G- T( ^5 p
}, 1);
: y& }1 \% O& q+ h' Z
}
+ G. P, r4 ]5 V' g% G, O! r# [1 ^
function vdStop() {! n2 N6 T6 y% Z. M _
clearInterval(tick);
- g1 R1 s# S+ D7 p: ^
}
- F; o* ?! {. S! x* m

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");% E% E$ K2 v3 \9 u% ?4 T: |
const socket = new WebSocket("ws://lm.com:9502");# f4 j# a# v9 ^( d+ l
//$ x: {' [+ m6 k# r/ B1 w K/ B
socket.addEventListener('open',function(){* Z2 J: f% |/ X6 h9 c( T: I. ^2 t
socket.send('Hello Server! Im live.html');
4 T3 ?2 ?2 L: T9 Q; L8 [* g
});- R: S- z2 x$ c' g
// Listen for messages
3 f. Q' b, R( x
socket.addEventListener('message', function (event) {
//图片地址* P/ A) @: T9 T- m) \& z# W, O8 H
img.src = event.data;# \+ U v1 g" k; S4 N6 d
});
/ n k+ L" X7 W* w5 L) E# u

复制代码

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

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

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

浏览过的版块