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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    & M6 D. ~+ f, J  w' T5 x/ ]* U
  2. //创建socket服务
    : g8 m1 H  h1 T) l  o+ n
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    6 ~5 m* k$ M9 }: P: K, y: _
  4. //监听WebSocket连接打开事件2 l; ^% }5 z) }8 p1 R8 ]* z" H
  5. $ws->on('open', function ($ws, $request) {/ J+ T/ N5 R% y' e# @
  6.      var_dump($request->fd, $request->get, $request->server);5 L9 U! k# N2 a* y
  7.      $ws->push($request->fd, "hello, welcome\n");; l' I& T' e! j. P
  8. });! z! X/ c. s) |

  9. 7 u6 v, Y. L  O& D7 L# o
  10. //监听WebSocket消息事件
    ) ]7 g# M1 N5 J2 n
  11. $ws->on('message', function ($ws, $frame) {. s. O  e5 Q, X$ d# A* E  B0 x
  12.     //推送消息给所有用户7 ~5 ~7 k# G8 S* S; E3 Q
  13.     foreach($ws->connections as $fd){8 D0 q/ U. N1 s7 g# G1 U
  14.         $ws->push($fd, $frame->data);
    ) o3 ?+ |0 ]; j& j$ F
  15.     }
    ! V- Z% @4 |9 r: v& w# M. e
  16. });& v, ]6 n$ d) E& o0 A
  17. , M* o" S$ c) `" R8 B% p
  18. //监听WebSocket连接关闭事件
    + W+ A) S+ ^6 e% w/ w4 y( ~6 \
  19. $ws->on('close', function ($ws, $fd) {
    . V. D4 Y5 X: s
  20.     echo "client-{$fd} is closed\n";( w$ |' E0 Q3 g. Q5 J
  21. });' W3 V& u6 |7 F# {5 v7 s( c3 ~
  22. //启动服务- R8 ]- ]7 W/ ^9 H9 E3 U
  23. $ws->start();
    7 h( u& @; ?( B5 \
  24. 1 P8 r; y9 x% Y, g4 |, t5 N
复制代码
* I9 V# N% U6 W: F
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端+ l+ J& f3 r" u/ l, }4 u$ F

代码如下

  1. //连接服务器/ ]2 |5 q) Q) v; k$ ]
  2.     const socket = new WebSocket('ws://lm.com:9502');
    2 z, x% M2 ~* E# _1 `% b+ F
  3.     //Connection opened2 g9 |2 b5 z, l( @6 ^7 g: k
  4.     socket.addEventListener('open', function (event) {
    % `; C. m2 A) _9 n6 n% P
  5.             //发送消息给服务器
    $ c5 H# L1 l% m9 k
  6.         socket.send('Hello Server! im websockt');4 a2 T5 Q) y) P9 L0 }6 ~  l, I
  7.     });$ l4 u/ Y! @0 X8 l& z( |1 k$ ?
  8.     // Listen for messages
    - x/ f' o; j: g
  9.     socket.addEventListener('message', function (event) {- c" g0 G5 V" N
  10.             //接收服务器返回信息
    : Q( ?+ N9 r4 z8 a# H
  11.         console.log('Message from server ', event.data);
    + {5 h2 u; f6 f9 q
  12.     });, t( O7 [: o! v& f+ S6 A& R5 I

  13. 2 K( _- {/ ~* [) `: K) `
复制代码
伪直播主播页面% p8 ^9 d$ _+ M% z( i# d

html

  1. <body>
    + c0 L6 W9 Z8 c
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    " p( u1 L8 S' Z/ E& C+ S+ _
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">1 Z+ Z# P2 [5 Y. N2 K2 o% _* `' g. ^
  4.         画布# y% L3 I& N6 x: q7 y6 H
  5.     </canvas>' t2 P$ l- `3 `4 i. `) O  I
  6.     <img src="" id="videoImage" width="350" height="700">. d! p' Z, j) Y9 N4 s
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>* P0 l' V6 U. Q; I
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>9 ^, \+ h- b* q8 _* ~
  9. </body>
    / T, \( {/ U) ?0 v
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    ( w; U- Z$ H  S% Q. r2 B: \
  2.     var c = document.getElementById("myCanvas");! z  n5 d& k5 f1 c
  3.     // var c = document.createElement("canvas");
    . z! q) O4 n9 F/ o, n. H
  4.     var img = document.getElementById("videoImage");
    8 n7 _/ O# Q7 S- l+ z" h2 _+ }8 n
  5.     ctx = c.getContext('2d');
    : J# d' Z; w( I' h1 F
  6.     var dataUrl;$ Q) O, p- ]3 O0 }
  7.     const socket = new WebSocket('ws://xxxx.com:9502');4 v" D. R% E& f2 l3 K9 ?
  8.     //Connection opened
    : C2 F1 G7 G) P- v& ]8 p$ M
  9.     socket.addEventListener('open', function (event) {
    ' [+ {3 w7 L! B# ^/ C' I3 n
  10.         // socket.send('Hello Server! im websockt');9 T2 G1 e7 `, }- m  ?) S
  11.     });$ g2 w! F7 s) n. C  h2 ~  I
  12.     // Listen for messages; i0 M. P2 X) K& [7 @6 `" U
  13.     socket.addEventListener('message', function (event) {
    5 C9 x5 n1 e3 L4 w' l
  14.         console.log('Message from server ', event.data);* A# p- w/ s8 W8 R/ `: r& K- r
  15.         img.src = event.data;
    : b0 k  e! ]" m7 g
  16.     });
    $ A# i! {1 O7 B

  17. / ^$ [( \2 E8 h& i% ^7 r
  18.     function playVideo() {
    ( O1 A+ A8 M" a7 I8 a7 S
  19.         ctx.drawImage(v, 0, 0, 350, 700);: l" p1 \1 |& {% m
  20.         dataUrl = c.toDataURL("image/png");& H8 d8 l0 F( i5 S
  21.         // img.src = dataUrl;  A+ s5 O* y/ f6 L) T' Y! _
  22.         socket.send(dataUrl);
    ! X+ W- L$ Y; F( d6 K1 C" A
  23.     }
    6 {( Z6 F- k4 a4 z
  24.     var tick;. e, e. M: Q4 r. b" k) j
  25.     function aphla() {( E- ]7 x3 o! g4 T: b1 ~
  26.         tick = setInterval(function () {
    . L) ]! E: @9 n' O
  27.             playVideo();7 s3 `3 i! C( M. y' ^  h
  28.         }, 1);
    5 f7 A5 \9 F+ P3 ^
  29.     }) m; p) T$ w, q
  30.     function vdStop() {
    2 T) Q! G6 ?) K2 F. {0 [/ R5 p
  31.         clearInterval(tick);) _& x9 N1 h. j) ~5 ?5 j2 s
  32.     }+ ^( B/ p- x  _; V
复制代码
用户页面: }! \. M1 ]) {2 b8 B" X

html

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

javascript

  1. var img = document.getElementById("liveImg");
    1 _" k  J2 H& a" C4 K
  2.     const socket = new WebSocket("ws://lm.com:9502");
      R  f, d( T* [5 P! U
  3.     //
    2 V) S0 ]: b9 K8 x4 x& B8 N
  4.     socket.addEventListener('open',function(){# p6 t# i) k7 F( a6 b7 ?
  5.      socket.send('Hello Server! Im live.html');
    ' J0 |. Z  X1 X5 X( P. @5 J
  6.     });
    8 R- O$ F% I* p3 d
  7.      // Listen for messages6 P- F: l1 f/ V6 y
  8.     socket.addEventListener('message', function (event) {, H/ W1 |6 f9 ]! {9 o% }! x# |4 `
  9.         //图片地址
    ) a- M9 N5 ?3 |% W
  10.         img.src = event.data;$ d7 d4 T3 F4 G. d
  11.     });
    % x; _5 w- K/ ^* D4 @( O8 k
复制代码

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

! P2 g& l8 |' ?7 j
- y) b: s; O0 `& k8 p. D' _
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2024-5-17 15:27 , Processed in 0.142748 second(s), 22 queries .

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