您尚未登录,请登录后浏览更多内容！ 登录 | 立即注册

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

返回列表 发新帖
查看: 14252|回复: 0
打印 上一主题 下一主题

[swoole] PHP大道至简之Swoole伪直播功能

[复制链接]
admin
跳转到指定楼层
楼主
发表于 2020-3-31 19:50:03 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
伪直播功能Websocket服务器, R0 `; Q$ ^- Z
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websockt服务

代码如下

  1. error_reporting(-1);  
    & y) J( x! G8 l
  2. //创建socket服务
    : }2 ^& u  o% i- S
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    " D/ x2 Y8 N4 Y  A& u
  4. //监听WebSocket连接打开事件/ O$ T5 Z- L; Y6 I7 f
  5. $ws->on('open', function ($ws, $request) {
    4 V! |5 t# w# ]  V% {  y# Z
  6.      var_dump($request->fd, $request->get, $request->server);8 R- X+ a, X/ e3 \& {! V! T
  7.      $ws->push($request->fd, "hello, welcome\n");) k5 q3 a  u& J0 }
  8. });
    ' Y0 ~, |: ~  _! P
  9. " o; f1 R6 ]1 h0 m
  10. //监听WebSocket消息事件: q& }0 }. I+ E2 ?
  11. $ws->on('message', function ($ws, $frame) {* O7 H- f0 `, U& g3 P: m8 A
  12.     //推送消息给所有用户
    1 C7 N& M/ Y5 ]) U
  13.     foreach($ws->connections as $fd){
    ! M* a1 x5 B' d- d9 v3 P: w
  14.         $ws->push($fd, $frame->data);
    . `3 V9 s. J6 P) ?2 M1 `8 w6 n
  15.     }% m; y* j# o" @1 v5 b
  16. });8 A" l6 J' b% }6 ]& j) d9 W
  17. ( [9 `+ _% S# p# i
  18. //监听WebSocket连接关闭事件
    2 @$ w! p' |* M1 K, M$ T* b8 v
  19. $ws->on('close', function ($ws, $fd) {3 _" ?& `% J: ^% B
  20.     echo "client-{$fd} is closed\n";
    # `3 d* y- U& j2 k8 [0 s
  21. });
    0 {& d! |* X) s& f. O
  22. //启动服务6 q8 L# h" h/ ^) \
  23. $ws->start();0 O+ V. M! W( a  g

  24. ( a, _+ t. f( B; c  }4 }0 H
复制代码
. n% `1 `! r0 _8 U' C' _" o, i
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
- q, b6 B9 _+ _: w2 r0 Q

代码如下

  1. //连接服务器$ i* Q  G  V. y% L4 o
  2.     const socket = new WebSocket('ws://lm.com:9502');) n3 u* T" x$ J
  3.     //Connection opened) c$ M7 n2 W' u: K
  4.     socket.addEventListener('open', function (event) {
    # q: D$ L* d3 ]/ c6 X
  5.             //发送消息给服务器
    , x2 `, b# b2 |) ~
  6.         socket.send('Hello Server! im websockt');6 Y3 p- w$ K9 z0 r
  7.     });
    6 |: m& _$ @/ o) \1 F4 _* O
  8.     // Listen for messages
    . y4 n6 c0 r( A% L6 P0 C  a  L
  9.     socket.addEventListener('message', function (event) {2 G* b$ b9 W9 p/ \& {
  10.             //接收服务器返回信息
    6 O9 E; R$ o' r  D. p5 R% g  p* C
  11.         console.log('Message from server ', event.data);& V. |9 ~2 a8 q% _# w. b
  12.     });/ p# g8 M5 i) ~$ `

  13. * b5 l9 W- ~% ?
复制代码
伪直播主播页面4 }- ~4 t0 H" ~0 w, J/ t) W7 W; k

html

  1. <body>
    ' P# ^( b, h2 H' E
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    ; {  D4 X7 j% ~
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    1 k' t5 K- V# `& A
  4.         画布! ^9 `; [2 h' ^$ Z+ r1 O
  5.     </canvas>& r8 I4 W2 ]7 P2 ~  r9 }
  6.     <img src="" id="videoImage" width="350" height="700">  @1 m! P- b/ N# n1 Z
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>  T3 f  h( ]3 Q" [
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    9 S% U& h( N& [4 \/ a
  9. </body>
    8 f( s; {* N2 W- y4 o. _5 k' K* ~# }
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    5 i0 R; }+ y  V0 [5 P
  2.     var c = document.getElementById("myCanvas");
    7 s) N$ D" C2 U7 m8 |
  3.     // var c = document.createElement("canvas");1 f3 W, B. J3 ?! L
  4.     var img = document.getElementById("videoImage");
      u# [  _5 u/ P; P( Z. k# [. N
  5.     ctx = c.getContext('2d');
    1 C5 X7 S; s" j: Z# Y; z
  6.     var dataUrl;/ N/ V' U0 V4 n5 U
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    4 P1 D* t/ j3 l! S6 y9 A
  8.     //Connection opened0 B/ u5 a5 J! d4 g
  9.     socket.addEventListener('open', function (event) {* G5 k" X8 b* C) Q7 ]
  10.         // socket.send('Hello Server! im websockt');
    0 \0 s/ i+ k0 g
  11.     });: h$ @% T5 N0 U) d3 y0 O) g
  12.     // Listen for messages3 F6 U9 B7 Y& \/ r3 W3 p: F
  13.     socket.addEventListener('message', function (event) {- V( ^8 k9 s6 Q* N$ K% e
  14.         console.log('Message from server ', event.data);: [! i% E1 d( z5 c* U: ]
  15.         img.src = event.data;
    , n- [" X+ M1 k0 e9 d0 f6 V
  16.     });
    $ h" i7 Z# a/ u9 B4 j

  17. . k& r2 `8 \. f, z/ G
  18.     function playVideo() {0 z9 t5 A9 S8 ~3 j- C4 s: X
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    # ?) T9 J4 m0 Q/ U3 o  ?1 ?
  20.         dataUrl = c.toDataURL("image/png");
    6 v% |/ S0 d: M6 l
  21.         // img.src = dataUrl;5 r+ f# h7 g. }# Y$ y
  22.         socket.send(dataUrl);- g, [; A! |% M% K5 o' t2 V
  23.     }
    3 M8 M+ K) m9 r3 C9 i) D
  24.     var tick;( k+ X+ T% Q; d
  25.     function aphla() {3 b5 c3 c; m$ h* y
  26.         tick = setInterval(function () {/ b* u, ?: r- Z2 D, ^
  27.             playVideo();
    1 ^0 u& m. B( a7 e. X9 s6 r+ _# o
  28.         }, 1);
    0 u3 q- u5 @# Y5 \6 X/ Z! N  k8 k
  29.     }6 o. S' O3 T4 R8 w3 g/ D
  30.     function vdStop() {
    4 r1 m1 A  e2 f5 ?$ N4 P/ `  Z: Z- {( m
  31.         clearInterval(tick);
    , _7 e! J7 M' F9 w
  32.     }
    6 v8 Z8 }' C5 i+ F( J
复制代码
用户页面
, @2 c' @, `( P9 [* d$ Z

html

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

javascript

  1. var img = document.getElementById("liveImg");
    . ?3 Z. }& i9 Y) K3 u
  2.     const socket = new WebSocket("ws://lm.com:9502");
    # b  S6 s* N2 F$ s. U1 i1 q
  3.     //- U6 m0 h" q9 [% Z$ R& D( t
  4.     socket.addEventListener('open',function(){3 n8 X! J/ z# l2 U
  5.      socket.send('Hello Server! Im live.html');
    + i. P8 H6 W$ {7 v- {2 k9 O
  6.     });: \2 t3 V. P6 r' l4 f% w  L
  7.      // Listen for messages% e  x3 t, `* U; l; i0 S- o
  8.     socket.addEventListener('message', function (event) {
    , \+ ?' `6 z- j5 x" }; f
  9.         //图片地址5 A+ r; K1 X; c0 T2 X
  10.         img.src = event.data;
    ) `1 A, Z/ Y: ?: s+ S9 i$ S4 y
  11.     });9 l) T% ]* E. Q3 R/ j
复制代码

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


, ^/ [3 A( q) w) y: s/ ?) ?3 C5 z1 S
- b0 Q+ R2 g1 R# t$ p
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-16 18:48 , Processed in 0.051683 second(s), 20 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!