cncml手绘网

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

代码如下

  1. error_reporting(-1);  0 n9 I  W8 X8 H5 ^
  2. //创建socket服务
    3 m- R# v4 l5 m5 k' t
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);5 z' @, S9 b9 I( U# q! K8 G
  4. //监听WebSocket连接打开事件9 P7 ~8 h: Q& I/ R7 p1 Q" i
  5. $ws->on('open', function ($ws, $request) {( f( w' o/ q, n: W) f1 S9 g! i5 j
  6.      var_dump($request->fd, $request->get, $request->server);
    * x$ T- ?/ b" }  A
  7.      $ws->push($request->fd, "hello, welcome\n");
    ! K4 v5 R+ @0 z7 e3 ?
  8. });! O+ f2 u7 q6 W. g8 D6 Z; g

  9. . {; g' u* H7 `, V( Z
  10. //监听WebSocket消息事件+ T6 q- j, _+ [5 V5 \1 d" ?
  11. $ws->on('message', function ($ws, $frame) {8 H, Q9 R; `( U! x
  12.     //推送消息给所有用户
    : P, @! c: C5 |2 \$ S* P: \: J5 P
  13.     foreach($ws->connections as $fd){" }4 G* c2 ~) @0 U9 ]3 C* x
  14.         $ws->push($fd, $frame->data);
    * V+ S, ]) _1 c: r% P$ V
  15.     }
    # @5 V- T! G! H2 g' F8 z: @4 {. ~& X
  16. });1 T9 @' N! W8 `+ @( [
  17. 7 [) k) s- ?+ o  j
  18. //监听WebSocket连接关闭事件; ]* g3 f& {1 p# S8 ?' B; u! w
  19. $ws->on('close', function ($ws, $fd) {: J. _: w2 c; M1 f7 _7 _
  20.     echo "client-{$fd} is closed\n";
    7 @% b% ~. I+ L. S2 U! T5 P; O
  21. });
    - }3 m! h1 _0 x% f: {; A
  22. //启动服务- O9 G7 h) R( s9 q6 ^
  23. $ws->start();
    6 o! h. I/ A. M" Y- T

  24. ( q1 J6 L5 {- I; R
复制代码

3 c0 f$ M% k( C, ^, |Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端& z+ O; X8 G+ J

代码如下

  1. //连接服务器5 z& [3 C7 T$ R+ J  o
  2.     const socket = new WebSocket('ws://lm.com:9502');: {' W8 y" ?1 g! E" H0 i
  3.     //Connection opened: o- T' J% d1 ~
  4.     socket.addEventListener('open', function (event) {, Y3 p" x) ?" ]; e8 J
  5.             //发送消息给服务器" S7 v  j( }; A* b2 h3 E
  6.         socket.send('Hello Server! im websockt');
    * t" E! L5 S% N: a9 a2 O- _
  7.     });
    % M) R( t, A, I! ]
  8.     // Listen for messages
    + ^9 ?4 s$ J: A  ^0 n' c/ ?6 v- M
  9.     socket.addEventListener('message', function (event) {- n7 s; U' R; Z  p
  10.             //接收服务器返回信息
    ! ^, x5 K( d& ~
  11.         console.log('Message from server ', event.data);
    ) Q6 r4 v7 S+ z6 _
  12.     });) K# p* S/ x. ?/ [0 N; J
  13. 1 }% @: ]+ h. C+ A
复制代码
伪直播主播页面
/ B8 p" Z) T  q2 e5 b( K

html

  1. <body>- e  o1 x5 K1 P2 r
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video># y* a7 C( d  p
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">' O- V) {% E# ^$ ^" j" ~
  4.         画布& y" w( c6 Q" M) j7 Q' K
  5.     </canvas>( S4 D! Y" v; z! B: X; B5 N
  6.     <img src="" id="videoImage" width="350" height="700">
    0 i" U# K1 ~3 g! F8 \
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    " V% ~; z8 }. B# a7 \2 i, G
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>+ w+ T* _& h6 t
  9. </body>
    3 |  g( v9 F! J
复制代码

javascript

  1.     var v = document.getElementById("myVideo");/ x" l6 b$ T% Y$ R; C  ?
  2.     var c = document.getElementById("myCanvas");) g- ~: s" i3 L0 f5 F
  3.     // var c = document.createElement("canvas");. ^+ t; W; B* Z7 v/ X" H' X" N
  4.     var img = document.getElementById("videoImage");4 ?4 z( A, @, G* Y4 i
  5.     ctx = c.getContext('2d');4 A1 ^9 D, m9 n- e4 q
  6.     var dataUrl;. i9 T* E3 V. b$ }8 y6 ~0 j1 A
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    # X. O' I$ J' Q, s) |2 u
  8.     //Connection opened4 ~* F  [8 o$ S0 z& O
  9.     socket.addEventListener('open', function (event) {$ i+ z! d) t- K. J9 g
  10.         // socket.send('Hello Server! im websockt');0 Z0 `; m8 ~6 H. G  r/ y
  11.     });
    . l: {0 c& P4 [8 U/ r, ]; o
  12.     // Listen for messages
    3 x! g0 w8 V* d1 C' z- E! X
  13.     socket.addEventListener('message', function (event) {# @2 r# V& p, G& Z
  14.         console.log('Message from server ', event.data);" f* B* a$ S/ o- O
  15.         img.src = event.data;
    2 V; `4 u  P' S. n
  16.     });# U' n* X( d, v  O3 D* ~
  17. 3 E  S  X- k  _$ A" Q
  18.     function playVideo() {
    8 I% {1 }% n# M
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    + Y5 k$ a# A8 f; K' d
  20.         dataUrl = c.toDataURL("image/png");
    7 s. T' P) X& @/ O2 n2 I
  21.         // img.src = dataUrl;: a; _$ Z+ s5 O, ]7 B
  22.         socket.send(dataUrl);
    5 D- \/ Z, b6 _; v! i% f4 O  e
  23.     }
    $ S% n3 S: z$ e, R" E- n" D( m" L* p% f
  24.     var tick;
    6 Q" |3 f5 D2 V- F- N4 x- {% M
  25.     function aphla() {0 _1 o$ j4 C. `7 F" c1 Z# a% b( M
  26.         tick = setInterval(function () {: w. t4 `* ?9 _6 L
  27.             playVideo();
    8 A& S( c) C+ I
  28.         }, 1);# z6 S* w1 V1 P2 Y0 Y
  29.     }
    - J/ J, o/ i7 L7 |+ e/ _
  30.     function vdStop() {
    0 s8 y& e+ e* s! A0 ]4 w' z
  31.         clearInterval(tick);. O: ~3 u5 K- {3 m7 t% A
  32.     }4 _: H% O4 [0 ^
复制代码
用户页面. C& E( F+ K3 n2 q- U

html

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

javascript

  1. var img = document.getElementById("liveImg");
    6 A3 x% b2 D- @* Q7 P. q  M
  2.     const socket = new WebSocket("ws://lm.com:9502");
    4 E3 S# G+ }6 W- T  s" L3 x
  3.     //
    2 `- \/ s* r/ o. C
  4.     socket.addEventListener('open',function(){
    8 T, y+ j9 [+ I$ O( [
  5.      socket.send('Hello Server! Im live.html');$ \' \( t$ ~  ]# Z+ D
  6.     });
    ; Q9 A# C, B) J! o% [: O: k5 V0 ~
  7.      // Listen for messages6 q! N! \$ }& u" S
  8.     socket.addEventListener('message', function (event) {* P; T" t/ Q% W/ \5 u, a+ r
  9.         //图片地址$ c; T" X* V9 h; E* S. _  @
  10.         img.src = event.data;
    . L/ U, r# c5 f' K+ i) Q2 o
  11.     });
    / C5 u6 k, p/ Y- |* O
复制代码

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

  x; z$ A$ {1 j: d' f# F. a% U
' a4 i/ y2 X# x) j" F5 P




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