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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
, A2 V2 J5 A8 h4 ~* { O1 E
//创建socket服务
+ M# O8 f8 u. g" h! J' H; @
$ws = new swoole_websocket_server("0.0.0.0", 9502);
' t6 o7 b+ z; \ X
//监听WebSocket连接打开事件% q8 p6 M* @# _, A
$ws->on('open', function ($ws, $request) {
# ^6 c7 N w, A# X' y
var_dump($request->fd, $request->get, $request->server);( D! _% l, Q2 N9 E
$ws->push($request->fd, "hello, welcome\n");- h% f1 Z: V$ t6 P% V
});* y% n) R" q, Y8 t
. |& e$ H& H. q! }
//监听WebSocket消息事件
+ H$ B, w, [% C; {7 {) @
$ws->on('message', function ($ws, $frame) {
: R1 F' [; \/ z# f* \! J
//推送消息给所有用户
2 i# j3 W/ [* Q* O: _8 b7 u
foreach($ws->connections as $fd){
! t) l+ u6 {$ @" o! O8 i z( R
$ws->push($fd, $frame->data);( f2 t: W; i6 X2 _* i4 q& a6 v
}# K; B$ U. z9 V0 ?- \/ \8 r4 V! K
});
/ U/ l/ p8 _* {& ~
' A3 i( T, o% ^
//监听WebSocket连接关闭事件
9 B' Y4 F+ w* w7 M* W8 f6 ^6 a
$ws->on('close', function ($ws, $fd) {! Q7 q" \0 b _) }$ S( M2 v
echo "client-{$fd} is closed\n";
7 M, r5 B2 ]8 ^! N# H3 Y W
});
- q. y' ~' w5 E% w
//启动服务
5 n- i" P5 I! X( x9 @
$ws->start();
( l# f5 B4 E v* y! @. V$ X) N5 H
9 \# ], V2 D8 }6 L6 e

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器: J- q- ^5 D K: t) e2 P: x
const socket = new WebSocket('ws://lm.com:9502');
9 ^; Z3 L$ \# \# i8 y8 g
//Connection opened
: d; Z9 ^8 A6 g) R+ T5 S
socket.addEventListener('open', function (event) {
1 O% [ [' W" \+ W; [
//发送消息给服务器
9 K# m0 C3 ]( U+ {
socket.send('Hello Server! im websockt');
' T% K! K7 O# g
});8 _) ]9 v: v4 J* z8 @/ B
// Listen for messages
5 i: z( w+ ]; m- L) b+ q
socket.addEventListener('message', function (event) {, L& V z2 b6 G3 w* v
//接收服务器返回信息
# I5 _; s* F, g$ f3 v
console.log('Message from server ', event.data);3 `! ]% A# j8 F7 X
});% ]- `, k% K* \0 [
9 A) W5 z- X6 E0 p

复制代码

伪直播主播页面

html

<body>
1 C1 Y2 R! e: j; a
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
# Z; a( F3 f# Y. X b9 v1 [% X
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">! T! S" L! ]* Z+ J& @) J# J" W
画布% w4 U; V6 k. L7 r, F
</canvas>
" h& v% U1 Y5 E! V- |% [, J
<img src="" id="videoImage" width="350" height="700">
4 l( Z1 B# M6 m, @& ^
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
1 ^5 O! f# i# ~6 x7 d% u" A9 @1 l: X) o
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
+ P& B( T$ i, v0 J- V, M
</body>
) X3 `5 Z+ d! g

复制代码

javascript

var v = document.getElementById("myVideo");
3 L% F( p. A+ D3 q: x
var c = document.getElementById("myCanvas");( m3 _: I3 L) v& O* {
// var c = document.createElement("canvas");
( ~2 k9 a8 n) k( J( i/ U& O
var img = document.getElementById("videoImage");
0 n: T+ G4 @# W, l1 }
ctx = c.getContext('2d');/ `) T# E- K/ ?1 |$ ?' T
var dataUrl;; }" g( e. s: X8 p- H, N9 k
const socket = new WebSocket('ws://xxxx.com:9502');
" s$ E6 l* o4 k3 G5 e
//Connection opened
8 ^4 M) \, }2 W- p
socket.addEventListener('open', function (event) {
: o) F5 N1 H" U7 f6 M
// socket.send('Hello Server! im websockt'); q5 \; v* r' X2 e* J* Z
});
I: j T1 z% Q3 ~- \) g, m2 N7 U
// Listen for messages0 J- l$ H' g+ F/ { v
socket.addEventListener('message', function (event) {
4 Z6 m6 F1 D! k
console.log('Message from server ', event.data);
5 L: ^. f" _) ?$ z) i; M2 a
img.src = event.data;! g4 `' J( {/ q6 h# E/ x1 e% p: g
});
6 x3 d: S0 r8 m( O/ m! z% N$ y
$ ]( n0 L. C: a; i
function playVideo() {* M: |6 V G" m' T
ctx.drawImage(v, 0, 0, 350, 700);
+ M, V. q# Q0 |/ Y A, G$ G
dataUrl = c.toDataURL("image/png");2 I" }3 `0 f1 x- B# a5 n! K* H) B
// img.src = dataUrl;( |+ v% G/ A% [
socket.send(dataUrl);9 r/ }4 P- Y5 V7 k7 h
}* y0 p+ b' |4 q) E: ~7 f8 P
var tick;9 t7 ]" f7 }: m# Z' W/ k# n. N
function aphla() {2 g" ?: u* b5 [; A$ ~8 M
tick = setInterval(function () {
+ r. @3 Q4 `3 p/ o T% F8 Y' T* n
playVideo();
9 q% U' _+ C" d- @& {7 I3 J
}, 1);
' o" k, j* _3 S& S- U
}: i! s7 R# u& {; |
function vdStop() {% d7 o) |) F/ s5 V4 |: ]2 Z
clearInterval(tick);
+ c/ @, n. g( }4 S8 b& h' ?
}
* B$ a. U' o/ y$ m

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");& B8 U. `: K* M- A
const socket = new WebSocket("ws://lm.com:9502");
, |5 b$ ]# ^/ K; s
//" S( k( d; M8 u0 @9 u' }4 \
socket.addEventListener('open',function(){
, j7 s7 h8 J$ _! I% W
socket.send('Hello Server! Im live.html');
, d) }# ^! W$ Q0 {# M& f
});
% Y% r% u7 k4 F7 |8 |
// Listen for messages
5 D% F; u/ S& V% @. w m
socket.addEventListener('message', function (event) {2 m: e! t) w! |% N* ?7 }! g
//图片地址
5 U: l5 U! P# _7 Q
img.src = event.data;4 Y9 _7 m- { w; n! v j3 f2 E
});5 Z' ]$ K& k/ L2 @* ^$ r5 z

复制代码

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

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

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

浏览过的版块