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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

返回列表 发新帖
查看: 9760|回复: 0
打印 上一主题 下一主题

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

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

代码如下

  1. error_reporting(-1);  
    $ o8 ~+ \& O, g* R" d5 N
  2. //创建socket服务  G5 d$ I* V; F9 D( e1 R
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);+ o4 Z% \* g: }* Q
  4. //监听WebSocket连接打开事件
    % H* N+ g, ?7 t" b+ y
  5. $ws->on('open', function ($ws, $request) {8 X; E* Q" p! ^- o
  6.      var_dump($request->fd, $request->get, $request->server);
    9 N7 L1 T! U+ H% u, C4 {1 }
  7.      $ws->push($request->fd, "hello, welcome\n");# a. _1 }/ }6 v9 q/ X1 A
  8. });
    4 V+ d- P  l' v2 b' o2 ?7 w# B

  9. % G1 o! c! i% A' e" k* G
  10. //监听WebSocket消息事件
    , J8 S+ x: T! n& F8 _& U
  11. $ws->on('message', function ($ws, $frame) {5 I4 c' H; e/ u& ], ~, d0 W
  12.     //推送消息给所有用户
    ! |5 T# z' u- j; S) `' g$ Y" e
  13.     foreach($ws->connections as $fd){: h4 P0 `' C9 [) s
  14.         $ws->push($fd, $frame->data);
    2 h. H& X) J" T3 q1 e1 V0 _
  15.     }
    + o8 Q7 B3 e; ~6 Z
  16. });) ~8 h% u. q( B
  17. 3 Q6 _9 h( v% D  ^
  18. //监听WebSocket连接关闭事件0 q9 S. l  K( I: a" Y9 Q* ^
  19. $ws->on('close', function ($ws, $fd) {
    ! a* J8 a7 b( i2 ]) Z$ _
  20.     echo "client-{$fd} is closed\n";& R8 \" {. b( A2 ~# R5 {4 ]
  21. });
    : o. B* u( H( p8 t8 @
  22. //启动服务: K7 C0 |# I7 C: q! f5 h
  23. $ws->start();8 d3 H, N0 X3 z! t# }5 z

  24. 7 x+ m  c) U. i$ ~" R2 h( X2 F. Q
复制代码

2 O* x* {9 k! m& s8 i  R8 xWebsocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端+ M/ q% Y$ g/ O* H# ?

代码如下

  1. //连接服务器1 W6 ?8 d& K4 u& r' h* ^8 w9 b+ x1 K
  2.     const socket = new WebSocket('ws://lm.com:9502');
    + G' P' I1 {3 l3 z
  3.     //Connection opened% v8 h% ~4 Y% s5 k1 t/ S
  4.     socket.addEventListener('open', function (event) {
    " Q+ y* [! Q2 p: I6 q6 ~: |4 b
  5.             //发送消息给服务器/ W0 q0 |5 _8 r; e1 C2 c. F8 N4 M
  6.         socket.send('Hello Server! im websockt');
    # D$ O* m$ G9 p. M
  7.     });0 d1 j3 B: j; V
  8.     // Listen for messages$ }3 x: M$ R+ F2 T. U+ B
  9.     socket.addEventListener('message', function (event) {
      z, q" L) a% d9 W
  10.             //接收服务器返回信息( [, t% g" F% r% E; e% M3 x* }
  11.         console.log('Message from server ', event.data);. [3 p) s0 \$ j7 J2 e
  12.     });$ ~* X( f# ~9 o( M' R$ f  ~

  13. 6 x+ R% z( v0 |& G
复制代码
伪直播主播页面- I4 d5 Y- r, G; k+ B

html

  1. <body>
    2 d; `1 v0 L' B- `6 p; o, _( \# ]
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    5 s" N% t! j+ p
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    5 v  s" d$ `+ f) Y' [" I
  4.         画布9 d5 K, O' I' l. c8 S/ d5 D
  5.     </canvas>+ p$ a$ O; q1 |( k
  6.     <img src="" id="videoImage" width="350" height="700">8 x; m9 \6 }/ q# |3 D/ L
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    3 x+ S, a) o  a3 C, D8 }
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    # X" R2 V& D* a/ N* }, G( M0 o9 V
  9. </body>/ U3 A0 ^" z) q2 h0 X, w
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    2 k2 I! e) V2 J' h$ v
  2.     var c = document.getElementById("myCanvas");5 y, _2 k: Y/ j  k2 I
  3.     // var c = document.createElement("canvas");
    9 \4 g! D3 _3 ~7 S* e  i3 W* i( ~  w0 g
  4.     var img = document.getElementById("videoImage");  j* p$ j. l4 b2 W! f% o, A+ X
  5.     ctx = c.getContext('2d');: Y8 _/ P7 W1 G
  6.     var dataUrl;
    ( i/ w* O& T3 P! v- }5 i# ^
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
      _" l# \# J" g
  8.     //Connection opened
    . j9 Z1 R% w6 S: P. W0 ^
  9.     socket.addEventListener('open', function (event) {% j6 v2 x2 A) {- n$ C
  10.         // socket.send('Hello Server! im websockt');
    ' l( M2 j5 u3 d* i
  11.     });) t9 k! V6 z; F. l6 c; }
  12.     // Listen for messages( W& Q+ K2 z, K2 ?, n4 _! @; p/ b* Q3 F
  13.     socket.addEventListener('message', function (event) {
    ' q; }) ^2 Y$ |0 D1 e
  14.         console.log('Message from server ', event.data);3 |) x. ^: A( {0 n1 C; Z
  15.         img.src = event.data;
    7 \1 Q" b5 ^% R% K) ~# t, K
  16.     });
    2 n1 D) c- R/ ~6 ]0 @# E0 E* u7 Q
  17. + ]' M. F( r! G' ~
  18.     function playVideo() {
    * I& k0 E. v/ M- Q
  19.         ctx.drawImage(v, 0, 0, 350, 700);9 `  s7 a; D2 e( ~+ r2 F
  20.         dataUrl = c.toDataURL("image/png");+ |" T: K5 |# H5 ?. L
  21.         // img.src = dataUrl;
    - z/ D' ]5 \# p0 C1 y0 q
  22.         socket.send(dataUrl);
    ! ?# b) M: v! K* S/ ?% G3 m
  23.     }4 `! b) L( M# Q
  24.     var tick;
    3 |! q4 q2 r1 ?) b3 f
  25.     function aphla() {) _! C. m, |* u! P) z: a9 i
  26.         tick = setInterval(function () {
      P! V, z4 {7 E4 l# _+ W( R  p% `  u
  27.             playVideo();$ \5 r: ^& a) q4 G, S. n
  28.         }, 1);
    ! d' A9 o% i' }- y, \4 R% {
  29.     }5 u% R+ @9 [1 z1 ]* e
  30.     function vdStop() {3 u8 Y' B6 s6 b# ]) H8 n5 D
  31.         clearInterval(tick);6 q0 Y# _' X4 P' X1 W
  32.     }2 L2 m3 {0 m' F& @6 R# h" @1 g( C
复制代码
用户页面8 X& K: C% x' B! E- ?, Z

html

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

javascript

  1. var img = document.getElementById("liveImg");; m9 c  O. |: n$ M: S0 O
  2.     const socket = new WebSocket("ws://lm.com:9502");
    0 \+ a$ ~4 v4 H/ m& _+ ?' r/ J
  3.     //
    : B( A& H3 M! W
  4.     socket.addEventListener('open',function(){
    # r8 r& a" A2 E8 Y; s
  5.      socket.send('Hello Server! Im live.html');; i) l4 {* C( G6 f
  6.     });: j9 X! Z& ]' e: T( m
  7.      // Listen for messages
      ~% q6 E1 Z( [
  8.     socket.addEventListener('message', function (event) {5 S0 v9 W6 J$ S$ R1 s+ @: n
  9.         //图片地址. }5 d" S, `; u" ^
  10.         img.src = event.data;, p6 M( Y& V2 F  d
  11.     });" F5 r. F8 \* `. H  y- Q* F3 h
复制代码

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

) R0 k; I8 i9 H: W
5 z' v* K/ R* |! \8 P
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2024-5-17 18:18 , Processed in 0.125763 second(s), 19 queries .

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