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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); : d% Y1 N( k* b! O1 L2 R/ x( S* m
//创建socket服务
7 m. X0 W3 V/ w" ^% L
$ws = new swoole_websocket_server("0.0.0.0", 9502);
+ Z: l5 v- V# r. {9 w+ ]9 O: M# _
//监听WebSocket连接打开事件
% f/ j/ _/ H6 }1 \7 \3 c
$ws->on('open', function ($ws, $request) {
8 _5 c. ~8 V* H3 L( W
var_dump($request->fd, $request->get, $request->server);: Z$ r) h8 L! M s" ?+ [8 C+ E
$ws->push($request->fd, "hello, welcome\n");
1 F: W) _) Y# k0 s4 u# @; p( S4 x
});
3 S0 g& R- z, }) [ z
6 a; G( L6 x5 H( ~& g3 c
//监听WebSocket消息事件
+ g3 i% p- j% v. S6 z/ t
$ws->on('message', function ($ws, $frame) {
/ u4 l0 w% z, b) }9 R
//推送消息给所有用户" T; T7 t0 a% ~3 t
foreach($ws->connections as $fd){
@& [$ @5 I7 _" T8 Y3 c
$ws->push($fd, $frame->data);
4 W" i; `) P9 C6 B
}
, r) ^3 w3 Q( @ }5 E q# s! s
});# o- J& Q0 K' N2 i n
! z9 q0 G, L5 [+ h. W7 A; T
//监听WebSocket连接关闭事件! r% Z7 w& K" T
$ws->on('close', function ($ws, $fd) {( F: I4 w, b/ {# { K
echo "client-{$fd} is closed\n";5 o$ Q7 n9 M4 q
});; M" Q) L3 {! J$ f+ I n( k
//启动服务
+ }3 t8 k1 K# `2 Q9 u0 Y) ^
$ws->start();! Y# y" J6 r6 T' g. X# R5 I
6 J) M) a5 N& h& J" o

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
?/ D9 o* p! |5 c! {, ~' a
const socket = new WebSocket('ws://lm.com:9502');' O; ?9 W4 }6 ]3 A' ^: U, Y
//Connection opened3 i F) G$ Z4 R" q3 a. d1 H F& m
socket.addEventListener('open', function (event) { j% ]7 ?- Y3 n2 z% _1 Q
//发送消息给服务器3 \, u J* C3 t' S
socket.send('Hello Server! im websockt');
; f" x" m$ w$ G, a. A
});: t9 {% ]; Q- Q" G3 p$ \% e
// Listen for messages) |! h0 G7 V' B0 ?" `6 v
socket.addEventListener('message', function (event) {
. \/ ~) |5 V% A8 k! U5 |
//接收服务器返回信息
D8 V( Q# L2 T. ]. ~
console.log('Message from server ', event.data);
- b9 p1 }: l# N* [* Z0 _: C. g$ x1 {
});. H- y: `9 F) b2 W
6 Y/ ]! F5 k* a' u& n

复制代码

伪直播主播页面

html

<body>
Q$ @5 V4 N" K! q& M+ [
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>; k# v5 s' E- ~$ Z( D8 K! S
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
2 c1 r/ y( u* K
画布* I/ W* e- ]' T! B1 q
</canvas>
! X o L8 h$ {
<img src="" id="videoImage" width="350" height="700">
/ s! I5 S% @% L% f" _4 R5 W
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
& `' K/ |8 M; Z) W' Q: d# n, o
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
3 ^2 m. E) d3 ~
</body>8 h5 o3 g( ~( G5 |

复制代码

javascript

var v = document.getElementById("myVideo");
8 q/ m/ Q D- S
var c = document.getElementById("myCanvas");( l9 z x, G6 V" J$ y9 H3 v% Z
// var c = document.createElement("canvas");
2 I% S! v5 r2 z. \7 R
var img = document.getElementById("videoImage");+ b3 R0 \" o+ [( R
ctx = c.getContext('2d');% p K$ q: q" ^- S, F: \
var dataUrl;
) k) K0 T* ^0 a
const socket = new WebSocket('ws://xxxx.com:9502');7 O: V) G0 u9 S. i" c* @! k+ c9 D
//Connection opened% |9 J6 } R: j M0 c
socket.addEventListener('open', function (event) {& F! a5 Q- e, W, O5 m: K
// socket.send('Hello Server! im websockt');
* M' M4 ~6 ~0 @* Q2 c$ r, t# \
});
0 @$ D. E* i2 P3 g- T8 N" c8 ^3 d
// Listen for messages
/ U1 e' ~- g5 T% t& T* Q7 |
socket.addEventListener('message', function (event) {
5 y' K: s) F5 m5 h, L
console.log('Message from server ', event.data);
, I5 ~7 ^; o U5 b2 o
img.src = event.data;' H- Z7 i% ^4 [/ M3 B% E% w' t
});
; _2 _' ~; s" h4 p T# W/ {5 G$ Y
5 O% J+ n/ s5 S. z
function playVideo() {
1 p+ b0 E# a' R3 p$ h
ctx.drawImage(v, 0, 0, 350, 700);
+ |1 C+ G8 w3 J7 [1 l5 W/ G9 i, Q
dataUrl = c.toDataURL("image/png");
# @( l% H0 J$ h, B. n+ ]
// img.src = dataUrl;& {" J y5 R2 \" N4 e7 V
socket.send(dataUrl);
$ z. m* ^: G+ |0 X) s
}
* X* `, ?, x( X
var tick;
) p& M' `: j. H
function aphla() {
: a1 \' P0 m- E
tick = setInterval(function () {
9 }4 j8 c' j+ y* X& K, ?8 Y/ J G9 t
playVideo();/ f; P7 I! \# i5 Q- C
}, 1);4 I7 ?; X H" i7 k
}! T- c) X! \( t7 Z
function vdStop() {
( w/ r. ] K4 s2 N! x* N) i
clearInterval(tick);
0 m6 H: z6 G3 r6 o. |+ q
}
4 h& W/ w9 u2 e8 r0 k( w! Q$ C) b

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");6 |- X" W) g2 e/ U. R. `0 q& a
const socket = new WebSocket("ws://lm.com:9502");
$ O$ S. g- P8 B+ L- Y ?
//
: D9 ?9 ?9 s5 C7 J& g+ }
socket.addEventListener('open',function(){! y- b1 f3 m5 I: r) n4 B
socket.send('Hello Server! Im live.html');5 T( {% [ B1 Q4 i
});
+ ^3 m2 e P' }- B
// Listen for messages
7 Q" f+ C+ V* L& X) n
socket.addEventListener('message', function (event) {# _- G2 ?1 f7 d4 Q6 L1 H. N% }
//图片地址0 T5 q# p/ Y0 I
img.src = event.data;
& X8 g2 B: _/ O' O
});
; o. b' Q( {( d1 h- O" w

复制代码

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

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

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