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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); 3 W2 w% e0 q4 _: \5 a0 R
//创建socket服务
! ~9 v E, O1 d1 V
$ws = new swoole_websocket_server("0.0.0.0", 9502);
6 M) H3 U5 j b5 i* m
//监听WebSocket连接打开事件+ ]3 H$ D1 U: b8 t& ~* v2 y
$ws->on('open', function ($ws, $request) {
" k* i; j# I% L$ G0 j1 C
var_dump($request->fd, $request->get, $request->server);& V; F' V0 \9 \$ {5 Q, Y/ v
$ws->push($request->fd, "hello, welcome\n");
; M% i0 L+ |$ J4 Z; j: d
});
/ r( b0 F. [ }% B
9 Y" f# g! W4 S2 m: F
//监听WebSocket消息事件
+ } D/ B5 O3 F0 I `" W. k
$ws->on('message', function ($ws, $frame) {
* X9 G0 D8 ~; q, x) d) j
//推送消息给所有用户* t$ o7 H5 }: v# ~. z
foreach($ws->connections as $fd){
' N, v- j: H" C
$ws->push($fd, $frame->data);! H8 V- P/ u% |% `
}, V0 T* T n0 M# Y
});8 S5 V6 I- m' q% V/ ~
, S% _4 M" g, ]3 n# N# M; B
//监听WebSocket连接关闭事件
" T9 C& F4 t+ A# m) ^3 _0 k' I" r
$ws->on('close', function ($ws, $fd) {; t3 V- @" c* T/ t9 t0 m. g) {
echo "client-{$fd} is closed\n";* C' r( R+ d3 ]
});
7 u) y; A; r# J5 T4 G8 n+ K
//启动服务( b5 a p; U3 w' ?
$ws->start();
: t; A! v7 p% \7 G( U/ S. d
7 J& e; H5 a; I9 N. {

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器5 h9 O9 R* Z7 ]3 S) o# L& [/ j
const socket = new WebSocket('ws://lm.com:9502');% n) s5 r7 Y8 m [; j
//Connection opened, e I' x5 `1 D
socket.addEventListener('open', function (event) {9 C3 S* J7 D- ^( y. x) P' ?
//发送消息给服务器
' P$ W5 F9 N# y- t
socket.send('Hello Server! im websockt');
0 G$ V( @* z" m
});5 `$ [8 W, l5 {: F
// Listen for messages- p% Q) ]6 D) r, e4 x4 b3 Y& d
socket.addEventListener('message', function (event) {
8 S: P% M8 m B! {" K: ~$ l
//接收服务器返回信息
. |/ Z# u" E. A9 m" Z5 A+ V
console.log('Message from server ', event.data);
- H, Q2 p! P( h+ C6 W8 f/ W0 D
});
$ c8 J1 }8 S' f' E$ D
* Z- z9 [) t0 n- n2 S9 b

复制代码

伪直播主播页面

html

<body>1 x/ o9 D5 V! U5 N+ _! ], g3 U
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>: A$ e- ~! p: ]& s, ~6 ]5 H2 k8 n
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">6 e3 G# Q! ~, c3 M% C
画布
3 t6 @! C" X+ f$ W
</canvas>1 Q! k8 S( A1 t) r6 T
<img src="" id="videoImage" width="350" height="700">
- L2 I! X$ Y% @/ [9 y+ U' w$ R
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>3 k7 P+ b$ k! Y, @
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>( L- X/ F9 @. g5 {% W
</body>
1 ? N) E% x y$ ^

复制代码

javascript

var v = document.getElementById("myVideo");2 Q4 O8 {# M3 J4 |* M7 q9 m
var c = document.getElementById("myCanvas");6 X7 ^( O3 _5 L3 q- f: W- E* N- F
// var c = document.createElement("canvas");
: V! R& r' A6 U$ {* P; |! s
var img = document.getElementById("videoImage");
8 V. M( C" n5 V
ctx = c.getContext('2d');
$ N6 h+ d* W$ f& q2 ~( Z/ V
var dataUrl;3 i! L3 {! {$ O, W, [: [
const socket = new WebSocket('ws://xxxx.com:9502');4 o" ]. O, d3 X9 v: n* }! B J
//Connection opened" j: m. J' N: |
socket.addEventListener('open', function (event) {
0 U8 |' T+ T e2 i; U6 o4 C, ?5 N+ K
// socket.send('Hello Server! im websockt');. Q8 ]; m( `' b
});9 h! C" g4 S' L
// Listen for messages
1 l* X1 Q6 |1 j m8 B3 C
socket.addEventListener('message', function (event) {
( ]. U+ S( I: _! R' u
console.log('Message from server ', event.data);( |: c' f' m, U3 \8 m5 B
img.src = event.data;9 P( j7 _' V& R$ }/ P3 _
});
' f, ?: u% i1 V% B6 q7 B' e e
7 T+ D! e4 Q2 |, u+ J% {9 A
function playVideo() {/ P3 Y2 j( g1 ~; o3 T# |
ctx.drawImage(v, 0, 0, 350, 700);
! T" K* z1 I+ r4 G* n( D. B
dataUrl = c.toDataURL("image/png");# o# [9 d V- S, s! u5 f# M. [3 b E
// img.src = dataUrl;' P: V# g' a7 |% J
socket.send(dataUrl);3 F7 m3 l' A* i4 [) ]
}
8 m2 g1 n c8 Q4 u7 L: }
var tick;8 k6 x# \& N& s M7 M$ \5 L r
function aphla() {
1 }4 ~4 B) l9 C' {1 k
tick = setInterval(function () {
" i+ O0 L* j* t* ^) K2 m; V
playVideo();$ T" [2 t9 X) S- i
}, 1);
; K! Z6 L9 Q1 l8 \" Y8 l) {! G
}: e1 n! L1 ?7 g. k+ U5 }- G, a
function vdStop() {$ V8 f$ C! B1 s1 H/ }' N% R
clearInterval(tick);
$ |+ ]9 j, ?3 |7 V
}
) P6 t; J- c+ \0 `6 t: P1 U. I

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
9 e: N% A; i0 I( q
const socket = new WebSocket("ws://lm.com:9502");( J6 d* r6 Y( ] v
//
, n4 J# m0 E- D9 r; _5 D
socket.addEventListener('open',function(){3 Y+ [% n' r" S; E( r
socket.send('Hello Server! Im live.html');
' J+ u' _' z2 I% Q
});
5 Z1 v0 w6 Q% D; ^
// Listen for messages2 e+ i h4 F L
socket.addEventListener('message', function (event) {" @# {$ C3 \" ]8 ]* H J
//图片地址
) G4 ~9 r- }2 p) O) P
img.src = event.data;
$ _1 X! @% B# U% ?3 }) |
});7 l, t" P# G2 z5 X* A8 ^# a5 X/ M

复制代码

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

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

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

浏览过的版块