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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    - X, D9 ~, b. |( a
  2. //创建socket服务
    ' Q: h2 E9 [7 m; w3 D/ z0 Q
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);( e/ M/ v* I1 {+ t5 x
  4. //监听WebSocket连接打开事件
    5 [; L: F3 Z. P$ |
  5. $ws->on('open', function ($ws, $request) {; I- b" H# C* h
  6.      var_dump($request->fd, $request->get, $request->server);
    7 ?6 ?0 u3 [" u
  7.      $ws->push($request->fd, "hello, welcome\n");/ M8 H( ^2 r% i: q! f$ S( Z3 m
  8. });9 W- b: B; j/ N+ A) R
  9. : P; o  B1 u" O, T6 o) ~/ x$ f
  10. //监听WebSocket消息事件
    ' P  `- [/ ^9 e$ P
  11. $ws->on('message', function ($ws, $frame) {; B( @& n: \+ u6 V  s
  12.     //推送消息给所有用户( ?& E  X. I  s2 g5 c6 W5 e) k
  13.     foreach($ws->connections as $fd){
      h4 B8 [. z4 G! _3 g
  14.         $ws->push($fd, $frame->data);5 d- S+ |7 {5 ^6 A$ f. F, ~. ^8 \4 M
  15.     }
    9 i' _$ [# \3 U% m$ W7 Q
  16. });2 r4 J& t, k( Y1 H; r
  17. ! F8 M3 E& V! E4 h& D# C8 y
  18. //监听WebSocket连接关闭事件4 l& k2 V, H1 L9 `. Q
  19. $ws->on('close', function ($ws, $fd) {* |7 ?5 s. p5 L. V2 `+ g) R
  20.     echo "client-{$fd} is closed\n";. O' w. R/ ?( u9 Y0 C
  21. });
    4 H3 ~" E9 E- F  C" _6 K
  22. //启动服务% Z/ u$ V2 R5 z! U
  23. $ws->start();
    - @/ K) W0 [% p2 H
  24. 1 |3 Q5 G, E/ r: W( i& c% F
复制代码

1 K) y1 e- `  t5 q; _0 A- a3 _Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端, A, q1 v2 Z% m9 ?$ D

代码如下

  1. //连接服务器
    + @5 E: m, W6 T" I, |' z$ ?9 ~8 K
  2.     const socket = new WebSocket('ws://lm.com:9502');
    9 j* A; W+ V$ R0 v1 _/ S
  3.     //Connection opened8 N2 U) v0 P/ D4 o; ~% H/ B) g
  4.     socket.addEventListener('open', function (event) {  E2 ?8 a! N, O- B, X& V7 h* t& K
  5.             //发送消息给服务器2 E8 ], H6 G/ `' u
  6.         socket.send('Hello Server! im websockt');
    8 O! ]  w: ~! C; r# E5 `
  7.     });
    - ]% E4 ?) b; n8 [7 d
  8.     // Listen for messages1 a9 M, a" r+ v3 r7 E+ f& @
  9.     socket.addEventListener('message', function (event) {$ q  N# ]0 u- E$ g
  10.             //接收服务器返回信息
    + d7 A" [8 Q/ k5 r0 |# l
  11.         console.log('Message from server ', event.data);
    ; T- J9 g6 X1 ]& m% h
  12.     });2 @! c, `: e4 g
  13. 8 }% t$ I: @2 X" l) T
复制代码
伪直播主播页面
% L3 n" `0 X6 b" x$ ]. H/ t

html

  1. <body># u9 N" z% J5 `( E, t% k/ B! r
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    6 ?# G3 o! P" u' p! l9 u9 e7 F
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
      K2 W, z5 W& {9 e5 |9 M- a3 t. B
  4.         画布* o; Y; I; `/ M, t% \
  5.     </canvas>/ Q) ?, t* H' ?' u: z! Q
  6.     <img src="" id="videoImage" width="350" height="700">9 S6 {* j: h% @4 I& u& p
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>) F3 y, c  e  R- X2 b. [1 Q: H
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>$ H9 \1 w/ S/ a( D6 M# K! R' m
  9. </body>
    ; t0 o# Q3 b- o: D6 |  N0 F( |
复制代码

javascript

  1.     var v = document.getElementById("myVideo");- O, f6 u. [5 t
  2.     var c = document.getElementById("myCanvas");
    ; L) W. Y+ F% Y7 b/ ]
  3.     // var c = document.createElement("canvas");- _) }7 [. g+ m' I' [6 ]# e
  4.     var img = document.getElementById("videoImage");, t3 [4 P: e% y( C, q3 h
  5.     ctx = c.getContext('2d');
    - \& r. r% |3 B  V& o, D
  6.     var dataUrl;! a8 U% F$ h6 D( J, c( G- p/ M* h4 L( E
  7.     const socket = new WebSocket('ws://xxxx.com:9502');8 D/ b) u) X1 S! K) [" W2 Y
  8.     //Connection opened" r' Z# V. n+ }  i* P! I) j1 ?1 P
  9.     socket.addEventListener('open', function (event) {9 \$ n7 U! M5 j9 _
  10.         // socket.send('Hello Server! im websockt');  N' A$ K( [6 `2 T7 g
  11.     });
    # D# c7 e1 F$ @9 U8 H, k; J
  12.     // Listen for messages* A& t1 q* a* U& M& [9 z
  13.     socket.addEventListener('message', function (event) {
    8 N9 s+ S. J; p0 Q
  14.         console.log('Message from server ', event.data);
    ! }. P0 d6 A+ }
  15.         img.src = event.data;
    4 b& c, g; |% {4 B' E" t
  16.     });
    , m4 k; f; r6 Y% P- t1 V

  17. 2 f/ c+ I4 `* K/ S+ R/ o
  18.     function playVideo() {4 b9 Q1 Z1 G9 `" n* \* [, {
  19.         ctx.drawImage(v, 0, 0, 350, 700);1 N! @6 s% f' H
  20.         dataUrl = c.toDataURL("image/png");: x* e+ q$ A* X! G) ?" p. I
  21.         // img.src = dataUrl;! h; A. K# J* Y+ S6 F% v' s
  22.         socket.send(dataUrl);
    4 ~6 J7 q. F: A+ b
  23.     }: b7 G9 B0 B& J1 |
  24.     var tick;" d1 x/ A$ U" n# A+ c+ I
  25.     function aphla() {4 X4 R: b7 ~& [! K
  26.         tick = setInterval(function () {+ o2 L6 f* p3 X) Z- G8 M
  27.             playVideo();9 i+ k$ N7 o- v3 q
  28.         }, 1);
    0 p/ y! j1 X) e! V
  29.     }
    # d4 h- U7 U' F9 m$ s
  30.     function vdStop() {
    / @  N" M, C' M, o/ p, D. g
  31.         clearInterval(tick);% e" G! c  e3 O2 ]& N9 E# d# u4 H2 u/ ~
  32.     }
    3 p% U% r8 m4 a) k. n) ~
复制代码
用户页面
, m4 ^. m, b) u7 }

html

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

javascript

  1. var img = document.getElementById("liveImg");
    7 ~2 R. O9 R" ^: s7 n; J
  2.     const socket = new WebSocket("ws://lm.com:9502");3 T% e) @6 a) [. c% _0 ^
  3.     //
    6 s, ^' L! Z: C9 v7 v; D
  4.     socket.addEventListener('open',function(){
    2 m, N: j% K+ e* \+ y  h7 o
  5.      socket.send('Hello Server! Im live.html');
    : ]7 i" _; B. b7 t) A; Q+ E+ a
  6.     });
    & m8 E  _: |! m/ V3 t
  7.      // Listen for messages
    $ c6 Z* f2 i: |+ {7 P6 A
  8.     socket.addEventListener('message', function (event) {* C7 b" W6 y% a- B1 X
  9.         //图片地址
    " n7 }: J6 C& f& ]
  10.         img.src = event.data;
    " |: t' H) S7 t0 Z6 @% c
  11.     });* u* G% |# {' D1 Y8 f
复制代码

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

  ?4 D6 z3 O8 G4 U0 X, E

( |  O0 q+ x. D7 I  ^
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-6-19 22:29 , Processed in 0.056848 second(s), 19 queries .

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