cncml手绘网

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

代码如下

  1. error_reporting(-1);  
    ' Q' S9 `5 m/ c& ]
  2. //创建socket服务! B( v! H6 v1 W7 r
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    ! X% j2 K6 Z- C9 s& j
  4. //监听WebSocket连接打开事件
    . j7 S! \! \! L3 W: O0 u! P9 u
  5. $ws->on('open', function ($ws, $request) {* B! I# f8 Q4 ?/ N
  6.      var_dump($request->fd, $request->get, $request->server);+ \3 r% k, h* j- [! n
  7.      $ws->push($request->fd, "hello, welcome\n");
    : o0 }6 e9 V* v1 J% t" ?+ J
  8. });& ?- j+ y6 B& H6 `* F3 g3 e
  9. ! b0 ^3 T% O, j8 |' m* x
  10. //监听WebSocket消息事件
    ; x( a; J# {, ~/ E$ v
  11. $ws->on('message', function ($ws, $frame) {. X! N8 _& j( q! V6 `- U7 Q
  12.     //推送消息给所有用户
    + `: `. N0 z( p8 ?2 X1 n: C1 p) K
  13.     foreach($ws->connections as $fd){) g) u, G; u- S- u
  14.         $ws->push($fd, $frame->data);3 N6 @+ ~, n' ?
  15.     }3 y/ A) P, P9 B* x
  16. });" K6 q* n- a! u' `

  17. " N% C) C# Z) `" a1 `3 |8 s- Q
  18. //监听WebSocket连接关闭事件
    4 R, F5 [3 t0 s2 `' o
  19. $ws->on('close', function ($ws, $fd) {
    5 w) r% U- k/ k& |) I3 E
  20.     echo "client-{$fd} is closed\n";
    ; g# ]4 A. {. _/ K( b
  21. });( x# s+ ~" ]* P; E# F: f5 o; X
  22. //启动服务
    3 \9 ^! p6 w7 k7 c) b6 [+ ^/ S
  23. $ws->start();
    1 ^" `' L- R; L0 I9 G1 m" O8 Z) Z6 {
  24. + K. E8 t$ S$ v3 w6 Q; ^. C
复制代码

0 z7 \3 G& K% U5 [" {+ hWebsocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端3 g2 ^: Y3 N) ~; \9 e9 M/ |

代码如下

  1. //连接服务器
    # `: W9 Y2 t% z% w) X; I
  2.     const socket = new WebSocket('ws://lm.com:9502');$ P! J: I/ D# {4 x) |
  3.     //Connection opened
    * N$ k( e0 E9 P0 r$ ?- x" k5 N9 W
  4.     socket.addEventListener('open', function (event) {: {* c! v- @( |* L: W
  5.             //发送消息给服务器
    ( u1 p- b' X5 \: G% c- R$ `* g
  6.         socket.send('Hello Server! im websockt');
    ; @& d% a. p1 i
  7.     });/ ^" P* ]3 S0 g# W+ w; ]7 T' L! W5 Q
  8.     // Listen for messages
    8 h/ c7 M. E/ l% q/ n& a, J
  9.     socket.addEventListener('message', function (event) {
    7 w# D( c) t* q9 s
  10.             //接收服务器返回信息8 y- |5 ^. Y$ [5 U3 h* t
  11.         console.log('Message from server ', event.data);5 H$ s0 Q' R* J7 ?- ?/ ]% N
  12.     });
    0 E3 s& d. \9 a8 M
  13. ( @+ v& I9 Q5 i1 W) l9 }7 r. H6 e
复制代码
伪直播主播页面$ s, F6 T4 T8 L* I# W2 Q

html

  1. <body>& m, S! |  [( I9 M$ x) {
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>: {( y8 {! \. h) A; u
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">* f" E6 P! ^& ~( B7 o
  4.         画布/ [2 H0 _6 s) x$ G
  5.     </canvas>
    3 Z4 d; B. `+ M( i8 ~
  6.     <img src="" id="videoImage" width="350" height="700">
    ; P, }  w! r( _
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>- t9 h" _, g( V8 s4 f
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    * N) U) d3 m- x' e7 e
  9. </body>* [8 O; K" r8 B+ l7 w' l
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    ) Z  V3 z* b' Q7 @
  2.     var c = document.getElementById("myCanvas");6 b1 i0 g6 z8 r+ {( ^4 h
  3.     // var c = document.createElement("canvas");
    % |1 L) @( k- @' @4 y- S
  4.     var img = document.getElementById("videoImage");  R( e$ O5 U) [! ]
  5.     ctx = c.getContext('2d');
      m9 K+ i( P1 V; A" y( x; t
  6.     var dataUrl;% v. j; ^( r" r; @
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    / F3 W& g9 r) v& W. l2 y% P" @
  8.     //Connection opened. t. p! d# {- b4 ~1 s7 T+ \7 \. [
  9.     socket.addEventListener('open', function (event) {
    3 Q7 \4 I. I6 p/ p
  10.         // socket.send('Hello Server! im websockt');2 ^8 \. S( c' q3 X" D( C/ G7 a
  11.     });, W# l9 I; _& N, G" ]
  12.     // Listen for messages% G1 d6 [9 O6 H
  13.     socket.addEventListener('message', function (event) {
    2 L! m& U$ P' y% Q0 ^
  14.         console.log('Message from server ', event.data);2 a- W% W( Y5 f$ e' J! F( x+ a
  15.         img.src = event.data;
    & d/ n- {$ j' m0 F3 w+ H
  16.     });
    + l5 R; g9 Z8 o/ h6 R* K
  17. * H2 m% w0 v4 A4 C# K' @$ i; G
  18.     function playVideo() {8 V6 o6 i0 D: z9 e
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    * G+ \2 Z7 m' g1 X8 c: L5 Q
  20.         dataUrl = c.toDataURL("image/png");
    1 f/ y, K  P, V
  21.         // img.src = dataUrl;
    * b! ~6 z4 v" u: _& j
  22.         socket.send(dataUrl);
    - j2 o/ \' w0 D: P6 \
  23.     }
    9 k& J+ J" t: T: x$ ]0 p. B
  24.     var tick;
    4 E0 E, k! U: v7 P! ]2 w
  25.     function aphla() {1 ]) |. s: @7 Q" B! }% n
  26.         tick = setInterval(function () {$ R  V* f* D' N& s. e7 \; J
  27.             playVideo();
    0 F! d* Q# X, C
  28.         }, 1);
    8 u) U* H  F  T* Q, B+ |$ l  s$ P
  29.     }
    - {$ q4 F5 J: C6 C# e2 t: Q
  30.     function vdStop() {
    . x" n; q1 C# d  A8 T
  31.         clearInterval(tick);
    6 F! v& p$ T( V  F, ?5 ]1 G1 }
  32.     }
    ! l: h! q* G- l* t' k
复制代码
用户页面0 B. z  j3 K, c" M

html

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

javascript

  1. var img = document.getElementById("liveImg");6 o7 y: E2 B1 ^: _; y& [
  2.     const socket = new WebSocket("ws://lm.com:9502");0 j' y, o; G  P- ?3 ~; z
  3.     //
      `5 P: D9 W* ~. X6 A7 _
  4.     socket.addEventListener('open',function(){
    . {# ?+ s# @; [
  5.      socket.send('Hello Server! Im live.html');
    ) g' C. e/ t1 p# [- d! ~/ Z# ?7 f- \/ j
  6.     });
    3 H- J% \6 T. {& W8 n
  7.      // Listen for messages0 [) c& r% D  \  x$ J5 [  {
  8.     socket.addEventListener('message', function (event) {7 `1 q5 p8 B- |7 N/ b+ s8 n
  9.         //图片地址
    % h$ V3 w2 J- i8 |
  10.         img.src = event.data;' p0 l& t) h0 i: J0 \& g/ d
  11.     });
    # W7 i$ x$ g$ k! w* ?" s5 {
复制代码

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

$ X, r2 z: f5 ]2 C

$ \" ?$ H1 G6 z7 U" c+ p



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