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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    + h2 E; l' L, x' Y8 r
  2. //创建socket服务4 V, `9 @0 ^. _9 D0 ?' O# E
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    & ^# p9 x' d+ r1 k5 j2 P( |
  4. //监听WebSocket连接打开事件
    ; B9 d4 E; d: _, q
  5. $ws->on('open', function ($ws, $request) {
    4 g, K) T: e6 R, E# {  C
  6.      var_dump($request->fd, $request->get, $request->server);
    5 k: m) n! [. x9 J/ I* d% b
  7.      $ws->push($request->fd, "hello, welcome\n");" I: o9 c3 k, s( D# y1 Z  m5 P
  8. });
    / w+ b& y# M2 z+ ]: b  k

  9. 0 j$ r8 L. l5 g- g
  10. //监听WebSocket消息事件- ^7 R* I( Y% n9 j
  11. $ws->on('message', function ($ws, $frame) {
    2 {1 o  z2 a0 p5 ?" m2 H5 i  x
  12.     //推送消息给所有用户
    4 p6 q* F- C4 F# h- e6 H
  13.     foreach($ws->connections as $fd){
    # b5 }4 M! {9 C, O/ l( ]7 @$ c
  14.         $ws->push($fd, $frame->data);5 q0 ?' [  I3 [# w
  15.     }
    ( z! r# {; _+ y3 x# b8 B, F+ ?; l" K# w
  16. });9 N% r# q7 j0 l  ^" ]5 n
  17. " |& a! y' c. t
  18. //监听WebSocket连接关闭事件
    $ n8 D8 ~5 d- r. I2 I
  19. $ws->on('close', function ($ws, $fd) {( N. w, f' h, }, p( e
  20.     echo "client-{$fd} is closed\n";
    & t4 Q( l8 z( e7 P" m5 u  g% ]
  21. });
    6 t& w; g, M1 S/ v+ p4 [, j  e  o/ s
  22. //启动服务
    ' J5 v7 h: K  [8 S: n  L5 V
  23. $ws->start();
    4 A) a; F  |  A+ P9 L* H# O5 |

  24. - h' h" m9 g8 @$ c( e2 T* n
复制代码

+ o) w8 {$ f  ]Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端* M8 U& d3 A5 k. n

代码如下

  1. //连接服务器
    & Y# i- b1 n+ U0 H4 d) z' b
  2.     const socket = new WebSocket('ws://lm.com:9502');- B- x0 \* I4 x- Z' ]  v, y1 _
  3.     //Connection opened
    7 C& h7 @1 A! V9 K5 A7 ]
  4.     socket.addEventListener('open', function (event) {
    * G3 T: C* [. `& f1 P* o
  5.             //发送消息给服务器* I- N3 s2 P9 W. b' _5 G, h, S
  6.         socket.send('Hello Server! im websockt');
    % Y& B  Z0 D# I3 j5 q! t4 Z+ X
  7.     });+ Y9 w4 O, g+ X9 F" U- A4 a( R8 n
  8.     // Listen for messages
    : M) j" l1 Q; C& U* k
  9.     socket.addEventListener('message', function (event) {4 ?: a0 S. S/ l' x$ W) T
  10.             //接收服务器返回信息+ l/ F2 ~8 c6 w6 L
  11.         console.log('Message from server ', event.data);
    7 K+ {5 I: v4 A
  12.     });+ H6 G+ M5 e  p  w
  13. ' B, J8 y  E* X
复制代码
伪直播主播页面
" t- @% |8 w" |. s! |$ i6 h( u

html

  1. <body>0 m6 d8 m  P. v' w; e; w
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    5 V* l- N0 j3 W, y
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">! d( ?9 f* s+ a6 ~. K4 h
  4.         画布
    2 ?* t) k( w& w8 H2 X8 H) A1 J7 F
  5.     </canvas>4 i: `# X5 h& d4 k
  6.     <img src="" id="videoImage" width="350" height="700"># l/ t: V3 m- [0 I5 M7 o7 R0 u
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    ) Y5 R$ y5 `! h* e' _: z+ v+ V
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    1 e) l, j7 [* A# u9 P/ G% V
  9. </body>3 [7 T. L( f* F: l' n( s# `
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    & N6 ^1 D0 C" h, J$ b  W
  2.     var c = document.getElementById("myCanvas");4 @' x. @8 M1 i, T( I
  3.     // var c = document.createElement("canvas");" q. U+ E5 @  ~" o' _
  4.     var img = document.getElementById("videoImage");
    ( G" B) i& Y0 A
  5.     ctx = c.getContext('2d');1 V: {) r$ D! \6 G
  6.     var dataUrl;
    + a; \- |; d) F/ a
  7.     const socket = new WebSocket('ws://xxxx.com:9502');6 p0 Q  k+ Y5 M# ]
  8.     //Connection opened
    4 m7 y: t1 W, p5 e+ O% B$ }* G, J
  9.     socket.addEventListener('open', function (event) {
    1 e, J; d: H  y
  10.         // socket.send('Hello Server! im websockt');4 n- f) _8 }& E
  11.     });
    ( N; q, y$ o5 G1 T/ }
  12.     // Listen for messages9 }# ^- e* h8 F: `/ p5 X
  13.     socket.addEventListener('message', function (event) {
    9 A" V" b" P) D  |0 N+ d5 c/ x8 e
  14.         console.log('Message from server ', event.data);
    * n0 w/ n, W+ Z# ?! U; I
  15.         img.src = event.data;( ^  }8 K8 I1 D7 _0 n& K& P
  16.     });+ M4 \2 _; b5 V; n$ g

  17. 3 l  [: t# m; n3 A
  18.     function playVideo() {
      O$ J' i4 J8 _! {0 Q1 \
  19.         ctx.drawImage(v, 0, 0, 350, 700);* |% M1 U6 ]8 l( h( |/ v3 L' F  P1 P; C: _
  20.         dataUrl = c.toDataURL("image/png");
    % X' H! ^' \/ e1 R. W7 x$ Z
  21.         // img.src = dataUrl;4 i- ^) O  A- T0 V; t
  22.         socket.send(dataUrl);3 O7 b7 i, n5 m$ K' ]1 T, o8 m
  23.     }0 I" w+ ^: H" Z  n$ z
  24.     var tick;
    ) {( j) N3 Q* `5 o
  25.     function aphla() {0 `' X$ g# T: u" Y& U
  26.         tick = setInterval(function () {+ E. ^" g; i4 ]3 x2 m# i
  27.             playVideo();
    7 r7 p- X) C( H7 X
  28.         }, 1);
    0 u6 }7 X" S* |# W8 J
  29.     }
    3 q: D) x3 U- H
  30.     function vdStop() {- P. w- `1 w2 w7 _  g- D
  31.         clearInterval(tick);
      k  q: [, p- P6 e; g% Q% }
  32.     }0 V" d( w1 v$ R5 N
复制代码
用户页面2 s& J. w" [0 x- S4 x

html

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

javascript

  1. var img = document.getElementById("liveImg");- A3 I2 K- }1 I+ U; h; c. D
  2.     const socket = new WebSocket("ws://lm.com:9502");
    8 C, V1 O1 t! Y1 D
  3.     //# _/ k% ]3 g- a, L& [  j
  4.     socket.addEventListener('open',function(){
    4 X8 d1 D- p+ U( G- u$ r
  5.      socket.send('Hello Server! Im live.html');. V% R2 Y( Y# K; h, K- S7 U
  6.     });
    - q! E2 a( f7 ?  i4 X
  7.      // Listen for messages% |9 l: W  F* R4 _
  8.     socket.addEventListener('message', function (event) {# Y& C* K9 E4 _' o" L6 m' t
  9.         //图片地址
    2 L: p  E$ a7 v
  10.         img.src = event.data;
    5 o4 f6 x) W: x1 P" G
  11.     });
    0 ^; ~9 `4 x' a% y& }: h
复制代码

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

5 I4 E! N: V, _$ [; r0 g" ]
  A$ L5 {* s* r8 y0 i9 _) B$ T2 q1 d
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-5-2 13:31 , Processed in 0.058614 second(s), 19 queries .

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