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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
1 b4 C: r' j+ g. C- T9 U8 r
//创建socket服务
6 e% b: U1 ?3 \: W4 z4 F3 O
$ws = new swoole_websocket_server("0.0.0.0", 9502);
3 f$ N6 S6 e6 }0 h8 r' o- o3 ^
//监听WebSocket连接打开事件
5 u' y: @- L% V8 `( f$ S2 E5 G* `
$ws->on('open', function ($ws, $request) {
/ s; D* I2 y( G9 T1 A( V& E5 P
var_dump($request->fd, $request->get, $request->server);
1 o1 n+ z6 u- F1 E" b2 p% R0 K
$ws->push($request->fd, "hello, welcome\n");
$ d! ]1 n* n1 P0 I
});0 k/ D# G" J7 |/ I! Y3 Q
s# Z5 I" `* N7 x2 ~7 H2 D4 E- A
//监听WebSocket消息事件
, n9 v5 g9 l$ N! k$ o( H0 w
$ws->on('message', function ($ws, $frame) {' f. E9 Z5 s# o
//推送消息给所有用户
. w7 W& j' {; {# E# M2 A! ~! ]+ s5 j
foreach($ws->connections as $fd){
& K2 q# t* w% `* T2 o) M2 |' y/ `& l
$ws->push($fd, $frame->data);1 W7 c6 M0 Q' z( f1 S4 R$ e
}
- d/ c3 W( w" l a+ T
});
0 P2 l) ~, J" N8 O
5 f& r/ N! V) w: H) l) |
//监听WebSocket连接关闭事件
& c, G) Q6 B8 A% X2 D& p
$ws->on('close', function ($ws, $fd) {
! O0 L' Y' l- l0 H! y8 N
echo "client-{$fd} is closed\n";
6 G; T$ V! O' h$ P; ^- ]
});% D7 m6 V( G) p. M1 S1 b2 u G
//启动服务; O! F: j+ o5 ?$ m2 l+ C" P, J
$ws->start();: W5 N& G7 i0 V& u* K* Q% @. o
0 U( i5 ~- g ?8 a2 _9 W, I

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
7 _( b9 @" P! r) S8 D
const socket = new WebSocket('ws://lm.com:9502');1 P: [& F* y. h- m8 \
//Connection opened" y4 I4 Z2 t$ f- a- R5 H' L9 Q
socket.addEventListener('open', function (event) {( S. k( m! H' {+ O3 r$ Z. f g/ a5 W
//发送消息给服务器
3 Z6 O9 |2 d h9 p6 U- X9 N
socket.send('Hello Server! im websockt');
. B }9 ~5 c0 h5 `8 ~6 h
});) e1 q. Q1 `* ~+ ~, v: W
// Listen for messages
( O8 _; P& D y
socket.addEventListener('message', function (event) {$ I$ J% I3 ~2 _. e+ |; u
//接收服务器返回信息
5 L1 t; U, K& L
console.log('Message from server ', event.data);. X: H6 z7 C5 c5 C
});# N- j. k+ q1 r8 s! Z
. \ i4 h& F" L/ \9 h& k; ]2 u

复制代码

伪直播主播页面

html

<body>2 ~% `) `& U, O" @7 u$ X
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
4 d5 `0 M; M3 }4 r) i8 M$ J
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">9 M# n8 k# c/ }" G: w9 K
画布' w+ v9 T$ n; y1 O0 @: [
</canvas>
( m& E5 W1 m# M- o* U# ]) j
<img src="" id="videoImage" width="350" height="700">
9 {) d4 L+ b0 Z3 H p
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>) m4 d" k5 x4 P% ?; [
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
6 R7 s' Q4 A4 z6 G+ W/ J
</body>
- d: _. l9 o/ t7 Q! Q

复制代码

javascript

var v = document.getElementById("myVideo");
' _. ], E. A! o% u% M7 u: }5 q6 J
var c = document.getElementById("myCanvas");6 f( t5 h- f) X* B6 [# c- h
// var c = document.createElement("canvas");
) P* H/ _7 s7 w, D
var img = document.getElementById("videoImage");- x$ Q# I ~7 Q j* G% F! [7 r6 A
ctx = c.getContext('2d');
~+ I& O& `/ D0 X3 O) d; M, D
var dataUrl;
2 C; `" s2 r4 `5 Z( v/ J- g
const socket = new WebSocket('ws://xxxx.com:9502');/ L- Y- D- q4 i
//Connection opened8 \- V5 D+ v4 J+ l- M
socket.addEventListener('open', function (event) {
8 N# }, j5 |$ F6 g7 }
// socket.send('Hello Server! im websockt');# S+ s. z1 x: _, ^/ z
});
! s4 C( D3 a6 y& {, B, Q9 t( v
// Listen for messages
; J4 p& c5 ^+ b
socket.addEventListener('message', function (event) {; p- i% H2 [( f$ i
console.log('Message from server ', event.data);) i6 y+ O: W4 ^
img.src = event.data;! Q7 N+ _" T" j7 Z1 t
});
9 ] L) H* ^9 S* V9 q$ M8 Z
9 [0 |; r3 R5 a
function playVideo() {
" q9 `. d9 W9 w- b3 m5 c" |
ctx.drawImage(v, 0, 0, 350, 700);6 |% @. {. |4 K' l5 t
dataUrl = c.toDataURL("image/png");) @& o# S* q& D& x( f, Y8 k! c
// img.src = dataUrl;
) M+ D3 ?: x( M% h& } [
socket.send(dataUrl);5 S! m& J. e7 E% z
}
) `% q% Y1 m) n* h$ ]
var tick;
8 }5 o/ Q8 |1 Q* w" Q, F7 c
function aphla() {/ a( O. Y& N* Q/ {& X, g
tick = setInterval(function () {; x1 ~$ a r5 i" b& V/ ^
playVideo();
% V Q. ?9 V) U: |
}, 1);# l3 v. x9 w6 Z7 b4 p0 n9 g
}
" g0 j) T0 |( y- J0 I
function vdStop() {3 e e" o; U) y
clearInterval(tick);2 b; \( B/ V$ A8 y- e( X
}; j3 e; ^5 Y5 @& p L# `7 J

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");6 G" O$ e" `9 }9 N {) N
const socket = new WebSocket("ws://lm.com:9502");/ @8 M" j5 f e7 J. t4 L
//
. J+ @ e7 R; U5 i+ ~, A
socket.addEventListener('open',function(){
* P# w5 o# e" R, F
socket.send('Hello Server! Im live.html');
8 q7 Y0 v% D9 k, x7 A! G
});
+ i' {+ h# G; ^1 c# W
// Listen for messages
/ Z- V6 L+ h) y, q x6 ]
socket.addEventListener('message', function (event) {5 n5 W) q! ^, e* S6 G$ F" N3 m
//图片地址6 g; b! }0 |; s; o' g9 N
img.src = event.data;
; o! F+ Z5 e) S# f) G% C
});# z% V- y% g& A3 {( A' V! B/ m

复制代码

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

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

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

浏览过的版块