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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
* X0 `4 ]3 {( V0 ]( _2 J
//创建socket服务+ F# W4 x! ~5 ~0 d8 ^
$ws = new swoole_websocket_server("0.0.0.0", 9502);- @. K, i% L( W1 s1 [
//监听WebSocket连接打开事件# f; m" A% r$ d o
$ws->on('open', function ($ws, $request) {# n6 n( _! v8 Z! n
var_dump($request->fd, $request->get, $request->server);
- [9 G6 `. B/ f. C6 b6 X" o' m
$ws->push($request->fd, "hello, welcome\n");" c$ l" M \& Q& Y+ J: t! O! ]
});
8 N3 A8 x/ m% F* k, A: _
' ~; a, z# J# |! f% b0 c
//监听WebSocket消息事件
2 Y* T0 k0 t# b/ S4 c$ M
$ws->on('message', function ($ws, $frame) {. i. ]1 u& A! T! |% U
//推送消息给所有用户
4 K" j; e3 V: L3 B3 O& U/ S
foreach($ws->connections as $fd){
6 a$ h' i& M+ A$ ^
$ws->push($fd, $frame->data);
$ ~% l( N* Q! |& c/ O& v
}
/ m0 X* _/ x3 ~# t; Z
});
( @* N" U/ I7 M Q p3 R3 m4 g
! J" D ?3 f4 @9 f# I! C/ E2 v
//监听WebSocket连接关闭事件9 s [/ j! I4 F) S' @6 E6 H
$ws->on('close', function ($ws, $fd) {/ F. c6 y8 @& V! ^# M5 d% W2 g
echo "client-{$fd} is closed\n";
2 x" l# b' j4 {( C6 P% Z
});: G$ `5 |3 V; F5 {( B& ~7 c
//启动服务
/ A7 v# Z0 E6 E" K& Z- U
$ws->start();$ ]1 N* \' p" {; P2 U8 e
; K6 z9 o" r+ A# r, o; F

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器
' [ {& k$ A) c1 z8 `
const socket = new WebSocket('ws://lm.com:9502');
6 J) R! ~: G2 ?
//Connection opened
' \6 h, W' ~; Y% C z/ v
socket.addEventListener('open', function (event) {$ x! N: {# R! S7 W
//发送消息给服务器
+ ?5 |# R2 e K# d0 g
socket.send('Hello Server! im websockt');0 Y; b8 _5 L7 f( }
});3 k# r# ?3 H+ R. r! p; F$ Q' P
// Listen for messages
$ D) _* P1 X; g6 i
socket.addEventListener('message', function (event) {* g4 o% F3 R5 H, @% v6 O/ h3 V
//接收服务器返回信息2 V( Y3 @7 P- W2 @+ x' [* ^
console.log('Message from server ', event.data);
! m! X: t" H+ Y$ q
});. u. ~; D0 B# g: y
9 m4 _6 H" G) C4 u2 c& z$ x

复制代码

伪直播主播页面

html

<body>
2 u3 Z$ B9 }& `* {) E( c
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
3 ]$ ]+ G8 O7 ]; m
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">/ b( d6 |0 O8 a0 }' H' p1 l
画布% @7 X; L8 f- Y$ m) a. b k
</canvas>7 o/ M) V: Y4 _
<img src="" id="videoImage" width="350" height="700">% v: V3 j0 Z% a5 g1 \
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>% v+ a+ x: x5 O, ^1 I T, h
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>3 i& |+ J+ D9 p/ W7 ^" _! a
</body>1 ^, \0 g' q% U4 n* Z

复制代码

javascript

var v = document.getElementById("myVideo");9 J6 o) b, Y2 u0 E/ X
var c = document.getElementById("myCanvas");2 [8 o: G, ] V" G* {! t. X
// var c = document.createElement("canvas");9 o7 M! l' ?) `1 K$ r
var img = document.getElementById("videoImage");
1 f. }+ g' Y- ^0 l8 C4 z! E
ctx = c.getContext('2d');
* v4 T* Z+ {1 o% H) k' ]
var dataUrl;% o; }% g! ?4 ~$ K0 J
const socket = new WebSocket('ws://xxxx.com:9502');
+ C# U$ O0 i& e- X
//Connection opened
2 f* q/ K* k2 q+ k0 ]2 P& X
socket.addEventListener('open', function (event) {6 w; I4 ~& d- Z7 v/ c& ?4 o& g j
// socket.send('Hello Server! im websockt');
( X8 x9 U2 m8 H8 Z
});
, g. s/ M7 a) F9 K) b
// Listen for messages L7 W: E) f3 q- E
socket.addEventListener('message', function (event) {
" O: \4 _' a: X0 O
console.log('Message from server ', event.data);" O4 T/ g% {( G' p- S- `5 M/ y
img.src = event.data;4 X. }6 A% Z- {5 l! j1 s0 Y
});3 X j. ]9 b- |/ h3 d$ c- @
; b4 P* ]$ t: x% b1 p( w
function playVideo() { L; m. a! e' T w: A0 ~. [
ctx.drawImage(v, 0, 0, 350, 700);' {) I9 X: I# p: M0 [' T/ V
dataUrl = c.toDataURL("image/png");
) q' [7 m. X q& I; z0 d9 Q; T1 N! o
// img.src = dataUrl;
# v* C$ v' ?6 V3 G3 n+ t. U% D' X! B
socket.send(dataUrl);4 [7 y8 s$ R$ f8 g) u; r
}
( J: E4 N+ d$ [2 |: h
var tick;; C9 _: Z8 S7 v4 q$ F: Y9 a: u
function aphla() {3 w7 @3 f* {1 H; J4 S6 P6 R
tick = setInterval(function () {
" l. j% Q: T' T
playVideo();7 N% @1 J& m$ K& q2 Y7 o$ T
}, 1);" _" b T# [# ^' s" g
}/ b; z: ^. A: ?( B/ M
function vdStop() {2 E) h- ?, n. ^9 ^5 k4 ?1 h( j1 U
clearInterval(tick);
* H) d! t% j) C `* z% D
}0 `1 L$ y. D5 P) O" S

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
?; N" U- \/ r
const socket = new WebSocket("ws://lm.com:9502");
, b% @' _- F+ _, ` O! Q# Y
//
, y$ K0 r4 W# `
socket.addEventListener('open',function(){3 `) M i2 \$ L, l, B
socket.send('Hello Server! Im live.html');7 N0 G G' E( l' h+ I, V
});
: P8 K! ~4 U9 h* {: D8 ~: A) y
// Listen for messages
4 F: i4 k* N3 W
socket.addEventListener('message', function (event) {
& f( V) m6 G z& b6 O
//图片地址5 ]: E( ]0 R* h5 W. @, c: p8 @
img.src = event.data;
% ^9 q4 h4 q# L( s7 q+ b o- ]( f# a
});! R' ^7 n A+ R& r; {

复制代码

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

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

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

浏览过的版块