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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 4 r q, r9 ^; v) F/ r
//创建socket服务
; M& ^" T+ F: J5 X
$ws = new swoole_websocket_server("0.0.0.0", 9502);+ Z5 Z7 w* K% p
//监听WebSocket连接打开事件
- D5 A1 o0 n+ X/ x0 E; \% m7 C
$ws->on('open', function ($ws, $request) {5 p& J- s* _6 s8 c; A
var_dump($request->fd, $request->get, $request->server);
, P8 m' U! l P. @3 m
$ws->push($request->fd, "hello, welcome\n");
- ? R. x% I% d) j$ K" l2 T
});
. `) P9 p, V/ m7 z" e+ r; o0 D
! P" E! v% m, _) _/ I. {1 X D
//监听WebSocket消息事件! u2 b6 z; o( @. E9 V9 R
$ws->on('message', function ($ws, $frame) {
6 G4 E2 c. N. Q5 ^4 O7 a& J
//推送消息给所有用户
/ I( v* ]& D6 T& K i
foreach($ws->connections as $fd){
$ E8 a! j# J' p& g! F8 y& r0 W5 a
$ws->push($fd, $frame->data);3 r: J6 R, f& l8 Z! U& [
}
. A* o; l8 C) v8 u* Z7 t5 m" |
});
2 _$ X" C& I3 L: p0 E$ f3 y
- }2 I" `2 m9 g, Y# G1 |
//监听WebSocket连接关闭事件
* ~0 N$ f* G8 M L4 Q
$ws->on('close', function ($ws, $fd) {) k% @5 A ?2 D# U: q6 N
echo "client-{$fd} is closed\n";
4 ^# z/ `6 s8 V' T1 X+ E b
});+ z# {% V A6 u' y. a
//启动服务# |1 O# o/ i* P$ D% q' }2 K
$ws->start();" q) `! ~8 e7 `; N% U) w$ F
' ]8 y) ?5 N3 w( ?

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器% e4 S! a: U' V: F% {8 o& I& n
const socket = new WebSocket('ws://lm.com:9502');
_4 ]& l" g* P) a
//Connection opened+ d4 _" W+ e; H; T: c
socket.addEventListener('open', function (event) {: z# z- F4 b' G% y' _' B9 s
//发送消息给服务器
9 y- M4 M X5 l3 f& {3 p7 u
socket.send('Hello Server! im websockt');
( t8 T3 K% _4 s7 X
});* h0 y1 L' u9 ~1 }2 v9 r6 G
// Listen for messages; W% w: x; J( N
socket.addEventListener('message', function (event) {
1 H1 S3 X- g1 O$ ?
//接收服务器返回信息
% v. S$ k/ M6 r* m: S
console.log('Message from server ', event.data);: o: p1 o7 p d( d- j
});( q ]) B/ C+ H+ k4 h, g4 A+ Q
) j7 u6 J& _ z. \+ J) J! `" ^

复制代码

伪直播主播页面

html

<body>
: A, B! z3 q. E8 D( U
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
2 q+ F( \5 z, V; ~
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
1 L! |7 l% p% L3 x! {
画布
* I) {, Z1 r: P9 t
</canvas>
* ~ m4 r {% \! g' i: b2 i
<img src="" id="videoImage" width="350" height="700">
% @1 L2 ?) Z% G& Y. c* N5 z6 b$ I
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
3 V- x: y5 {$ m" ^0 G3 _
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
$ V+ v6 X- F G$ U
</body>0 m& O+ N3 ]' \7 p: A: Y! F

复制代码

javascript

var v = document.getElementById("myVideo");
- ~" N1 b( ^+ t+ N! R: k- e
var c = document.getElementById("myCanvas");- J6 N5 ~3 g4 h8 j7 g- V+ D
// var c = document.createElement("canvas");) c4 k" {% W! W& W
var img = document.getElementById("videoImage");3 v6 q N8 R" z/ j1 j
ctx = c.getContext('2d');- |" Z9 |9 a( O. z; V, U' R( {
var dataUrl;" T5 M3 d1 K8 l6 T
const socket = new WebSocket('ws://xxxx.com:9502');$ a+ a1 u, s; t+ n! L6 O* e2 K
//Connection opened) \4 {1 ~# ]! A* u
socket.addEventListener('open', function (event) {
8 {6 g+ U" x+ \4 e2 b: S+ R
// socket.send('Hello Server! im websockt');
5 F+ x8 r" `$ D R
});
" b* Y( o! R2 ^5 Q, `/ l0 j
// Listen for messages
' h2 M( u. E% A" m
socket.addEventListener('message', function (event) {
/ q3 A" S! J5 }8 R+ N5 ]4 t0 t# Z0 Y
console.log('Message from server ', event.data);
' {' z5 _3 y; e- m- m5 ]
img.src = event.data;
- c, {) V. |/ G4 K# t- }, x
});
! ~. N3 Y f6 z) B0 C
! P' S6 v, f. e, ~: ~5 i
function playVideo() {, c% U" O' H6 T
ctx.drawImage(v, 0, 0, 350, 700);6 W, L: F- w- O% y7 a9 X
dataUrl = c.toDataURL("image/png");
. S+ J' n5 B- {' C) n; ?$ F* S/ {* w
// img.src = dataUrl;
# W/ L9 b+ y: Z
socket.send(dataUrl);
~; c1 T! r7 p, Q1 Q: s/ M
}+ G$ A5 U8 c. H& L6 _& u$ }; I
var tick;7 J/ Y* H! H: u! ~ E. i
function aphla() {
* X7 U2 w9 n5 Y' i: o1 |8 A6 }
tick = setInterval(function () {) n0 }; T; y4 R' M3 q
playVideo(); q, q' i S& ^" k
}, 1);
" b) y2 z* i! Z l
}
; g4 w: Q% h8 Z, _% \( l1 \+ ]# C. \
function vdStop() {; S3 ~% p( l( v) B: ]+ F
clearInterval(tick);* z2 V+ o w; C. b1 S% |
}! B( y j' b- d, c

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
# F3 Z0 S! C2 L H% s2 z
const socket = new WebSocket("ws://lm.com:9502");
, Q/ j a( O; Z [4 X
//7 c, q0 p" X3 L2 @5 v
socket.addEventListener('open',function(){+ d# Y! K- ~, O* |8 u( W
socket.send('Hello Server! Im live.html');6 t! ^) |, O1 y8 n, A! X) l
});8 B* u! U8 y# [
// Listen for messages4 e) n' j, f2 E; _% l
socket.addEventListener('message', function (event) { x9 m, F# x4 E# q6 Q
//图片地址
0 T) F# ], a7 m; ]
img.src = event.data;! D1 y+ ^) ?" e8 K3 A* ?: Y
});& |9 H, }( U# A) B0 i* z3 \5 A

复制代码

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

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

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

浏览过的版块