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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 15099|回复: 0
打印 上一主题 下一主题

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

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

代码如下

  1. error_reporting(-1);  ! n$ ~; B" h( w! y$ P
  2. //创建socket服务
    - k6 }$ b$ P0 N& j
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    " p8 A3 n$ ?9 c2 G  W
  4. //监听WebSocket连接打开事件
    / Q: S5 i3 v& o% _8 i" v- h6 A
  5. $ws->on('open', function ($ws, $request) {2 m  E$ C" _7 X7 I+ p+ }! ?
  6.      var_dump($request->fd, $request->get, $request->server);1 f  B2 W3 f! F! A6 o: k& E
  7.      $ws->push($request->fd, "hello, welcome\n");0 Y, v+ k) g/ ]* n* e
  8. });; K9 O- j  b3 P. @% p+ L* q
  9. 1 T2 z& R, z1 d
  10. //监听WebSocket消息事件
    7 ]- C6 i4 u+ z
  11. $ws->on('message', function ($ws, $frame) {" u5 i: a: u, s7 g3 K6 _
  12.     //推送消息给所有用户5 B0 n# g. w7 `
  13.     foreach($ws->connections as $fd){
    9 h% M, S5 r, o* }
  14.         $ws->push($fd, $frame->data);
    % \' P6 p8 Y* s$ X
  15.     }
    $ h  k/ [$ M+ M! c0 \6 W
  16. });( x1 j3 l1 h" E4 z! z/ L3 U
  17. , L5 ^6 N- ^+ a* l, A! S7 ]
  18. //监听WebSocket连接关闭事件
      `6 J( v4 ?; Z- c1 T7 p  M* x
  19. $ws->on('close', function ($ws, $fd) {! V: }4 s$ ^: S" y  M( [& z5 G
  20.     echo "client-{$fd} is closed\n";" s* p9 L, l4 |% \1 W
  21. });" n3 @( C4 C% c: K" J) V! l) Y# A7 |
  22. //启动服务
    ! T8 k7 u) o/ B/ w  G* a3 c; J
  23. $ws->start();4 A8 t: R1 s0 m+ G1 Y0 }& e  \

  24. ; P4 t! a/ C  K( i/ L8 K
复制代码

) r: Z3 |. R& u, Q; a9 wWebsocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
4 ~* }& r/ u/ o# n

代码如下

  1. //连接服务器
    % j5 g5 M" V$ i. n( F+ _) O1 F
  2.     const socket = new WebSocket('ws://lm.com:9502');$ M& v( ]) k' B7 P# C
  3.     //Connection opened4 G# M( W; E) s) l! M
  4.     socket.addEventListener('open', function (event) {
    9 j5 [( e( i+ L" c
  5.             //发送消息给服务器
    9 u( k7 N  j$ w# V7 P
  6.         socket.send('Hello Server! im websockt');: V9 B# x- ^9 S
  7.     });
    4 _2 b: T  s+ L% R
  8.     // Listen for messages. z+ k1 J% H( b9 R/ x% j" E
  9.     socket.addEventListener('message', function (event) {
    " B) c5 t3 n9 i- ~! V# u2 }; e2 o
  10.             //接收服务器返回信息
    + W8 Y; K3 D  I) V
  11.         console.log('Message from server ', event.data);
    ' Y+ W: B8 s5 \+ }
  12.     });( d, X  ~0 m- b
  13. . v- L9 n6 S" o
复制代码
伪直播主播页面
' l6 S0 U. s/ J- a: }

html

  1. <body>& j+ Q, o% Q& H1 _: N
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    1 T' v1 P# u6 h  M3 u  X+ `
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">3 y( @3 Z  I( w7 V. E
  4.         画布- X% [$ R! \5 E$ C1 g  J- ~
  5.     </canvas>
    , a  ^6 M. b7 G. s4 p* F% }
  6.     <img src="" id="videoImage" width="350" height="700">
    ) I1 y9 M/ y/ Q. Z* V: C2 o) `+ Q
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>( o4 ~% {& l( D3 q
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>* r$ j1 d3 o  y- {8 {
  9. </body>
    : q* O: R2 @" Z* J2 v
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    , E: j; g3 G+ [8 z' v8 ]8 v
  2.     var c = document.getElementById("myCanvas");
    1 Z4 l- [. G! M# D( B; T
  3.     // var c = document.createElement("canvas");
    ' `7 n! c) D) V' B+ u& K  j" M
  4.     var img = document.getElementById("videoImage");. F5 O" E4 X6 ~
  5.     ctx = c.getContext('2d');' l2 G* _+ Y9 V6 D) \: u0 @$ ~
  6.     var dataUrl;
    . g! R8 b; n% O# W6 @& L8 }5 I
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    7 K% u4 h1 ^+ k" e- n; Y
  8.     //Connection opened! k0 s+ R9 X" g; i" v
  9.     socket.addEventListener('open', function (event) {
    ! ~% ^* P% K( z6 L  M
  10.         // socket.send('Hello Server! im websockt');
    6 M2 l& J# F5 y; a+ x6 l, n
  11.     });
    ! O: R0 T4 I+ e( s. S
  12.     // Listen for messages
    0 s  u5 O7 g2 ?, P% x. u
  13.     socket.addEventListener('message', function (event) {" a0 e& t4 |3 h! |" w1 D6 D& O
  14.         console.log('Message from server ', event.data);4 b6 {1 {7 P: n' Q+ Q, k
  15.         img.src = event.data;
    6 {- }- f7 l& f5 f( f
  16.     });
    * ~0 X* M5 B6 K: n$ G
  17. ' |; n% T9 {- H- @" N/ T
  18.     function playVideo() {
    : R0 y# y0 q: i# W; S2 n, G
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    9 i9 e2 ?4 l- m0 E3 w# G: z
  20.         dataUrl = c.toDataURL("image/png");1 U4 h0 S& a  o7 @) A- o
  21.         // img.src = dataUrl;
    - z# T/ Q% {% ~
  22.         socket.send(dataUrl);3 g7 _0 c3 a% N; x* Y
  23.     }
    3 \' z) \$ Z, w/ h. H' S
  24.     var tick;
    / X9 K7 U4 {! [; q8 A( G
  25.     function aphla() {% P" r6 `7 k# _$ b' n5 \) @2 X4 [
  26.         tick = setInterval(function () {
    " Q# g2 p8 i5 F& m
  27.             playVideo();
    8 d) m/ X. [( n* E$ M+ i
  28.         }, 1);
    ' y9 z9 @% p8 d' J$ x
  29.     }
    . [5 c) f2 u, s$ u: S
  30.     function vdStop() {4 U2 L2 ?! {# g
  31.         clearInterval(tick);
    2 ~4 S( O5 J  s( t% G1 Z3 q; i- N
  32.     }
    2 C# s: |8 f- ?+ f3 _, `8 h
复制代码
用户页面
1 k: ?  O) _* i7 c2 Q  l1 W. P

html

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

javascript

  1. var img = document.getElementById("liveImg");1 k! i! Z8 n$ `, L
  2.     const socket = new WebSocket("ws://lm.com:9502");
    ! }2 `; [* d. J/ n1 [* D: R# u
  3.     //
    & M% g3 B% X! H) {) V
  4.     socket.addEventListener('open',function(){0 M. R5 @; p& c2 H# L" F7 ~; H9 t
  5.      socket.send('Hello Server! Im live.html');; V$ O9 h: }" `: O% z% A1 ~
  6.     });
    ! k: O3 o% K4 {  t+ d
  7.      // Listen for messages
    - E. F" S) i2 B/ l/ b7 ?* O
  8.     socket.addEventListener('message', function (event) {
    $ l* A+ N+ p; K- L+ s
  9.         //图片地址5 ]8 Z4 i1 x3 Y
  10.         img.src = event.data;
    : Z3 f# X& G8 c' r0 N$ R
  11.     });7 i' K6 Y' L+ L
复制代码

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

0 @3 P. j7 Q* r

' p( p: D) i8 L7 v% J4 C' e
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-8-4 11:32 , Processed in 0.058237 second(s), 20 queries .

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