cncml手绘网

标题: PHP大道至简之Swoole伪直播功能 [打印本页]
作者: admin    时间: 2020-3-31 19:50
标题: PHP大道至简之Swoole伪直播功能
伪直播功能Websocket服务器
) o. \) }  F2 t
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websockt服务

代码如下

  1. error_reporting(-1);  5 y. t* `- d9 h: P: u+ B$ q
  2. //创建socket服务! A" H; [7 T1 w) \& |7 V1 Z" E# d
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);) b9 x9 B* C% C. W) a2 _& k
  4. //监听WebSocket连接打开事件4 D* \5 v* }' {0 L- x5 Z
  5. $ws->on('open', function ($ws, $request) {+ o8 u& n& P* ?2 h7 |0 i
  6.      var_dump($request->fd, $request->get, $request->server);
    0 x6 {5 K7 q3 ~6 n+ w1 b. T
  7.      $ws->push($request->fd, "hello, welcome\n");" N. J- J5 M( ^' _
  8. });
    ( v6 L& q5 i) N7 U( T5 m
  9. 6 |7 }, ]  R2 S5 _9 ^' l1 q
  10. //监听WebSocket消息事件8 ~% u7 k. w: h+ i! X
  11. $ws->on('message', function ($ws, $frame) {
    * E6 `- C/ f" t5 R; s( @6 B
  12.     //推送消息给所有用户
    5 b0 k* }( G* b1 j$ G& Y# B
  13.     foreach($ws->connections as $fd){
    # c# e" P/ n2 P
  14.         $ws->push($fd, $frame->data);' ^! c6 Z7 F) w# q1 F$ \- _+ k2 f
  15.     }
    5 ]5 c, K8 R) i  I% _+ ~! \* P, N
  16. });
    , x& |) I* E* r' R
  17. ; z6 ^- C7 c" G% e2 }- T
  18. //监听WebSocket连接关闭事件! p" p- [5 v: X! i
  19. $ws->on('close', function ($ws, $fd) {
      U+ L) n$ J" y5 Z2 _
  20.     echo "client-{$fd} is closed\n";
    8 t4 |% t  J0 r  Y0 z' x
  21. });! V- {; P. q- O. ~7 {
  22. //启动服务
    4 o0 `3 j5 Z: }3 o# V
  23. $ws->start();6 Q% L2 _# \0 I& Y0 n

  24. 4 R: O+ b0 Y1 J
复制代码
3 g2 G3 X9 J4 ^. a5 y+ B1 {0 }
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端0 {: ]# d& q: ]/ V2 |/ X  `( r! X6 `

代码如下

  1. //连接服务器. d# X, ^& v7 \. Y0 q/ m
  2.     const socket = new WebSocket('ws://lm.com:9502');
    7 w3 {# A- p, E" W
  3.     //Connection opened. u7 Z: v5 a7 S& e
  4.     socket.addEventListener('open', function (event) {& }! V9 n& E& M. v8 C. U" O6 d
  5.             //发送消息给服务器
    4 {# g, A1 ?3 V
  6.         socket.send('Hello Server! im websockt');& T2 p! X/ W% _+ w3 G
  7.     });  e; ]$ N+ k( O1 Q
  8.     // Listen for messages
    6 e2 X3 Q6 U% P( h
  9.     socket.addEventListener('message', function (event) {* J" B  l1 }5 S7 s! D" }) B
  10.             //接收服务器返回信息0 c: [9 B$ o& @# \. k' l( @
  11.         console.log('Message from server ', event.data);
    ' ^& x# K# t' K, x6 V; B
  12.     });
    + `" Q8 t: g1 w# [" {# G- ]  @. S- s
  13. , X* Q% K+ y9 q6 _! |9 p2 H. I
复制代码
伪直播主播页面
  Y/ T: d% \; v0 A) c# d- u

html

  1. <body>
    . E7 K. u! Y) |
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    6 `; c5 p/ g  r$ ?; ^  x4 y
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    ! D, J3 f5 W0 q( n
  4.         画布
    . B/ q# o: h9 b4 G, l  r( n
  5.     </canvas>
    ' r8 E& v% t( r3 O
  6.     <img src="" id="videoImage" width="350" height="700">
    + l* ~8 W9 Q! I2 Z
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>' ]' G! l. {1 P
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>! i, `: J" |0 I2 w2 E# f: u/ n
  9. </body>+ m4 `5 }: t% S& o$ R
复制代码

javascript

  1.     var v = document.getElementById("myVideo");, o4 |% k3 `# c9 z" Q
  2.     var c = document.getElementById("myCanvas");; U% D/ E& X  o$ K' w' H3 e
  3.     // var c = document.createElement("canvas");
    : I5 @3 K5 f/ D! `0 z
  4.     var img = document.getElementById("videoImage");1 D0 f, k5 p7 z/ [6 I0 }
  5.     ctx = c.getContext('2d');
    : R# ?6 H7 ?3 l' ?& R' D8 Z9 t
  6.     var dataUrl;
      W( X0 }: e! Y
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    + ]0 n" u, Y6 I! O2 }- t
  8.     //Connection opened; e6 ]$ Y' K! J. l8 n( v1 ~
  9.     socket.addEventListener('open', function (event) {
    % R* c; D  ~3 k6 l& G, M
  10.         // socket.send('Hello Server! im websockt');
    - c5 B2 b6 a  T( {* w3 L
  11.     });
    1 B2 ~- r5 e& B% t8 {# g
  12.     // Listen for messages; P7 K  H: O  S& O
  13.     socket.addEventListener('message', function (event) {
    2 l, [. m+ [4 [/ V" z( {  ]( D+ E
  14.         console.log('Message from server ', event.data);3 U: `9 i/ }0 I$ A, V0 L
  15.         img.src = event.data;
    ! }! c3 Q+ W3 b3 k- K4 @/ @0 i
  16.     });
      k" t5 k+ a4 [1 Z

  17. 9 q% k4 }& e0 _4 t
  18.     function playVideo() {  D& I' o* {" y1 s9 I
  19.         ctx.drawImage(v, 0, 0, 350, 700);6 m" ]7 F/ G# P$ Q# j; D! r
  20.         dataUrl = c.toDataURL("image/png");
    $ o; B3 A$ X, C" O+ Q7 T$ o
  21.         // img.src = dataUrl;2 Z8 m( u4 h" g5 I
  22.         socket.send(dataUrl);3 \& k+ N6 P( @; ^, i: k0 c6 a
  23.     }
    8 g  B# T. u3 `6 u
  24.     var tick;
    * ?3 }: I9 t+ n5 J; L: ^" H
  25.     function aphla() {" o; j% d9 K7 ]: q! |+ Q: x
  26.         tick = setInterval(function () {5 w. @7 r3 |- d6 z3 e0 D' e2 n
  27.             playVideo();9 f4 d0 h) k; E
  28.         }, 1);$ u5 i4 |( i% n6 |9 T" U
  29.     }
    1 r% e; A4 h( P: A
  30.     function vdStop() {8 E. Z  {" O8 j/ k( n' ^
  31.         clearInterval(tick);$ I. j5 ^8 }# M8 N( R" ^* r
  32.     }
    + C7 D+ h8 z9 ~" A/ F- O1 e4 m
复制代码
用户页面& V* l/ n* t0 e' c( z

html

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

javascript

  1. var img = document.getElementById("liveImg");
    ( Q" f$ ~2 C  P7 {! W
  2.     const socket = new WebSocket("ws://lm.com:9502");
    ' C4 p) M5 l2 Z/ y
  3.     //+ a$ {/ h( w& @* \- O
  4.     socket.addEventListener('open',function(){( h& M/ S2 @6 S5 t3 P7 f
  5.      socket.send('Hello Server! Im live.html');
    0 l/ U. B0 O9 W; r7 R
  6.     });
    - w, W$ b, y1 }' |, s; r* |
  7.      // Listen for messages$ I3 i+ m  w' |$ h* x
  8.     socket.addEventListener('message', function (event) {% r; }6 H/ u  `
  9.         //图片地址, T7 E$ M: H9 G$ k; _" C
  10.         img.src = event.data;6 j4 L2 V. N  p5 H
  11.     });8 I* Y8 G$ e8 l5 [; A! t
复制代码

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

" F, R; \' D4 B+ f. g7 w
9 i' c8 U2 O, S( }6 B7 a* v2 V1 r. G




欢迎光临 cncml手绘网 (http://www.cncml.com/) Powered by Discuz! X3.2