cncml手绘网

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

代码如下

  1. error_reporting(-1);  
      q: j0 p' q. w9 ^/ R* u
  2. //创建socket服务4 T1 M: U5 F9 x
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    2 l' S8 W8 g% P# X
  4. //监听WebSocket连接打开事件# k( Q, p- ~! ], n8 v8 y
  5. $ws->on('open', function ($ws, $request) {- E4 {  s$ {% K) v2 e
  6.      var_dump($request->fd, $request->get, $request->server);
      S; _, u6 j/ Y& r3 t; V$ U$ G/ r8 r4 n
  7.      $ws->push($request->fd, "hello, welcome\n");
    0 q$ E& K# y. ]$ F8 t3 N
  8. });& N8 u0 a- W4 W& _4 d2 e

  9. 3 t% I, X, l1 M8 a4 u* m
  10. //监听WebSocket消息事件
    / ^* X9 p! a' x8 y8 N  F- Y, \
  11. $ws->on('message', function ($ws, $frame) {
      ?& c: M# Q  g  C
  12.     //推送消息给所有用户( R( D+ W* Z5 r/ v5 w+ |
  13.     foreach($ws->connections as $fd){$ ?6 |0 G8 G7 G+ @8 P/ U- n
  14.         $ws->push($fd, $frame->data);
    ! e3 K5 T" C3 j, R/ y6 o8 @* E
  15.     }: F! k+ @4 ~8 H
  16. });
    / Y. X" _/ d/ ~2 B
  17. 8 }4 V! q, z# g+ s5 w/ v8 a+ P; `
  18. //监听WebSocket连接关闭事件
    % T+ q. x3 r* T, w$ }0 I
  19. $ws->on('close', function ($ws, $fd) {9 g2 b/ p( B0 Q+ p6 P' L" c
  20.     echo "client-{$fd} is closed\n";
    ' o2 p/ V, u" x" c: g
  21. });
    0 d2 v6 v2 j6 b% s
  22. //启动服务
    5 i# d; B9 a/ F6 l- P
  23. $ws->start();, `! R/ |3 E. C" E* D/ a
  24. 7 }1 d# S. o! u3 f1 U
复制代码

4 R. V: D0 j8 E7 s' H1 Z% r& x, ~0 cWebsocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
5 B/ r$ c' L/ X" M4 N7 a+ E5 e

代码如下

  1. //连接服务器5 v2 ]* ?- b4 V) \% w) M9 n0 k
  2.     const socket = new WebSocket('ws://lm.com:9502');
    4 B$ q4 s' O- A- `
  3.     //Connection opened
    . l2 q' U5 y4 @- C5 \1 d
  4.     socket.addEventListener('open', function (event) {$ X4 \( Q! A, `6 G8 K
  5.             //发送消息给服务器
    4 s9 G; ~3 _; i9 U: V1 U
  6.         socket.send('Hello Server! im websockt');
    ; B" t& y* _* {+ p' m* m
  7.     });, Y4 D/ f9 ]  ^8 ]6 M1 o
  8.     // Listen for messages
    4 a" Z1 Q- W. r0 O
  9.     socket.addEventListener('message', function (event) {
    6 \$ N" ^% s- j9 }3 m; W7 n4 v
  10.             //接收服务器返回信息+ n% `; W6 ^* G0 p/ S
  11.         console.log('Message from server ', event.data);  ]) a! D- m" K' S! v6 q! n
  12.     });- k$ s0 [1 o) q; E' {

  13. + v2 v% Z! i5 g$ S5 C+ i
复制代码
伪直播主播页面
9 C- U) v; R! t) K# G

html

  1. <body>  L4 X+ _" [% X. ]6 O7 d1 A
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    3 s6 O) m3 e( o
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">. J) @  F4 z, G$ |- m% f* \
  4.         画布
    6 N/ C6 W2 C7 O; Z! f/ E
  5.     </canvas>6 I0 b1 `8 }+ c& U
  6.     <img src="" id="videoImage" width="350" height="700">* a4 N3 o* s+ q5 ^% E/ Z9 n1 f: Y
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    % B. x7 `3 e; @
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    6 E+ q& g& Z1 K( a' G
  9. </body>
    / y1 g# ?# D3 D7 A- ?$ T+ d
复制代码

javascript

  1.     var v = document.getElementById("myVideo");1 D& S: E' ]4 D* J% Z
  2.     var c = document.getElementById("myCanvas");; Y! w# U# [# l" D  e
  3.     // var c = document.createElement("canvas");7 w* p: K% ~5 o+ d$ ^6 Q- o
  4.     var img = document.getElementById("videoImage");
    - P! q8 Z) e/ x" G* y2 s
  5.     ctx = c.getContext('2d');# S9 i+ M. a$ X; V) G
  6.     var dataUrl;$ d* Y* M+ m9 [) v" y. {, \; }
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    ) L$ V2 @1 B) M7 f7 F6 f0 h, k% A
  8.     //Connection opened* ^5 j5 N$ k. _. W& V/ E( \' A
  9.     socket.addEventListener('open', function (event) {
    6 b  k. H: J- ~+ A+ |1 I
  10.         // socket.send('Hello Server! im websockt');
    8 y# ]7 T0 t6 T8 G
  11.     });
    7 n) f6 z& l' w, Y/ s- u' ]
  12.     // Listen for messages$ e0 }3 s  x2 U/ P
  13.     socket.addEventListener('message', function (event) {
    1 V2 c; o- [) l$ f) R* @% w
  14.         console.log('Message from server ', event.data);
    # y* ]( A( Q5 ?' I+ G" k
  15.         img.src = event.data;
    . C$ v9 a; w3 |# H( y; g. W
  16.     });; V" L# D9 j8 A% e3 _
  17. ' @5 c8 f" T* [9 Y
  18.     function playVideo() {, ^/ s) a& W0 N3 G+ d0 c: V
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    7 j- H& p5 c' a# {; Z* R2 H
  20.         dataUrl = c.toDataURL("image/png");' M7 [  s5 @2 ^$ f
  21.         // img.src = dataUrl;; e- `" @6 W  b3 `$ A  V
  22.         socket.send(dataUrl);5 a; {0 c" ]4 h6 [2 E. q
  23.     }
    5 y( `. I; d9 ^" c9 p, j1 J  \
  24.     var tick;6 P7 I2 m# c3 G$ j# T2 X
  25.     function aphla() {; J( b( r7 J" V' v
  26.         tick = setInterval(function () {+ l* H  b9 h& x+ n
  27.             playVideo();
    ( f6 E3 ]; b1 A0 r8 _
  28.         }, 1);/ \! u' k" `# v- w- W% ~
  29.     }+ @9 X0 T% A$ G* B$ P2 ]
  30.     function vdStop() {0 m! K4 Y3 p: v1 N! }
  31.         clearInterval(tick);
    + q2 ~. W# T9 v: x# X6 Y, w; p0 @
  32.     }- E! `9 V/ R7 u5 O8 _' U
复制代码
用户页面) K: n% c4 ^* I, A) d! P

html

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

javascript

  1. var img = document.getElementById("liveImg");
    & `$ [, s8 g+ I, A
  2.     const socket = new WebSocket("ws://lm.com:9502");) @1 ^( l3 H4 b0 K
  3.     /// I0 k5 |/ U5 p
  4.     socket.addEventListener('open',function(){
    * A1 R2 i3 }; F& R, Z# m4 h
  5.      socket.send('Hello Server! Im live.html');
    : J; Q! U, i& n
  6.     });
    . U, R3 S) S: y" f0 A
  7.      // Listen for messages
    3 {0 q2 B  u1 S! o0 a
  8.     socket.addEventListener('message', function (event) {
    5 Z" x: u+ c9 L" x' H3 E* B$ t9 H
  9.         //图片地址
    ! T5 |7 [& w" p' p0 ~! G5 F) [+ B5 m' q
  10.         img.src = event.data;
    0 C+ T+ H( L. R1 K, n% M
  11.     });5 D# q/ c/ a) @8 b3 Y
复制代码

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

0 T1 ^& W7 E: L- e: Y

) A; ?" R3 x3 _



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