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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1);
C! [( r& w) S, W8 `0 I, d( H, y
//创建socket服务# w$ a# l. d. |/ \ z6 B
$ws = new swoole_websocket_server("0.0.0.0", 9502);
2 c8 a' L+ j- q3 {/ K% q8 a# K4 R
//监听WebSocket连接打开事件# p$ r/ W3 g; k+ Z
$ws->on('open', function ($ws, $request) {. v' T, x+ n3 P. K3 w6 H
var_dump($request->fd, $request->get, $request->server);- I2 y0 T2 n0 V& i$ M7 x
$ws->push($request->fd, "hello, welcome\n");& K) f$ A# E7 w/ F) U& U' q. T
});
7 g! j& ?0 @8 j- |1 `
2 a# n/ {9 d1 T+ K+ ^9 J
//监听WebSocket消息事件
$ws->on('message', function ($ws, $frame) {
! F' w$ x% j$ y6 @& S
//推送消息给所有用户' c7 @) ^# w) \3 `
foreach($ws->connections as $fd){
+ L' T% N! E1 {" N
$ws->push($fd, $frame->data);& n+ T v0 j6 p; O) Y
}2 v7 k$ N7 e, w& g% Q
});- \, w) p2 n& T% g$ W$ i6 J' m
/ D' b9 D3 n8 V4 X
//监听WebSocket连接关闭事件
. L9 U3 X+ R8 C3 u. D
$ws->on('close', function ($ws, $fd) {1 X+ m6 L$ B. |0 {4 W! c& K
echo "client-{$fd} is closed\n";
5 j" b" D! {) Y! Q3 f
});
6 B9 h- c/ ?5 Z% r6 ^
//启动服务6 I! t3 V6 ~( ~! W
$ws->start();
& p5 Z1 q# `5 K% b( A$ \7 t5 m
+ [: Q; R: c$ Z1 ~. E

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器. x4 u/ }- m9 y; o& v4 C; k) J
const socket = new WebSocket('ws://lm.com:9502');
6 ^4 I/ n2 Z5 H& j4 K, Y
//Connection opened
3 w1 L% h3 V5 d" S' Y
socket.addEventListener('open', function (event) {
. k* P7 p7 s8 N9 \3 c0 `2 x' f
//发送消息给服务器, U( ^8 p& x2 y N0 k) Y. Q
socket.send('Hello Server! im websockt');
3 `0 T9 ]6 g. }2 s5 z9 z6 A
});
$ z% q7 E1 \! n$ W, g5 j+ O K2 [
// Listen for messages. a* q! I& A" E3 n! q3 d6 }8 p
socket.addEventListener('message', function (event) {
' C( f( E* l3 k- G, K
//接收服务器返回信息
$ S* c- F9 z0 B6 B5 |; `
console.log('Message from server ', event.data);
3 n$ C# n$ v" h) v( H- {
});) `& [4 }( O* Y* g8 @' H
9 i$ m6 c$ F6 c9 P

复制代码

伪直播主播页面

html

<body>5 \' a6 {) I9 B# G+ D
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>5 i x6 |& `# k8 Q' \
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
/ u6 Y# @( d6 }: O# S
画布5 F$ a; O6 b6 h$ i% f; Y4 {; q q
</canvas>$ e) h/ s ]4 r |9 k7 R) ]: p
<img src="" id="videoImage" width="350" height="700">
. W3 _ m' G# B+ u/ m) D7 X
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
5 P' N, Y8 F- `& H y
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>, H- r2 R+ o: ^+ h8 i( ?6 j
</body>. g( ^) H7 [5 B) x* V" c# k+ n

复制代码

javascript

var v = document.getElementById("myVideo");4 ]. z5 p& z9 {( E) R
var c = document.getElementById("myCanvas");
2 ^3 M6 Z6 U& o& n8 J- c [
// var c = document.createElement("canvas");
! b9 P* k! P9 y+ g
var img = document.getElementById("videoImage");- [4 X' T! A. |6 S5 `
ctx = c.getContext('2d');
7 j, d! W4 X: _& ?. ?* B& g
var dataUrl;
: s9 C( i P( H# P" p5 H- H
const socket = new WebSocket('ws://xxxx.com:9502');' r4 ?8 ^: i3 c
//Connection opened. l9 R. w/ x8 Q* T+ V8 b0 r
socket.addEventListener('open', function (event) {* ~- D* U+ k: b5 C ~7 [2 _
// socket.send('Hello Server! im websockt');
2 g) a! S6 |/ r# e3 L. i' V
});
' O* C: G- h% C. p$ D
// Listen for messages% f2 t0 e; {" t! F o+ P
socket.addEventListener('message', function (event) {
6 ?/ I+ ?3 w! k4 \! m* T( N3 x, U
console.log('Message from server ', event.data);0 Q) x7 A) v2 j7 X3 i
img.src = event.data;
1 L0 h5 b+ V r& { {( X$ A# W
});( T( S; {5 m# [$ g
7 ^; R! w9 g2 B t5 R
function playVideo() {- G* ?0 a. S$ ^% p: n
ctx.drawImage(v, 0, 0, 350, 700);/ v2 X7 d, X0 A' c: P1 ~: E
dataUrl = c.toDataURL("image/png");
5 ?& c, _) `& |( `0 D) @, T4 _
// img.src = dataUrl;9 R g( \" @% g( ~$ D# b
socket.send(dataUrl);
* d" F% \8 J6 F: j0 P
}
% d- ^7 s# r6 u+ H* X
var tick;4 d0 `, p6 O& b. B4 b3 d3 i
function aphla() {
' u* `( K+ E7 S% Y; I6 b
tick = setInterval(function () { P# W: d% ~. R' P- i' ]
playVideo();
' o5 i+ v3 n- N8 O- l
}, 1);
! q6 z4 ?; ]& R) l: w
}/ y% k4 z0 ~4 k5 l1 B# B
function vdStop() {. @9 Z# C3 Z: ~5 U/ [. ^
clearInterval(tick);' `0 H5 K$ {& t) Z, N6 \
}( X, @: T8 l* p; V- N! r

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
$ G1 Q& u) b; J; n1 q8 \) ?
const socket = new WebSocket("ws://lm.com:9502");
4 T) C* x. {% O( t; u, S V" D
//- j; S. j) V2 \# @2 s. t7 N
socket.addEventListener('open',function(){$ n. g7 S& m1 I, j% r5 e1 x* |
socket.send('Hello Server! Im live.html');
- m4 P- A, u7 B
});9 Q/ \4 A: O0 X" E
// Listen for messages3 \( W. L; O! n: \& h
socket.addEventListener('message', function (event) {6 ?$ Z c. `: V* D5 T
//图片地址8 f8 y: \0 X8 Z" m+ s: U! ?" U
img.src = event.data;
' v; u5 R. p: |' |( }4 |' R
});7 O! u, P) d6 R/ B q1 j0 N8 h; V

复制代码

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

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

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