cncml手绘网

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

代码如下

  1. error_reporting(-1);  
    1 a/ Z7 m+ t" ]6 w; C
  2. //创建socket服务
    ) _4 M/ ]' K+ U& D6 T0 S  H& }, T
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);2 g) h* M0 H$ z6 I: a0 K; I9 T
  4. //监听WebSocket连接打开事件
    ) b7 o$ T/ l+ w. @
  5. $ws->on('open', function ($ws, $request) {5 e) t1 R9 M9 r% A5 p3 H
  6.      var_dump($request->fd, $request->get, $request->server);# `: c7 x8 j( N# P) |5 L% d
  7.      $ws->push($request->fd, "hello, welcome\n");$ e3 N" o. R7 V
  8. });
    6 p7 S  V2 P  f
  9. + r% [: D+ ^' }! e- M4 x/ E: ^3 V3 h; Z$ k
  10. //监听WebSocket消息事件. ]2 `" b8 K: G6 O1 d, n
  11. $ws->on('message', function ($ws, $frame) {# O: q1 ?, R* y7 u8 K
  12.     //推送消息给所有用户6 f& o# p/ b5 H& t% N
  13.     foreach($ws->connections as $fd){
    ) I/ |& `5 A5 m6 O( z6 I) N
  14.         $ws->push($fd, $frame->data);
    ) n$ L% F' @/ U* d
  15.     }
    8 H, h$ b) M# q, ]( L6 s
  16. });
    : G5 c5 M5 q" G* d

  17. 7 X4 [! E* J' k
  18. //监听WebSocket连接关闭事件
    ; V, `2 i0 B' k$ |  h- ]% Z
  19. $ws->on('close', function ($ws, $fd) {
    - s9 K8 s0 g7 I  X
  20.     echo "client-{$fd} is closed\n";
    2 u# n$ Q; `/ y- D  b
  21. });
    " X3 X" t3 k& g% H6 `! V9 y2 d
  22. //启动服务" |0 r8 T4 `8 J( U$ k" a" R0 a+ X# p
  23. $ws->start();& C7 e) L: j9 y
  24. , n1 [- c) M8 N5 l. I, _* u
复制代码
" y* [8 F% }4 D8 m" [9 ?
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端6 l5 e; _1 e7 p; d6 P( ?! C

代码如下

  1. //连接服务器
    2 G, F* I2 y# ~) J5 r4 f' J
  2.     const socket = new WebSocket('ws://lm.com:9502');
    & K: M: K% V/ v- D/ s
  3.     //Connection opened
    2 t- w" A$ Z" k0 m9 W( f
  4.     socket.addEventListener('open', function (event) {3 _( Z. x& V* B5 p& d
  5.             //发送消息给服务器& t% A" W1 P1 A4 O( v' c
  6.         socket.send('Hello Server! im websockt');
    6 ?) o- H5 d: a: n1 e( l
  7.     });
    # X# c0 C# j. r3 w0 ]3 R9 V
  8.     // Listen for messages9 s' w% H  t7 q* W/ P7 e% |# E
  9.     socket.addEventListener('message', function (event) {
    6 @" q0 F) d3 c2 k3 P5 }7 P2 b
  10.             //接收服务器返回信息! Z0 V3 O# L+ k3 L
  11.         console.log('Message from server ', event.data);: G! o6 z; d* D; \$ p, Z# j
  12.     });
    + Y" k/ ]$ P$ W* M3 Y
  13. ) ^3 X4 j  a' V- p0 q
复制代码
伪直播主播页面
( t2 Y8 Z3 j. u4 t

html

  1. <body>9 e# m/ U0 b- a* ]" z( N* A# i
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    " m3 N, g6 |# l3 ]* d. |, S
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">+ z0 a3 Y9 C7 B6 v% F
  4.         画布
    " b5 {7 v! ?; k9 x+ X
  5.     </canvas>. D4 `; h/ a! w
  6.     <img src="" id="videoImage" width="350" height="700">
    , ]1 v0 J7 L0 l' ]' j' d  @" A, |
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>* L* ~- q; {, C' P$ S
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>* x" i+ J: g$ E7 ~% A
  9. </body>
    % C2 u3 x: ]# s* G, Q' n# F
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    + e" P) Y8 R% i' {; g/ o
  2.     var c = document.getElementById("myCanvas");2 X2 ~1 R' `7 M0 J2 w
  3.     // var c = document.createElement("canvas");
    1 O: D! `+ g5 }& C6 `, C
  4.     var img = document.getElementById("videoImage");) A" O) y3 m5 y  R8 m0 A
  5.     ctx = c.getContext('2d');
    * w: i, U( X8 F
  6.     var dataUrl;
    6 l# }4 r' l- H9 ]. c6 g5 z
  7.     const socket = new WebSocket('ws://xxxx.com:9502');5 i. z2 s& ~1 P% Y8 _$ N
  8.     //Connection opened
    & Q1 K; l- N1 F$ d
  9.     socket.addEventListener('open', function (event) {2 i1 s7 b; @& _. U
  10.         // socket.send('Hello Server! im websockt');! f8 Y3 `- q" C) c; U: f7 q
  11.     });
    ) y# b( O+ P) O) |. V1 y$ g
  12.     // Listen for messages* a4 Y4 e6 V) W7 \* `1 [3 R
  13.     socket.addEventListener('message', function (event) {$ z6 K- ~( O: L& K" t$ k  R
  14.         console.log('Message from server ', event.data);
    * M$ ]! e( j* i4 C& l
  15.         img.src = event.data;! \+ u% u( C( w) A$ y* `# c: j
  16.     });
    " v; P% O- {0 w. }) c( i; y! n) p

  17. $ y* B  _/ s9 i- L
  18.     function playVideo() {- g& e6 J2 N) ]& Q
  19.         ctx.drawImage(v, 0, 0, 350, 700);3 J8 o+ Z; z+ Q) v  v4 M4 F
  20.         dataUrl = c.toDataURL("image/png");
    0 |- \# r: j; k
  21.         // img.src = dataUrl;9 W/ F' w0 H# V( n8 o7 E
  22.         socket.send(dataUrl);
    5 j8 n  w6 X; d4 q+ v
  23.     }
    ; t- Z! z% v$ [
  24.     var tick;
    " W9 X8 h! g6 k- c7 P
  25.     function aphla() {
    9 \1 f6 H' y/ M  p2 ^4 b
  26.         tick = setInterval(function () {
    7 w8 [: p# U4 c9 m0 J1 E; y) x
  27.             playVideo();
    # u* [+ M/ N0 w4 E4 g
  28.         }, 1);
    $ j! n9 g( t" q$ c2 h6 Q
  29.     }
    3 ]/ V5 A4 `% e4 ?) ~' z
  30.     function vdStop() {
      E& ^2 ^* V* q# r: [8 r
  31.         clearInterval(tick);
    ; `4 G5 V. [! P$ ^' c' n
  32.     }- K  J" X5 }- ^: J! n5 t8 B
复制代码
用户页面. ^9 L7 l' z0 ]/ n

html

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

javascript

  1. var img = document.getElementById("liveImg");
    0 w8 _! l0 S" C5 ~6 I* D8 e
  2.     const socket = new WebSocket("ws://lm.com:9502");& C0 z. `8 U" `9 X  {0 [/ L
  3.     //
    1 [* {0 j2 y( ~/ y
  4.     socket.addEventListener('open',function(){
    & F- ]( |* S8 k7 T0 e
  5.      socket.send('Hello Server! Im live.html');4 @/ ~% P5 M" ?6 m8 {0 q) ]
  6.     });  u7 F, Y$ Q+ {
  7.      // Listen for messages) T6 z7 Y. ^3 q  f6 l
  8.     socket.addEventListener('message', function (event) {
    0 m+ w5 D* @/ s6 O& i# K
  9.         //图片地址
    : S% d7 {( M; F, ^$ ^
  10.         img.src = event.data;
    4 ^4 ^1 s9 X$ G
  11.     });
    " M/ k: b, X9 p6 b& h
复制代码

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


, q% f+ M+ W9 ]% g- E9 \3 |5 c+ y( ]; `9 C) a2 L! R, A




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