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

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

伪直播功能Websocket服务器

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

复制代码

创建websockt服务

代码如下

error_reporting(-1); : k: U& W% B* u& j' l! k& `- P: [
//创建socket服务: e/ v; c# O. }7 r k2 a
$ws = new swoole_websocket_server("0.0.0.0", 9502);# q- K' S1 G. `; W1 Z
//监听WebSocket连接打开事件
% J1 u% U5 P* h1 _4 Q* x" @1 K
$ws->on('open', function ($ws, $request) {
; k. U. G7 ?/ v, K2 {
var_dump($request->fd, $request->get, $request->server);
3 w! {, ^3 @5 Q }
$ws->push($request->fd, "hello, welcome\n");
; v! {: K9 ~4 U9 _; R9 }
});
1 w2 r+ f1 D7 h8 J4 R
) j+ D% L% u c
//监听WebSocket消息事件
+ x9 v, d$ s+ t
$ws->on('message', function ($ws, $frame) {
( R" p& W# n6 D$ D3 d) l* z; j0 R
//推送消息给所有用户
3 l1 g6 U" _9 e( @+ R G
foreach($ws->connections as $fd){
$ q1 s: H* X/ J% s6 i8 m
$ws->push($fd, $frame->data);
; m2 o7 U- W: r& j6 G
}3 d [$ M4 i4 Q8 N8 N& x2 [
});
' `- ^$ Y/ m2 R5 H
8 {- e5 X/ g9 Q3 X! H/ X
//监听WebSocket连接关闭事件
. f% R3 @. b" O+ N" R
$ws->on('close', function ($ws, $fd) {
+ n/ S! P& X: v( `4 M+ j0 f8 Z5 r' l
echo "client-{$fd} is closed\n";" d O+ ~! T# G+ D4 }! W9 b
});
* l a: f7 ~7 S
//启动服务6 }2 }5 c) z% u1 [
$ws->start();
/ |; P+ A d, A, ^5 J3 x
1 J1 o0 N( p: \" P

复制代码

Websocket客户端

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

复制代码

创建websocket客户端

代码如下

//连接服务器1 |6 G% a$ [' G! w* A8 v
const socket = new WebSocket('ws://lm.com:9502');
0 f5 Z9 v( f" W9 ]+ R0 P
//Connection opened2 d. |: j+ I- |4 h/ R) y
socket.addEventListener('open', function (event) {
# O" y7 D; }6 E+ w5 i
//发送消息给服务器
- o* k& @5 }1 A+ R. g. t) J
socket.send('Hello Server! im websockt');& f( s: ] Y; } i2 T, f( T+ ]2 ~
});* i6 S" Z; z7 ^$ n- Q: V
// Listen for messages4 ]5 D# f2 q( g# u8 R- ?- k" ~
socket.addEventListener('message', function (event) {
|$ \( I/ y& B6 ^
//接收服务器返回信息
: |) [; r) l$ U4 W" |7 ]
console.log('Message from server ', event.data);
' c6 H* ]! z! R- s8 ~' P9 @
});
# [, a% h. M5 x+ y+ F
* ^, @9 q' m. T5 H. c' k

复制代码

伪直播主播页面

html

<body>0 R& J t3 h- }, U
<video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
# p0 T" m& L& M/ |# R* {6 u& V
<canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">% Q# [" R. z4 D* a. R9 ?6 j
画布
- x T0 n) n" e
</canvas>
7 o' r, {8 f2 N0 D7 D4 T
<img src="" id="videoImage" width="350" height="700">
& z9 M+ k9 l+ b
<button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>$ c4 Y+ d$ r% p( Y9 P- k* r
<button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>, w- F+ M8 E9 u
</body>
( }3 T, f+ {/ h# f( p3 X5 ]( d' B

复制代码

javascript

var v = document.getElementById("myVideo");
! v( |; @" F5 W/ R# W2 N3 Q
var c = document.getElementById("myCanvas");
0 S* [& {: {, [+ t
// var c = document.createElement("canvas");! h: d+ B! a, `
var img = document.getElementById("videoImage");1 w$ ?' ?6 z$ l/ h; y
ctx = c.getContext('2d');
. t" f D2 y/ e5 D( G6 @
var dataUrl;
+ E: N2 S( D, J) o5 G; r$ n6 i
const socket = new WebSocket('ws://xxxx.com:9502');$ [( [# P: X8 a: Z' O
//Connection opened
/ S8 |+ ]( s& Q4 s3 D
socket.addEventListener('open', function (event) {
0 l% w H4 o( |. G T6 Q4 O
// socket.send('Hello Server! im websockt');8 A; k$ b" V# X6 v1 k9 _9 R
});
% t8 `, ? k5 W' ?
// Listen for messages
socket.addEventListener('message', function (event) {
( e6 T" b$ }3 j: c, n; U4 c* y- z
console.log('Message from server ', event.data);2 O* F" c# z4 L; c( S. y5 a
img.src = event.data;) V, I! e3 ?' H5 \9 d1 d& u" r
});
" T* c! _4 N1 V R2 \
/ N3 x3 R; e9 \, y- y
function playVideo() {
% c5 u% c6 p/ {! L4 y/ [
ctx.drawImage(v, 0, 0, 350, 700);
7 S" k: {+ i3 m$ A/ d
dataUrl = c.toDataURL("image/png");% U/ O" {7 R8 _) c* z; c. B
// img.src = dataUrl;. C: M0 Z% e8 H/ y1 u
socket.send(dataUrl);
! [2 c) q; C% d5 k& l
}3 _3 d3 W1 c/ R- h3 K4 F$ C3 H
var tick;
% {! ~3 c# H8 E k$ v' ^
function aphla() {
/ f, h" H# F4 c! L9 m' `8 F' l
tick = setInterval(function () {
. {. }& ^( N! N
playVideo();0 Z3 G% w9 p- Q7 d6 b
}, 1);: |; \5 d% _+ P9 B8 f! O) r
}" p- w9 n5 G, Y. [* c$ C
function vdStop() {- a: w; ~! l& s& C
clearInterval(tick);
8 h' V& u2 m9 k2 }- _' i; B- L
}# Y: f# E0 Q9 h" O8 `1 {

复制代码

用户页面

html

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

复制代码

javascript

var img = document.getElementById("liveImg");
y# i& R2 K0 ~7 \! D
const socket = new WebSocket("ws://lm.com:9502");# p7 b; M% h. j: Z. ?
//
. `7 z" D7 S1 |1 T. W7 d5 i( X
socket.addEventListener('open',function(){7 G4 i7 Z) u7 A# H
socket.send('Hello Server! Im live.html');
$ f. ], N+ M/ b4 H+ f9 z
});
: ~+ p* ~4 d( V2 t
// Listen for messages
9 S6 _: \- V; N* W
socket.addEventListener('message', function (event) {
! _; H- i0 Q9 M# j: k4 z9 d9 X( H8 V
//图片地址5 B& X/ B @! Z8 h
img.src = event.data;
4 s- X1 F4 b, x
}); K2 n7 H! @8 E5 \ D" b1 f

复制代码

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

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

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

浏览过的版块