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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  ; m9 U" H# k' n1 {5 `$ C' y" s5 `
  2. //创建socket服务3 Q* }; i/ q3 j7 o5 [* S
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);7 c5 b( a; K  d: B* Z
  4. //监听WebSocket连接打开事件
    ; w3 H+ h) ?/ {( h9 l  [
  5. $ws->on('open', function ($ws, $request) {3 J  |5 g: R# a, d3 w+ z
  6.      var_dump($request->fd, $request->get, $request->server);: Z7 B+ n0 {. J
  7.      $ws->push($request->fd, "hello, welcome\n");
    4 `4 ?- P1 O4 G
  8. });: V' Q/ B; _6 ]# k) N

  9. % h  G  q3 [, T! |+ q" [: b
  10. //监听WebSocket消息事件2 V* C3 f! B- c: Q. ^
  11. $ws->on('message', function ($ws, $frame) {9 R' h0 x6 j* N& A; H
  12.     //推送消息给所有用户7 D' ]+ W& [; j, q: \4 g2 G% w
  13.     foreach($ws->connections as $fd){
    5 V" ]3 F/ f0 I& G! J8 Q% Q9 p; C, _( V
  14.         $ws->push($fd, $frame->data);
    8 h+ x0 l$ ]' W
  15.     }0 K# Z  ]6 p3 ]
  16. });6 p. x% s8 P$ x' B
  17. : c) `6 G( c0 `$ j# F$ W
  18. //监听WebSocket连接关闭事件8 N9 w& Y( C9 X4 B
  19. $ws->on('close', function ($ws, $fd) {
      T6 G1 |* e* t! R: q* j3 ]
  20.     echo "client-{$fd} is closed\n";
    3 G% @  M7 F3 Z+ W5 B. V% o, F
  21. });
    0 ?$ [' A7 a% {
  22. //启动服务
    * P3 o% R4 s) G: z
  23. $ws->start();  Z1 |3 A4 r' o8 D7 h& V

  24. 0 [; }0 k; m0 e& L
复制代码
1 @  L9 t0 b- ^/ t5 ^6 Y5 o
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
9 D3 U6 @* A4 D& b6 c- J& s8 z8 ~

代码如下

  1. //连接服务器
    8 i" O+ l8 M2 n% V
  2.     const socket = new WebSocket('ws://lm.com:9502');
    " E7 D' m% y) @1 {$ Y4 R
  3.     //Connection opened
    ! D% c9 y( R0 g0 K  u$ z' ?7 `4 ^
  4.     socket.addEventListener('open', function (event) {; l4 j: y' I: f+ x0 ?
  5.             //发送消息给服务器5 t8 B6 d( p& O0 y& B2 _, D
  6.         socket.send('Hello Server! im websockt');& ?/ h1 U; \( Y& R# z
  7.     });
    4 r" Z% n- `) x: m7 n5 r
  8.     // Listen for messages; B* E# y0 I8 ?& p4 \: |0 A
  9.     socket.addEventListener('message', function (event) {
    6 F9 V1 D& Z1 i8 y, g
  10.             //接收服务器返回信息
    - e" e: s8 ~7 i( }) J1 Z
  11.         console.log('Message from server ', event.data);
    ! Q! |! R8 T& k: U2 P9 @
  12.     });
    2 ^0 a7 M& w3 l8 u( z4 [" a; x- P9 S) Z

  13. + N0 b9 R) s3 G4 H4 [, @  y9 ?& Z
复制代码
伪直播主播页面
$ F# J' G# V* }4 R% d4 _

html

  1. <body>* i1 s( V" @# d1 I
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>2 v  h* q( P' p% F' g
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">' v* s) H6 R1 y- d6 k( X8 W
  4.         画布
    0 t" @4 Q" _% r6 Y- F$ K1 S
  5.     </canvas>- A* T$ |0 J$ k# r' T& m/ _3 j
  6.     <img src="" id="videoImage" width="350" height="700">
    7 }! y$ B3 r5 w) ~  X. H
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    " h; I: J4 h$ k. G$ L9 j4 u% q
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    + ~- z' w( G7 T! K/ Q" D8 q# }
  9. </body>8 S! y- _/ z5 U+ B1 ]# O4 Q3 X
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    0 \% U7 A. s. N% o, |
  2.     var c = document.getElementById("myCanvas");
    / I8 y( L( Y) `6 j- \( D' y
  3.     // var c = document.createElement("canvas");: ^8 b( `( Y0 W/ c7 X
  4.     var img = document.getElementById("videoImage");4 |5 R8 Q# s- ^) o
  5.     ctx = c.getContext('2d');! w8 h. E6 R' V9 I# ^7 m/ n
  6.     var dataUrl;
    + `1 [/ s8 S& `) v
  7.     const socket = new WebSocket('ws://xxxx.com:9502');  G" B. D, I4 C& W3 J- U
  8.     //Connection opened
    " x% e% K1 L0 Q
  9.     socket.addEventListener('open', function (event) {: p0 ?8 W) \5 x& h
  10.         // socket.send('Hello Server! im websockt');3 X3 h; C0 q& p0 q" C
  11.     });' D& m* o" o2 }
  12.     // Listen for messages
    . k1 S3 s7 }8 {' y
  13.     socket.addEventListener('message', function (event) {- O5 y' f& F2 m' D- b
  14.         console.log('Message from server ', event.data);1 Z2 `0 \! _( X2 [. Z% a* s
  15.         img.src = event.data;
    7 F, N( N) j$ \* s. a! H
  16.     });9 d' I: |7 {8 {9 D1 ~8 o& P

  17. ( ?* |& e( G0 d: q& |* H  }5 \! s
  18.     function playVideo() {
      h$ p& _+ u: {6 X" h4 A
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    : E" }# i! d$ N, ^, m& f
  20.         dataUrl = c.toDataURL("image/png");
    0 F! p- u% w9 @, {7 {) N* V/ q
  21.         // img.src = dataUrl;9 S5 p% s2 {0 H! _
  22.         socket.send(dataUrl);
    ) H  `4 x, t& a/ Z) Q9 G
  23.     }. R3 `  i& {% S( t* o
  24.     var tick;
    - s5 _1 V! ]) E  o2 `
  25.     function aphla() {
    $ |8 ]+ W) H' s. |3 \+ j# {: g. }
  26.         tick = setInterval(function () {% b7 e4 l' \4 l% }
  27.             playVideo();2 Y7 ]! B6 @  m0 ^' ?
  28.         }, 1);1 G( }5 X# b3 \
  29.     }
    7 ]+ n3 n/ Q* G# z
  30.     function vdStop() {
    , ^" M! Y" h' r+ x# i
  31.         clearInterval(tick);
    5 ~8 G) @0 f0 n6 M; \. ^
  32.     }  {, p/ Y, @! m8 Z9 B- w
复制代码
用户页面3 k2 z2 _  C  P8 W

html

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

javascript

  1. var img = document.getElementById("liveImg");4 b- A- y9 A8 ?8 B' o& T- f
  2.     const socket = new WebSocket("ws://lm.com:9502");/ s( t. h7 Q# T
  3.     //
    / ^( C$ ?# L" Z; @; i1 p* q9 e
  4.     socket.addEventListener('open',function(){3 {" ^) j) B: ?4 d1 a$ V$ X) X
  5.      socket.send('Hello Server! Im live.html');
    % d2 o  U- B3 U. U' a$ y6 J
  6.     });$ ^8 l$ F: t* P
  7.      // Listen for messages
    1 P8 |3 P& M9 g" V0 }
  8.     socket.addEventListener('message', function (event) {
    ) n* F3 [/ J( z' q  }
  9.         //图片地址' O. @5 B4 {+ |
  10.         img.src = event.data;8 a& M% n; }, c
  11.     });) K. O( z! o( u- |. H
复制代码

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

' l: l7 Z, s9 z2 ]* Q) ^- e# D, K6 `0 h

! i- i6 j; @  Y4 f
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2024-5-20 05:40 , Processed in 0.156074 second(s), 19 queries .

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