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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
& s+ i' M+ K: }; S& a; Q
//创建socket服务) s+ i+ c0 d2 s( U- B
$ws = new swoole_websocket_server("0.0.0.0", 9502);
. l; ^; H6 d% c5 F1 I
//监听WebSocket连接打开事件7 e8 v* M! Y( k+ i5 M3 V
$ws->on('open', function ($ws, $request) {
! A# @/ }8 n9 i) x
var_dump($request->fd, $request->get, $request->server);, x+ Q; U, A8 V/ h& ^1 ?
$ws->push($request->fd, "hello, welcome\n");2 ^0 B6 R) B& r5 A
});5 l6 b' o# o: z$ G
8 w* m- w: a4 B8 s6 y2 Z2 h
//监听WebSocket消息事件
. T3 V, ` @! L6 C
$ws->on('message', function ($ws, $frame) {2 i* {: Q1 o3 y) ], N
//推送消息给所有用户; ~. ^/ S% @ S- i
foreach($ws->connections as $fd){
/ s: M+ d$ g6 r6 P
$ws->push($fd, $frame->data);
3 S3 l: q6 _! T3 V- A
}
/ G0 W+ N T6 S/ l; ]1 x
});5 C" y3 p3 h- u/ ` q- R
) @, @2 V2 W/ W0 v; y* f7 r
//监听WebSocket连接关闭事件& I! }5 p' A( u2 \
$ws->on('close', function ($ws, $fd) {0 t3 P. _. ]2 q: Z' h5 ^* s
echo "client-{$fd} is closed\n";
t6 F6 l( A# P6 t1 b
});0 h3 Z/ [- v1 ?, b; @
//启动服务5 B T% i7 W0 h
$ws->start();- I/ ?8 d( z, Q
( z5 ^4 P1 b8 l! n2 L, L0 L2 y/ `% ~/ g

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器4 ^% S5 g3 D3 X2 `4 ^6 u3 E& Y
const socket = new WebSocket('ws://lm.com:9502');
6 q; Z3 H: E3 H6 k' j; S
//Connection opened
. h# D2 z" h- S
socket.addEventListener('open', function (event) {7 H2 q) {; b1 c( x5 e! o* I# z+ Z0 x
//发送消息给服务器
+ r3 a& V0 p4 v8 s
socket.send('Hello Server! im websockt');; ?0 j/ }2 \' m+ q7 a+ C; U
});
( R. \2 ?) B$ _
// Listen for messages
8 M0 G3 d. Y0 V9 s( F
socket.addEventListener('message', function (event) {; E% T" ?- `) J7 y9 A2 c& h* L
//接收服务器返回信息
: C4 Z& U6 n5 D b. ]. }
console.log('Message from server ', event.data);
) R# K/ X$ l" D/ q7 ]; P4 |+ G
});8 {2 `! q+ a) S% g
K( n H: T4 S$ N D

复制代码

伪直播主播页面

html

<body>5 `8 r: E+ y* f! {0 ~( T( n( w
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
2 Q% W8 Z9 D/ k5 h0 g8 H2 F8 G
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">; b( {. V( b, h5 y/ w
画布7 D4 ?$ c X- X' [
</canvas>, |0 H' B$ [# ?# R% R# a2 c
<img src="" id="videoImage" width="350" height="700">8 {6 Z8 s; i* z8 _
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>1 X X5 l' X$ a! {+ B- ~# `5 I N
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button># a4 s4 Z0 U) `6 c1 t
</body>/ M3 b+ G5 d# J0 a7 [* d

复制代码

javascript

var v = document.getElementById("myVideo");
$ s# [- j* g0 C8 A
var c = document.getElementById("myCanvas");
2 l! }5 z1 S2 M" {6 R8 i0 V9 p! I
// var c = document.createElement("canvas");
; e8 _& U& O3 M& B/ z
var img = document.getElementById("videoImage");% n& z# p. \4 b. n" ~
ctx = c.getContext('2d');: z: a/ Y9 I: ]
var dataUrl;( ?0 L3 J! K5 }% z% `6 z5 {6 U
const socket = new WebSocket('ws://xxxx.com:9502');
0 z" ?6 z- z$ J4 ~
//Connection opened T! {/ n! r& M* g
socket.addEventListener('open', function (event) {
& X2 H/ b# P, H
// socket.send('Hello Server! im websockt');: {. o; j: s$ T
});1 j- r' s' C$ D; m1 S
// Listen for messages
/ N1 p8 _& ~# }- H0 c3 Y- B
socket.addEventListener('message', function (event) {
, Z q4 c0 K# [# ~
console.log('Message from server ', event.data);
/ A5 }$ g6 Q4 X# |' P
img.src = event.data;- H$ S) Y& }- j) j
});: p+ q. N m3 X" K$ |* J
% c8 B0 p* y: e. }; h# E& ^- z
function playVideo() {
. G" v9 J, g+ G
ctx.drawImage(v, 0, 0, 350, 700);
& M; |% k$ m' L* _$ |" ~- z
dataUrl = c.toDataURL("image/png");: f1 Q, b- i" ]
// img.src = dataUrl;; L' ]" d5 M& L5 ?' k: k: v, X
socket.send(dataUrl);; b. F8 M/ I1 f7 d& B
}
$ ?" {3 g4 b4 e& I6 ]8 t6 x4 p
var tick;4 T ~9 B* m" z2 X4 U
function aphla() {9 K% l. R8 Z3 N! R2 j% j. x
tick = setInterval(function () {
$ d1 ]2 G, B9 V4 o$ r" b5 [
playVideo();1 D, |1 h% ~2 e: i2 o
}, 1);. b# n% l' S2 n' j! \! a- g: H" A! n
}' m' N- ?. G+ A7 t% }5 P! |3 z% Q
function vdStop() {
5 l7 O a) W0 a; R% G
clearInterval(tick);! {; {3 G3 J$ ^8 w/ B
}
- a& j# M3 e/ _: j: `' l

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");4 R1 ]1 A5 A$ l6 [# |4 N
const socket = new WebSocket("ws://lm.com:9502");
: ~3 D7 q* X/ w* y
//$ y8 g# l. u% O( J3 |
socket.addEventListener('open',function(){
! W* M' W$ N. ?" D% p$ M
socket.send('Hello Server! Im live.html');
, q; B4 k: k$ j+ G
});
. d! @- s3 m) [* k6 y9 S
// Listen for messages4 D0 s( b, R" i( O
socket.addEventListener('message', function (event) {
1 }0 x' B) K) v$ q0 Z" C/ c2 ?
//图片地址
) d& y# {, Q$ ~& K) w7 e
img.src = event.data;4 m/ W) R" U' v
});6 v: G9 j6 A6 Q% l8 _6 |( O

复制代码

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

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

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