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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    ! l. Z" R. A9 p8 ?( ^
  2. //创建socket服务
    : S0 Q/ J& C7 F! N( Q/ W8 m$ G
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);5 A! k- H* a/ d4 M7 D, {' P
  4. //监听WebSocket连接打开事件/ W) a  A# `! i7 b; |
  5. $ws->on('open', function ($ws, $request) {
    ' i/ |# ~( o, U) O- [2 Q
  6.      var_dump($request->fd, $request->get, $request->server);# s& e& a* V  u4 _  `
  7.      $ws->push($request->fd, "hello, welcome\n");2 \& ~2 Z5 {) s
  8. });
    ( c- I" P! c* J7 W9 V2 f
  9. / L1 A7 A3 [6 [$ h/ }" x6 V
  10. //监听WebSocket消息事件5 K5 S# b* Q( J4 l: N
  11. $ws->on('message', function ($ws, $frame) {% m/ j9 u7 j( a  e
  12.     //推送消息给所有用户
    4 s0 O7 p& s5 Y' V2 X" ]
  13.     foreach($ws->connections as $fd){
    1 q1 J+ A; L/ w! T
  14.         $ws->push($fd, $frame->data);7 h: U; G# g& [
  15.     }
    / D2 k+ B4 T% R1 N0 O3 k8 ^
  16. });
    5 [; a8 Z, ?6 B! B' Y2 l9 _
  17. % p' j& u- D2 @4 L) v  t% Z
  18. //监听WebSocket连接关闭事件
    + c. }( h' \, N7 {, t6 m  I) C
  19. $ws->on('close', function ($ws, $fd) {- }" Z' j3 w) r" K% P; ]4 ~- m
  20.     echo "client-{$fd} is closed\n";
    & W; ]; C5 }  e8 H" B  g+ n4 D# ]2 _+ F
  21. });& I3 _' X" V. H& L7 K4 C
  22. //启动服务- H4 ?0 X# ~+ u. D. |, F, W
  23. $ws->start();, |4 T1 W; o. U) f$ {* V
  24. # S3 ]2 |2 |) `" U% x$ \
复制代码
. Z: w# v! J3 T0 j5 [
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端2 e/ |+ x# u0 ~$ Y' d5 N9 }

代码如下

  1. //连接服务器
    8 v1 C- u' R8 B; b3 h# g% F. J5 y
  2.     const socket = new WebSocket('ws://lm.com:9502');
    7 r, Q  Y7 a' a$ H( _
  3.     //Connection opened/ r5 G8 f& [! O- [! S
  4.     socket.addEventListener('open', function (event) {
    $ I6 F/ P' e( K2 t6 i$ s
  5.             //发送消息给服务器
    & v+ i6 q# g. g4 i3 \" }
  6.         socket.send('Hello Server! im websockt');
      F/ c' ]* s  T1 L; m, G
  7.     });
    7 ~, E- g/ }5 S2 x1 W2 r- j
  8.     // Listen for messages8 }- I$ P) y2 c. s2 B) y5 ^
  9.     socket.addEventListener('message', function (event) {2 O( f0 b  I$ V* u
  10.             //接收服务器返回信息
    . \: l1 A: R, }  O. h
  11.         console.log('Message from server ', event.data);
    % i7 X* e2 I4 I1 I. i1 \
  12.     });
    , y  X( E# w% i! `3 F
  13. 8 ~8 y9 j1 M' J6 c, c! Q1 t
复制代码
伪直播主播页面6 ?5 p' i& B! z

html

  1. <body>9 y( L% J1 L& m
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    - j. }% P* W" N8 J5 @
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">: R5 V3 A" A9 W8 s2 f3 t
  4.         画布
    ' ^2 [! x( C( V9 B; B
  5.     </canvas>( g2 H) m$ `$ l% b2 R
  6.     <img src="" id="videoImage" width="350" height="700">
      b" b2 Y5 J: g( ?
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>4 e- \7 m2 ~$ [+ `! D, M
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    3 |% f$ x7 E# w/ ]. `8 h2 [
  9. </body>
    6 l3 b: i& U/ P: I* U
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    - v& z. N( c. r. Q! d  F2 i" ]
  2.     var c = document.getElementById("myCanvas");" Y$ _) s( N4 L' c4 {" K
  3.     // var c = document.createElement("canvas");
    ; C) t: V* f7 Y# t, E
  4.     var img = document.getElementById("videoImage");1 w5 q; }* t- J( Z
  5.     ctx = c.getContext('2d');! s' _4 o! z% s* w: K# u( @
  6.     var dataUrl;! P* ]" o9 D, Z6 C' x, G
  7.     const socket = new WebSocket('ws://xxxx.com:9502');+ _, s: Z' t( r( H' e) ?
  8.     //Connection opened
    ) @5 e8 R' Y: i' S) b
  9.     socket.addEventListener('open', function (event) {: G6 p( ?, X& }1 ^
  10.         // socket.send('Hello Server! im websockt');" o1 s0 U( V7 p. R  o. B
  11.     });
    6 y6 d7 o' \4 Q3 B
  12.     // Listen for messages
    5 {. L# b- @' P! Q
  13.     socket.addEventListener('message', function (event) {& S6 U( h( I: z' z+ N, Q
  14.         console.log('Message from server ', event.data);
    ' ]0 z; w6 B: I% V) v9 S
  15.         img.src = event.data;
    % Y2 s; V! Q4 R5 m9 E! y% t  l
  16.     });
    . x2 `  R7 K7 P, y9 r# Z

  17. 9 T0 c. ]. d& m  U  A8 [7 O
  18.     function playVideo() {
    ) w2 L, Q3 x# A  P3 D  }
  19.         ctx.drawImage(v, 0, 0, 350, 700);9 T3 W9 K: p' ~, l# |  P9 N0 S
  20.         dataUrl = c.toDataURL("image/png");
    , e) S% M- n" {5 G# M9 Z1 t
  21.         // img.src = dataUrl;
    ! G: d6 G% u6 j9 ?" s6 u+ x6 Q
  22.         socket.send(dataUrl);; G# w$ K4 }0 T  E5 p
  23.     }
    , p/ Z; M' k! S- `- s  c. @$ [
  24.     var tick;0 A( X8 Q2 v, }5 i
  25.     function aphla() {
    ( H6 r" F  b& A# d* F
  26.         tick = setInterval(function () {
      ^5 J. S4 [: s; Y+ I  J
  27.             playVideo();" ]7 j. [+ D2 s! u
  28.         }, 1);; E* e4 _3 z# ~
  29.     }, r6 v6 v) o, R. R
  30.     function vdStop() {
    : d, A$ M  ^' t! I! v4 J
  31.         clearInterval(tick);$ z1 X7 x5 T: A% D7 E  I; c
  32.     }
    ( o( V0 D4 O( j& M7 w/ J4 w. _
复制代码
用户页面0 P" p" K& Q9 ?' F9 g% p9 m- \( t

html

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

javascript

  1. var img = document.getElementById("liveImg");7 L/ n2 `7 ^9 N6 u( E( b8 c+ R* @
  2.     const socket = new WebSocket("ws://lm.com:9502");
    8 f' X" l7 X) g* b) p2 s! C
  3.     //) W1 }/ B3 y# p3 V) w. h) x
  4.     socket.addEventListener('open',function(){
    9 ~' R! N* n, _1 J# K
  5.      socket.send('Hello Server! Im live.html');0 |4 [8 Y" c- R. [0 q
  6.     });
    + `! U$ P* [$ D3 i# k$ ~+ E5 Z
  7.      // Listen for messages
    ' I, G) u/ b8 \, e' P* }' b$ K
  8.     socket.addEventListener('message', function (event) {6 o2 H: V% w. m' b
  9.         //图片地址, [* B" _0 R# _6 R  s# |0 ^
  10.         img.src = event.data;% O3 n0 y- i7 `- B3 s. h6 k
  11.     });* {$ Z- b! c& H
复制代码

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


" `, U2 l2 f! K1 k0 d$ F
* L2 t7 G% K$ b* k; A4 ~
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2024-9-28 06:36 , Processed in 0.109118 second(s), 20 queries .

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