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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  - B; b* m4 k! f/ _
  2. //创建socket服务
    ' j3 M. |. m. [: f4 M* ~
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    8 u8 i& V" w8 J) d! w, M) v
  4. //监听WebSocket连接打开事件8 ~  F8 ]% @; o. S& |- \5 F# a/ m
  5. $ws->on('open', function ($ws, $request) {
    0 \' t; e  y0 ]
  6.      var_dump($request->fd, $request->get, $request->server);$ S2 K3 n  L3 o6 O5 x
  7.      $ws->push($request->fd, "hello, welcome\n");  W" d' A. k. O* l- ]
  8. });" P( g4 n9 B" z3 S; u* x/ x* G
  9. " [4 g9 l2 \# U5 {$ ~: a8 W
  10. //监听WebSocket消息事件
    , w: P& f6 h* i" m; M
  11. $ws->on('message', function ($ws, $frame) {# p7 ~2 E, z" e4 D( ]# H- }! X" C
  12.     //推送消息给所有用户9 W+ u4 L! h9 s/ p6 m( }0 m- E
  13.     foreach($ws->connections as $fd){. {% p4 h9 j$ z% z% T
  14.         $ws->push($fd, $frame->data);! o7 X8 l7 F! S5 x8 R) o. c
  15.     }
    1 \5 R' k7 P& |8 u
  16. });
    " J" ~! j. c# J( X
  17. % z1 u. K1 M4 i/ y' c1 H& I1 o
  18. //监听WebSocket连接关闭事件- W4 p  [% B( L' E, c! U
  19. $ws->on('close', function ($ws, $fd) {" k+ w4 P! F0 @4 }4 ]
  20.     echo "client-{$fd} is closed\n";
    , M( P. k! Z! o! H5 C
  21. });/ Z4 d  _; L* W0 s: k
  22. //启动服务
    * u, `  a) j, w% W8 D4 |4 Z; L
  23. $ws->start();1 k4 V8 E  f! ]/ C0 N6 H
  24. ' |* w' @$ f- H/ W+ z
复制代码

3 t/ d5 Q' B" U/ Q5 ZWebsocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端; q* h# x% `# U! j

代码如下

  1. //连接服务器. ^* i! y1 G+ r* C! [4 h4 V
  2.     const socket = new WebSocket('ws://lm.com:9502');
    0 v5 c/ Z/ k0 R" j: a
  3.     //Connection opened
    - E2 z3 j6 k( S9 X" y
  4.     socket.addEventListener('open', function (event) {
    ' H/ R' f" p2 ]. e* E8 Z$ x
  5.             //发送消息给服务器
    9 |3 ]( S. C+ D. E  d
  6.         socket.send('Hello Server! im websockt');
    / p8 ?: {. D5 }# u
  7.     });
    " k8 n! x7 S+ ?! y
  8.     // Listen for messages
    8 B# q- u# Y5 H8 A5 l5 [3 V5 S
  9.     socket.addEventListener('message', function (event) {7 N: F6 w( H3 `
  10.             //接收服务器返回信息
    6 L- c! ]. P' a
  11.         console.log('Message from server ', event.data);; v3 h( `( h. x0 n- t6 i
  12.     });4 {5 G& }8 R' z" E% g

  13. 5 O& a+ p: v- h+ g3 }2 ]
复制代码
伪直播主播页面
7 W: j$ t4 d) b& B+ T

html

  1. <body>
    5 D9 L5 w/ D- I6 ?+ J( l
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    5 ~/ p7 D7 p8 Q( \$ ~. Q
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    & w  E# V  w- h! g$ _
  4.         画布
    # E/ S+ {4 o2 J( H) M
  5.     </canvas>
    2 L4 @) U1 J; `6 W  b
  6.     <img src="" id="videoImage" width="350" height="700">3 _# o2 X6 |3 K/ K( ?% M
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>' l% B8 j4 D6 M: Q% P, V" N
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>" K* ?" d- C% R; ^+ v) b. ~4 \' }
  9. </body>8 N" v( v7 X# S3 k9 G
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    / B  _( F& |# v( B0 H/ F( Y
  2.     var c = document.getElementById("myCanvas");
    6 z1 S# W4 y8 F5 f: X
  3.     // var c = document.createElement("canvas");
    2 S- \: U& D/ f4 f& U) h  X! b! _
  4.     var img = document.getElementById("videoImage");
    + \) Y% J; k. e. h3 e+ x+ S  U
  5.     ctx = c.getContext('2d');7 U" p) [) d3 a. }% s" r( v
  6.     var dataUrl;4 ]% Q8 Q6 A  b1 v4 K1 C
  7.     const socket = new WebSocket('ws://xxxx.com:9502');# @+ l. ~6 E5 U  p
  8.     //Connection opened
    . `. c  ]4 t2 _8 m* j" W( z
  9.     socket.addEventListener('open', function (event) {
    0 l# J9 y2 |2 s2 z& D
  10.         // socket.send('Hello Server! im websockt');
    % w' Y$ Z0 T5 s/ x% N5 G/ [
  11.     });
    4 K* }7 j' L; J  J3 e7 t& G
  12.     // Listen for messages. R8 o1 A$ U2 S$ J' D  h
  13.     socket.addEventListener('message', function (event) {
    ! a  X% B3 S+ |6 `* Y
  14.         console.log('Message from server ', event.data);! w5 Z$ Y0 d7 V4 o. d
  15.         img.src = event.data;* @- v6 _8 I* T  _9 C! a' D/ I
  16.     });
    $ o- p8 D# W$ ]$ R. ~8 ]/ G  }
  17. ! \3 x9 C4 E, Q3 y
  18.     function playVideo() {
    + d& e* d& C) X  D9 m* x' I
  19.         ctx.drawImage(v, 0, 0, 350, 700);8 N3 h) f6 N3 c% @" u0 J5 z
  20.         dataUrl = c.toDataURL("image/png");
    2 g( P4 L) w( Q, \
  21.         // img.src = dataUrl;6 O  d8 q. m" e: l. z5 I( h' C
  22.         socket.send(dataUrl);
    " o5 u  I& G% U( d" C
  23.     }
    & g8 Y* s' g  ]' X/ [* V  Q
  24.     var tick;! @% d! W5 ]  h" N+ k1 R1 ?
  25.     function aphla() {. V2 j& N! @3 ~" F0 _5 c% f: L
  26.         tick = setInterval(function () {
    6 U, L$ o" u2 ?6 ?0 o2 j& D
  27.             playVideo();
      q- A5 o7 a5 }4 H
  28.         }, 1);
    + q5 |/ V/ H  ]* E/ }' f) k% R7 k
  29.     }4 I2 Y$ p7 Z: s$ `
  30.     function vdStop() {6 a9 D  v7 z: G$ ?/ Z( |7 |, U
  31.         clearInterval(tick);
    / P" H3 |: s- x% P4 k1 D
  32.     }9 s+ g9 u+ z4 f* m1 f7 m- |) _. v
复制代码
用户页面1 N) h, j) y- M

html

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

javascript

  1. var img = document.getElementById("liveImg");  \/ B4 q& s8 D! B: Z
  2.     const socket = new WebSocket("ws://lm.com:9502");
    " @$ b7 C  J, e
  3.     //5 a5 Q" h) m3 @
  4.     socket.addEventListener('open',function(){5 z& f5 R' }$ F. j
  5.      socket.send('Hello Server! Im live.html');+ @  W8 q" N  D5 c
  6.     });8 E. `; N* Y+ |# \( [' _* i
  7.      // Listen for messages1 \+ O+ c2 L# o/ M
  8.     socket.addEventListener('message', function (event) {
    0 p, Y6 J7 v2 ^
  9.         //图片地址
    ; K- B0 {! y" {  @$ `5 H" T
  10.         img.src = event.data;3 \4 a: R/ R7 h" J9 f& V
  11.     });  H$ y  U* {, B; F* j3 @$ h& @( y4 Z
复制代码

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


  S5 Y7 a& N) v( @& }7 @7 r
& u+ d  X6 ^- A) r
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2024-12-22 15:11 , Processed in 0.122324 second(s), 20 queries .

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