管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
伪直播功能Websocket服务器
: r- K/ m7 f W! C% f4 b' y- socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码 创建websockt服务代码如下 - error_reporting(-1);
1 K; Y0 p& m* ]. i - //创建socket服务( g+ I D' V) x, Y! ]6 v
- $ws = new swoole_websocket_server("0.0.0.0", 9502);
& {' L! W( J; Y/ |$ l) T - //监听WebSocket连接打开事件
# {9 j( x# r# S& \) s8 E( v - $ws->on('open', function ($ws, $request) {# V- ^* @' w; f' ?( M
- var_dump($request->fd, $request->get, $request->server);
+ m* R4 r- I- p/ Y6 J4 a# V6 T/ B - $ws->push($request->fd, "hello, welcome\n");
+ g# a- [' t# g7 ?' N* e3 G - });: i5 d6 M# Z( Z: Z
/ \- [% L% u5 [# l) ]1 x5 m7 H+ J- //监听WebSocket消息事件
) u6 Y6 t% H& x( v% _9 E - $ws->on('message', function ($ws, $frame) {
: m. \+ ]$ l( M1 P - //推送消息给所有用户
Q& G8 y# G' P2 W5 \5 |+ k - foreach($ws->connections as $fd){
T( v3 N7 ]$ u' w( ?' T4 u - $ws->push($fd, $frame->data);
. n. Q6 w! v& p' Z - }* k7 q6 V: m& k3 W: r) l R
- });
% u' K1 m+ s2 {5 k: i
! b- T$ j/ c; H- //监听WebSocket连接关闭事件
3 Z# O6 @1 W& S/ [5 G2 ~* J0 C - $ws->on('close', function ($ws, $fd) {
" _$ R* i4 n x+ r - echo "client-{$fd} is closed\n";& F8 u6 `* `9 o/ V# }& N8 S* g+ T3 T
- });
& j% {* K5 K& k4 @ - //启动服务4 { ~: B9 @9 R% Y2 U
- $ws->start();8 }: a. \: q" K, n- C" A
- , P: `1 Y8 [5 B) {* Z7 P
复制代码 / V* O! u$ T- F3 H7 z, O9 L
Websocket客户端- socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码 创建websocket客户端7 T4 @. ^" l" d1 b% Y
代码如下 - //连接服务器
; E, ~$ p% p1 \$ f4 ^ - const socket = new WebSocket('ws://lm.com:9502');6 _1 Z3 X6 V v9 `8 |
- //Connection opened; P8 g+ j' y9 h6 |2 v2 G
- socket.addEventListener('open', function (event) {
3 G/ I; [5 N' s. u( x" z: A' P - //发送消息给服务器
1 N! i, b# k% Y* X5 |3 k) w9 t - socket.send('Hello Server! im websockt');
$ e) H; D) G% Q+ A5 m* I* j - });
3 M2 \0 p: F# F H4 ]$ K3 E - // Listen for messages x& H) O# U4 l+ k& p$ H
- socket.addEventListener('message', function (event) {
4 w: B: r% B4 f; t& p" j( ` - //接收服务器返回信息7 c3 x. W% Z, `6 W5 ?) |% {
- console.log('Message from server ', event.data);. e3 _" l9 p- o+ n1 J2 Z
- });2 x; d, Y9 `1 M. J1 _6 W' t4 y
- ! W# U* U4 w& r& F8 U
复制代码 伪直播主播页面. U/ a; L! e7 D3 e- A
html - <body>
2 F$ E( M9 d2 B" b3 W - <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>( A: w$ j; j7 H
- <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
) T+ t7 n" w! M& L. ] - 画布& T0 G, L! u* d( ?
- </canvas>! O2 o6 J. u% Q/ I" p2 e' e
- <img src="" id="videoImage" width="350" height="700">
) p7 q# I$ o9 j. a6 i. C0 m' O - <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>- ^' H- x' @ G1 \3 M8 O
- <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
/ z" G$ E& `! U* g* s) L - </body>
, b/ e ~ C6 b& V! b1 t. Q' T, t$ L
复制代码javascript - var v = document.getElementById("myVideo");
& b4 b4 Y5 k- C" y& L - var c = document.getElementById("myCanvas");. r2 O$ v- m" X# W. r ]- D' N" ^+ r8 k C
- // var c = document.createElement("canvas");$ g0 K7 K5 W& Q7 m
- var img = document.getElementById("videoImage");1 [- X, J* H5 m9 Q
- ctx = c.getContext('2d');
/ U3 G- H0 P+ ] g8 {5 m - var dataUrl;
+ Z5 c3 @. V8 d7 F& Q - const socket = new WebSocket('ws://xxxx.com:9502');
6 t+ D) `/ V+ @9 t: a2 d - //Connection opened
0 ]% ~8 H: P9 S' _! X& V - socket.addEventListener('open', function (event) {. n t3 D9 ]# B3 O5 f( t0 u7 G
- // socket.send('Hello Server! im websockt');( }3 h' `. j3 u
- });
+ o/ s! z5 Y, A5 G0 L$ Q' k! v - // Listen for messages
$ `; o) b; \3 Q/ s$ n3 P% H - socket.addEventListener('message', function (event) {
5 p7 b$ C& e" g+ H" Z, Y - console.log('Message from server ', event.data);
( H1 e/ N) q3 g - img.src = event.data;
# ^8 ]( L6 ^ U/ P9 ~ - });& V; r8 ]$ [5 ~& O% `
- 4 J8 D( j* x2 I7 l% P; _
- function playVideo() {
+ ]' {( i/ D- D# R4 _ - ctx.drawImage(v, 0, 0, 350, 700);( b4 F$ P* `7 D4 Q" Z& v, `
- dataUrl = c.toDataURL("image/png");
8 [* R! p3 A- m# R - // img.src = dataUrl;- Y1 I5 ]1 A/ ?* p
- socket.send(dataUrl);/ B' ]3 ?$ `4 b/ h+ U
- }' I/ R3 x o& o" k
- var tick;1 g# ]: n; i4 k# b+ f8 K
- function aphla() {1 l: g! z' z* Y/ ?( u' k
- tick = setInterval(function () {( j& m2 K' ^& V
- playVideo();
* Y9 e; S" p; f$ W - }, 1);
1 G! b, Z0 x1 c/ W8 J) [7 O. y - }
0 G: Q$ F# q! L; `0 h7 Q$ s+ `, u. U& Y - function vdStop() {
( N# G1 [" ~ g - clearInterval(tick);( T: T+ E2 l' I& g H8 I
- }6 {% ~) {7 F! n3 L0 m
复制代码 用户页面
' F( E) c) {5 t- m* Jhtml - <img src="" id="liveImg">
复制代码javascript - var img = document.getElementById("liveImg");+ u; h% E# L! E! }
- const socket = new WebSocket("ws://lm.com:9502");5 D! h$ J) d' S; R' Q8 W! A
- //
1 t ]0 ]8 F! C - socket.addEventListener('open',function(){8 _# A) c7 f: {3 v6 @# H
- socket.send('Hello Server! Im live.html');
8 z. \1 |/ x9 `9 @+ E6 e D - });& b' J* X* G [* C% Y M7 n8 ]9 T( U
- // Listen for messages. H; \* [ U* i9 d3 \7 w7 v
- socket.addEventListener('message', function (event) {
, c) M: A. ]! W/ Q: X8 R - //图片地址3 ~' `( [' n$ l& z ]. m& z* Y
- img.src = event.data;/ Q2 {* H3 V3 [
- });
9 ]9 {/ }& k( H3 N0 f! i
复制代码真直播应是通过rtmp推流实现的,本次功能仅作为swoole框架的一个案例用法
$ ?- a$ [3 `7 L. m; V2 X/ J+ a3 P. _% H- Q" H$ X* X2 H
|
|