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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
1 |7 }! S N1 H9 {
//创建socket服务+ y9 y9 M, M: g O% ]& r- n
$ws = new swoole_websocket_server("0.0.0.0", 9502);
% M7 W/ y1 F! @$ Q
//监听WebSocket连接打开事件) E9 |. ^$ J7 F, w7 ~
$ws->on('open', function ($ws, $request) {9 A2 @* T. N7 j5 ?
var_dump($request->fd, $request->get, $request->server);9 f: [' p4 ^1 X6 q* d; t
$ws->push($request->fd, "hello, welcome\n");
2 c' J' U0 {# L! m6 c4 Y) U) o
});
: ]7 Y$ v5 X. n: e9 q" r' p. [
! R( E) [, |/ K9 a- }' p
//监听WebSocket消息事件: [' C8 C: D$ K4 p
$ws->on('message', function ($ws, $frame) {& W' y4 l! m( ~# Q
//推送消息给所有用户
7 X9 n# d" K/ }% j3 h
foreach($ws->connections as $fd){
. N% e9 S! G1 v5 z, @
$ws->push($fd, $frame->data); B# s- U: s1 W \' e
}
* C( I- T, h, k" `/ W
});+ |" j$ j# G' T& I
3 ?1 A# J# C7 ? {9 j+ Z
//监听WebSocket连接关闭事件
/ O% z+ j* j! V( W$ P
$ws->on('close', function ($ws, $fd) {
6 [5 y) m* [8 K) e
echo "client-{$fd} is closed\n";
+ |! S) I: g+ k7 a {* T+ {" J
});, n) \6 S3 {8 ^
//启动服务
, Z. C$ a) v/ }5 S# P3 t
$ws->start();% t$ z+ m, j: b* N
2 \8 W2 g2 S [9 T6 p& ]3 T

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器3 E, v. T& ~) |: \
const socket = new WebSocket('ws://lm.com:9502');" U, ]4 m' K/ }3 I
//Connection opened5 A3 F& t' |& g& B' ?
socket.addEventListener('open', function (event) {
* E' z2 J' x7 ^5 {& w, ]
//发送消息给服务器; t; W+ ]. ^/ v+ _ j! M; {
socket.send('Hello Server! im websockt');
U- O4 H! n$ M4 S2 T
});, ~7 {4 |* E* v5 }1 v: s8 q
// Listen for messages# `9 C7 E- ^) K3 g0 G
socket.addEventListener('message', function (event) {, ]4 I: F7 e* ? W, }" C! P/ m! n
//接收服务器返回信息+ O! w& B" S1 F2 Y! s, [$ s2 n5 D
console.log('Message from server ', event.data);) V6 n9 g! W J6 ?
});
* O, P R; z& K
0 z5 k+ J0 F2 |# q3 Q' {

复制代码

伪直播主播页面

html

<body>& _% {( w* y& J4 x* A9 D: A4 M
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
( s+ y, B* t% P e# O0 j1 H; B
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">9 |, R5 K& g0 F# U" a
画布
$ M* f% J& D3 i0 P$ j7 P: M# u& i
</canvas>
2 S0 S6 G/ V! U5 W) E
<img src="" id="videoImage" width="350" height="700">* D) c+ e, ~/ o: l3 ]
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
' p. ]. j+ x4 c. G. E) k0 S2 ?3 x
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>: s' N% W) T' H; \
</body>' G4 D! ^* w3 R

复制代码

javascript

var v = document.getElementById("myVideo");8 t3 c6 {+ a- U# k8 Y; f
var c = document.getElementById("myCanvas");
7 d6 e3 i3 K% X* e v
// var c = document.createElement("canvas");
' z2 a& w4 \* ]7 e* r5 `6 o
var img = document.getElementById("videoImage");$ l. T+ S8 t( F# c
ctx = c.getContext('2d');
; e7 {" i1 U, \5 p* X7 v: v7 g5 C+ Q
var dataUrl;, K( S L& h/ \! B5 _: ~
const socket = new WebSocket('ws://xxxx.com:9502');
$ e6 q+ b d% {0 z+ f
//Connection opened9 P6 K+ @9 W3 z% Q; d# f( A
socket.addEventListener('open', function (event) {
0 Y# {% b/ F6 W
// socket.send('Hello Server! im websockt');: q% d8 x( Z# m; H7 V6 G$ R
});7 Q9 P% \: r9 D; }. e
// Listen for messages. P6 E# Z% e/ h1 m
socket.addEventListener('message', function (event) {
L8 i, C. }8 U6 Y4 t
console.log('Message from server ', event.data);
3 N( A! J6 a- m5 p$ ~
img.src = event.data;% \# G* o8 D8 ]$ N y4 h# I7 @
});1 W7 }3 x3 p/ o) H( L3 D* ?" }
# U" c# c, \! t7 H/ i* b5 Z7 u
function playVideo() {) V' k) y7 Z& _4 s
ctx.drawImage(v, 0, 0, 350, 700);
2 @. X: K! Y% n: G
dataUrl = c.toDataURL("image/png");
& z& \5 C. y% p* i
// img.src = dataUrl; `$ g. t; k6 q0 C
socket.send(dataUrl);
# X( @* y. W9 L: H. H% H
}/ P! Z- x/ P) V( n
var tick;) J# u, B* m7 z' _8 Z7 P$ j
function aphla() {
, ? I1 z# D0 M, ?( j* `; s( \
tick = setInterval(function () {3 x6 Y( b* F5 J7 f- z3 `5 p4 O
playVideo();
: [! i7 t! Q8 \% e L+ X* Z
}, 1);
3 \, O3 W! K$ s+ w. D
}1 z3 b8 K" s5 ]. A
function vdStop() {% c4 L& K o+ _$ {' @# f7 j
clearInterval(tick);
}2 R4 H- [& V6 @% f

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");3 @& Z t5 I* }7 t4 ?2 y
const socket = new WebSocket("ws://lm.com:9502");
6 h- K% P& h8 f: F8 |1 Y% U0 y" F
// j$ `, U6 ~$ b& m) r/ v9 A( ?& J
socket.addEventListener('open',function(){
2 s& k: e. D8 \. R1 G8 m
socket.send('Hello Server! Im live.html');
* A2 k" o( _$ b$ K- b* P1 k
});. D1 B H; l! Y2 a
// Listen for messages( f/ Y% e5 b* G) B$ R" y6 e: X
socket.addEventListener('message', function (event) {$ d" Z5 {* u' b* ?3 I. D
//图片地址3 _! L$ { x% p+ j9 n
img.src = event.data;8 j/ b& i1 Z1 e2 E' x
});
' {& X+ x( c; e- ]/ t

复制代码

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

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

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