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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
$ U0 E0 ?9 i% Q5 e9 W5 _4 l$ s5 r. o
//创建socket服务
# r, [- _: ?5 Z! E* [# V7 ^9 L/ \5 n
$ws = new swoole_websocket_server("0.0.0.0", 9502);
4 n" R( L) i1 m* I
//监听WebSocket连接打开事件: \4 w3 K% c: i; ^' U. E+ b( U, T" {
$ws->on('open', function ($ws, $request) {
& W; K8 B# i( {" N6 _5 M" A
var_dump($request->fd, $request->get, $request->server);+ i0 o' d; U* Q
$ws->push($request->fd, "hello, welcome\n");0 }, u- d+ Q' m7 z6 T- X$ z; R
});
7 `7 h: J8 h4 {
- i7 i2 Q6 v, S% V
//监听WebSocket消息事件3 O( x. f1 y# r3 ]
$ws->on('message', function ($ws, $frame) {! |$ F, ?4 ? d; R. |
//推送消息给所有用户0 d9 a c5 l, h! ~) ]2 j5 O
foreach($ws->connections as $fd){
" k6 T" N1 p X$ S, A
$ws->push($fd, $frame->data);
$ t& r6 ]- R0 X" B
}8 ~5 n) H5 N6 f: J
});$ B) p5 T. j3 R7 @' T
6 x0 G& }, I) M6 I9 G$ h
//监听WebSocket连接关闭事件5 R7 b/ {2 J# t" |, T( y; r8 R. E
$ws->on('close', function ($ws, $fd) {
4 H. n- o( Z7 g2 j
echo "client-{$fd} is closed\n";) B( Y" c: V; ~+ }0 v
});$ G N$ t0 Y, N
//启动服务
1 c1 W" }1 \0 a6 i2 Q, D
$ws->start();1 |0 g# [4 L0 y6 c
; _ W% M! F9 A# B- x* m

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
& a7 b0 p5 S( J+ v- B+ y
const socket = new WebSocket('ws://lm.com:9502');
1 I0 g; {( q9 q& O3 A K
//Connection opened
" s. i9 @& r* c" N0 t" `; L! y
socket.addEventListener('open', function (event) { ?2 U# Q8 H- L( i
//发送消息给服务器2 n9 H( g3 m. H8 u/ T8 ~
socket.send('Hello Server! im websockt');
: P( L" u. w# x6 N( D) J# S( |. j7 [
});
( h" m2 g0 w+ `" m( v# n- ~
// Listen for messages
4 V- t/ V7 Z- a" l
socket.addEventListener('message', function (event) {
0 b8 O5 A- s4 E/ W. w/ U
//接收服务器返回信息) l" x$ H+ B4 l5 `7 K/ T
console.log('Message from server ', event.data);% V! j" @ v, H' a( ^& B. @; @& ^
});3 v/ b& t, `2 D% Y6 ?) O
1 x0 Q6 P; s2 b( V' L: s1 N, ]6 L

复制代码

伪直播主播页面

html

<body>
" l# {6 f6 `& W
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>2 F% B/ A! T: v6 v% v6 A2 l
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
* M1 `/ {. H! J* P% J+ ]3 r* U
画布3 W; H9 j4 b3 J2 [0 N7 U/ U7 U
</canvas>
3 n* G6 r& s( H0 c( E
<img src="" id="videoImage" width="350" height="700">/ `! z0 M7 {9 Y% |
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
0 [ ?- l1 t+ h
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button># }% g( g3 u( `5 n7 s: K
</body>
2 Q; ~% t4 s/ P5 G3 e# H$ A% w. H

复制代码

javascript

var v = document.getElementById("myVideo");
% b7 ]+ q' g: {( v# p
var c = document.getElementById("myCanvas");9 C; p( p$ @5 Z
// var c = document.createElement("canvas");6 X( U' m- P& [9 L# Z( b; y
var img = document.getElementById("videoImage");
& u! m" C, r/ F; |! u0 `: v
ctx = c.getContext('2d');
5 g" j2 d5 e6 ?# Q1 U
var dataUrl;7 V9 P! ` X$ ~% G$ H# {1 k
const socket = new WebSocket('ws://xxxx.com:9502');
+ K/ B; c0 @7 N; g4 {8 R$ n
//Connection opened
+ R. s6 H, X: l, N; [
socket.addEventListener('open', function (event) {" w4 j8 O) C \7 W2 d7 K* u
// socket.send('Hello Server! im websockt');2 ]/ |' E7 h' l9 |* j: Q
});. Z4 O8 m# x" O
// Listen for messages, |3 P5 b" r% L! d8 o8 E, }2 f
socket.addEventListener('message', function (event) {9 B) @- a/ U0 z, P' N2 n
console.log('Message from server ', event.data);+ F0 N7 ~# N y' M! [
img.src = event.data;
! Z" f8 B' U, h; N5 V( u- o! k& w% O
}); { o8 I* o* e2 ~) }7 F* B
9 [: q5 k9 ^; T# R: V3 t; o" p
function playVideo() {
0 G$ ^! f4 g* L( l; n
ctx.drawImage(v, 0, 0, 350, 700);; W4 \8 o% o! s/ [; H
dataUrl = c.toDataURL("image/png");+ P) T3 ] w7 Q$ h$ E
// img.src = dataUrl;* r/ Z" x) o( b$ x
socket.send(dataUrl);
% v7 x @6 m4 L7 c6 f K+ c5 j
}
6 H/ _3 ]" |" G/ Q; L
var tick;. V R* d1 u1 x/ r: Y1 Y4 e
function aphla() {: c. ~( F) m+ o! x- c
tick = setInterval(function () {
$ e0 g, I- m9 @- F ~
playVideo();
8 y1 {7 k: z* A2 a0 H( C$ ?
}, 1);7 C' |& w0 z$ g
}7 l: I. r, u* y, l
function vdStop() {9 s, a) |: z$ }3 V0 N7 F
clearInterval(tick);
3 s- Q8 p+ Y8 P* s- w- K) }$ y
}
3 }) J1 ^# f9 P9 e( `# @

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
; q$ S5 R% X( ^. U7 z( z
const socket = new WebSocket("ws://lm.com:9502");& a/ I7 d" l- v9 i e+ L/ d, f1 W
//
8 g- c: ~4 K6 B; V
socket.addEventListener('open',function(){ r# v2 K, A. H- [- d, S& T
socket.send('Hello Server! Im live.html');4 S# ]& M7 H1 M
});
" \3 D+ x+ m# g$ k
// Listen for messages3 }4 i- p, u2 {1 H' n7 ?0 y- Z
socket.addEventListener('message', function (event) {
, a" I0 `# H1 r; }
//图片地址
1 `* n7 E3 W1 ]- h* |3 m+ x
img.src = event.data;+ L9 |( g* Y6 L6 A& r9 |
});
# I# b8 O0 p! H9 n2 i

复制代码

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

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

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

浏览过的版块