您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 14249|回复: 0
打印 上一主题 下一主题

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

[复制链接]
跳转到指定楼层
楼主
发表于 2020-3-31 19:50:03 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
伪直播功能Websocket服务器
4 F' ^9 @$ ~! y: K9 ]
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websockt服务

代码如下

  1. error_reporting(-1);  
    9 J. C* l: K+ p. k7 [9 M1 e# v# G
  2. //创建socket服务' \/ q' f/ Q; X" ~/ J
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);0 ?' o0 ~6 z/ z4 c8 v  b
  4. //监听WebSocket连接打开事件
    7 p2 C0 Q- N+ z% L9 b( [
  5. $ws->on('open', function ($ws, $request) {6 [) O5 J6 ]4 O) N
  6.      var_dump($request->fd, $request->get, $request->server);
      j) m6 [4 G! ?  X4 Y) m
  7.      $ws->push($request->fd, "hello, welcome\n");
    $ b4 C" _4 j4 U3 H3 ^$ z
  8. });
    - u6 u9 t: `0 ^4 F+ f! }# u
  9. ! l! J) h5 v) M. G. E' E5 _
  10. //监听WebSocket消息事件+ y8 V5 Y8 ^- v& C8 x
  11. $ws->on('message', function ($ws, $frame) {+ S, Z( A5 D* T1 h  g+ b- `; X
  12.     //推送消息给所有用户8 E8 m! N2 h1 ~' g6 Z7 a
  13.     foreach($ws->connections as $fd){& f6 E, X2 r2 L% Q9 j
  14.         $ws->push($fd, $frame->data);! M) U7 ]8 N7 z: y# n5 h
  15.     }
    & n& X, O5 l- |  s6 Q4 V! Y9 k& G
  16. });
    6 Y7 y& C$ J9 N' a- ?) ?4 X
  17. ! u* A1 f* `  s( D! i8 A
  18. //监听WebSocket连接关闭事件
    * e5 A+ G; K4 C& q$ B2 \
  19. $ws->on('close', function ($ws, $fd) {" C: D! }( h4 P( F* r) M7 g
  20.     echo "client-{$fd} is closed\n";! O4 I5 {. @/ K8 F( Z* O5 m& V$ d
  21. });
    / f1 W4 Z4 K' m' ]5 J, ]0 ?
  22. //启动服务( F: l! D0 v! G, Z! E
  23. $ws->start();
    2 ^& f7 d' X4 ^! D

  24. 8 W+ |% P9 B7 u
复制代码
# ]! c9 c1 n+ w4 Z
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
, p; \" }# `' r5 W

代码如下

  1. //连接服务器
    1 z0 }* i/ h/ f7 f$ X
  2.     const socket = new WebSocket('ws://lm.com:9502');  {" Q1 Q1 @" k( n7 V: @- _: t
  3.     //Connection opened* d6 ~8 n' _' ^3 l
  4.     socket.addEventListener('open', function (event) {
    5 D' B3 Q' ^8 t& o% F
  5.             //发送消息给服务器8 b0 n8 S+ w3 C9 L
  6.         socket.send('Hello Server! im websockt');
    3 u+ q4 H4 w8 }( \5 q. a/ Y
  7.     });
      J( w0 |7 B1 V- n4 C5 V* b
  8.     // Listen for messages. M* n* W7 w# G( u
  9.     socket.addEventListener('message', function (event) {
    9 ?  a5 w2 r2 p$ i
  10.             //接收服务器返回信息7 |; |1 s% I9 J! F
  11.         console.log('Message from server ', event.data);
    : D) r" `# Y8 j3 G/ W
  12.     });
    ) h3 L7 h; K( |

  13. 7 {) C; @/ B! \2 b
复制代码
伪直播主播页面
3 B& q1 Y: V5 j* u, V) \, I

html

  1. <body>
    5 ?' e* H$ i6 ]& A1 M3 L1 K
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    4 e4 Q) L' w+ l- X& f# E
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">8 D$ v- i$ s  Y+ J5 p
  4.         画布
    6 d) T3 x8 H. |0 I2 J# @
  5.     </canvas>
    : S5 A: N7 ?5 n- }/ }+ s
  6.     <img src="" id="videoImage" width="350" height="700">1 Q7 M* Q' g3 n+ \- S  J
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    2 g4 d. u# z( T4 _
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>( ?$ J: R$ ?! o4 w, }
  9. </body>1 i( s. P2 r# x  }
复制代码

javascript

  1.     var v = document.getElementById("myVideo");* y, [8 k" i5 T1 E! r+ i
  2.     var c = document.getElementById("myCanvas");
    7 i$ ^8 \% V3 b& v  D
  3.     // var c = document.createElement("canvas");
    5 K9 g% u9 l( l
  4.     var img = document.getElementById("videoImage");
    " ~+ M+ m. Q+ j6 ~( Q* B% F" T* d' q
  5.     ctx = c.getContext('2d');4 v) B( q% q2 ^6 Q7 q( M2 o# j
  6.     var dataUrl;& c, ^$ j( x* D) M1 M; [( u, C
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    2 z: b3 Y) W, r4 V
  8.     //Connection opened
      p+ }3 e3 e0 J. u$ z+ b/ q' O
  9.     socket.addEventListener('open', function (event) {
    $ W7 v( @' }* L# D# K
  10.         // socket.send('Hello Server! im websockt');. F7 W% r1 {; W' q& Q0 ?5 q
  11.     });
    # o. F8 j  a4 `5 `$ o: s
  12.     // Listen for messages% `# V1 s6 U, L9 i
  13.     socket.addEventListener('message', function (event) {
    2 ~/ s! R2 l1 h  b* _0 x
  14.         console.log('Message from server ', event.data);) P  @2 A" d2 |" \7 m" W
  15.         img.src = event.data;
    8 x( H( @' t+ r2 i# U& f8 F$ |+ K
  16.     });4 O4 ~: `, K0 q" y; {% Y

  17. " U) }5 W5 x/ {/ r$ G
  18.     function playVideo() {
    2 O. w3 t1 I% f) q, n6 \  _% K
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    / a, F8 j$ J9 ^! U5 i& n  }+ D) t
  20.         dataUrl = c.toDataURL("image/png");
    8 t' H  c% V1 g8 E1 v
  21.         // img.src = dataUrl;, M" b; z! L! L& m
  22.         socket.send(dataUrl);# g. |! H! K5 u4 a
  23.     }
    6 g* u+ o/ c5 |1 C1 N( k6 y3 R
  24.     var tick;: B6 v2 d( h- n1 f+ a
  25.     function aphla() {
    . V3 b7 @+ p" M  }) Q" H
  26.         tick = setInterval(function () {2 J7 q0 g* m( @
  27.             playVideo();
    . V$ x, e; A' }8 s3 a" E! s
  28.         }, 1);$ j2 ]0 \& @& r) C
  29.     }
    $ d: @% r' A0 Y$ w) z
  30.     function vdStop() {
    & e1 i9 k! g5 q" \
  31.         clearInterval(tick);
      D2 s8 d$ _( S$ |5 s
  32.     }; v7 p4 V% E, c9 B6 A. y' V8 n
复制代码
用户页面
9 f6 I0 I$ [1 v% _% \7 w" f. \) Y

html

  1. <img src="" id="liveImg">
复制代码

javascript

  1. var img = document.getElementById("liveImg");
    3 D6 Y2 i& z# l4 K+ }
  2.     const socket = new WebSocket("ws://lm.com:9502");) c6 w4 C8 t  c& c  P' n- o$ n1 B* q
  3.     //
    1 `8 \. @! w& X7 @
  4.     socket.addEventListener('open',function(){
    / Z* p- G( w2 L6 l
  5.      socket.send('Hello Server! Im live.html');
    5 u5 y, Y, n4 j  t7 ?$ }3 d. S
  6.     });  z1 f- w* D7 ^3 C9 r1 E, D) l
  7.      // Listen for messages' n8 U4 h/ I1 e7 f9 `
  8.     socket.addEventListener('message', function (event) {
    $ V: M9 q$ l4 H2 `1 b
  9.         //图片地址
    ! e- V. u2 X& I$ I4 S( G* W
  10.         img.src = event.data;
    6 f5 y- p8 I: }' _' ^
  11.     });9 i* s, `, e& l9 }/ G4 G
复制代码

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


  T4 V( o  ], m+ P& X  P9 P  c, S" L- {% z- @& Y
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-16 18:20 , Processed in 0.050360 second(s), 20 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!