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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  - W( h) J7 }3 u8 Z$ H
  2. //创建socket服务# a0 X4 L7 @/ U- R. G( U
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);+ E* ]/ M/ R& I* [: o
  4. //监听WebSocket连接打开事件
      _* y( A; U5 x5 c$ F
  5. $ws->on('open', function ($ws, $request) {/ _/ A2 K, K& m) l* v
  6.      var_dump($request->fd, $request->get, $request->server);, f- H- O# C3 q' Y2 o: Z
  7.      $ws->push($request->fd, "hello, welcome\n");
    1 C  k0 j) x# H7 O* N1 a( A/ g+ P
  8. });) k4 f% A1 D& ]% [* m
  9. ; w/ q* ^3 S6 ^. _; X' s
  10. //监听WebSocket消息事件
    * w% A! P4 P$ P7 }, E
  11. $ws->on('message', function ($ws, $frame) {: H% _( q7 E; l+ Q! ]
  12.     //推送消息给所有用户
    4 T( S8 T; t* h6 j& G
  13.     foreach($ws->connections as $fd){
    : z- d# \$ O% M6 S+ T  s
  14.         $ws->push($fd, $frame->data);9 x; g/ {' R* j- u# o' O
  15.     }
    & h0 b8 |1 i! M8 v* U, M
  16. });+ j, r: t- E$ ]4 e0 W) Y+ l+ ]# U5 L

  17. 5 ?& {; ~. P* g. w2 }% d* m% a
  18. //监听WebSocket连接关闭事件
    6 k- a' [+ Q# d) {! {6 g+ F. A" j6 ~
  19. $ws->on('close', function ($ws, $fd) {4 k, B( C% z' {, ^2 U2 G
  20.     echo "client-{$fd} is closed\n";. P8 N$ F- o  Y1 k
  21. });, q! J% D9 H( `# F) H( u
  22. //启动服务
    " n- p2 e5 a" B+ d+ L6 D
  23. $ws->start();( \% T6 H. T+ n- w% s
  24. . D9 c% W( c7 n
复制代码
9 M! U& C* F( L4 y# E1 i
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
! i/ b7 o( B* c* j1 Z) p" q4 u- J- G

代码如下

  1. //连接服务器# f" ^2 ]" `, F3 l/ h% f
  2.     const socket = new WebSocket('ws://lm.com:9502');7 `9 |0 \& K) n/ t' r
  3.     //Connection opened
    5 f2 n7 }* B& v2 ?4 H: A2 W
  4.     socket.addEventListener('open', function (event) {
    $ p- `+ F) [0 L% J; F
  5.             //发送消息给服务器
      d4 }, O6 _" L" w
  6.         socket.send('Hello Server! im websockt');  e8 G, D: O, H; N, q- Y( G6 f
  7.     });7 s# |8 m2 W" u  s* a1 A, }  R9 M1 m9 x* S
  8.     // Listen for messages; [5 Z3 P! f9 A( L
  9.     socket.addEventListener('message', function (event) {4 S7 o. x% L3 y; P
  10.             //接收服务器返回信息
    / V+ V, w8 V& d3 w3 Z
  11.         console.log('Message from server ', event.data);
    3 ?3 j/ b; B- G3 g  ], C
  12.     });3 x' k# K) w1 x8 N
  13. ! }3 [9 t% z! O: [- @& P* P
复制代码
伪直播主播页面
3 ]2 `1 G& J' o& N1 r

html

  1. <body>+ i* B* ^$ y/ f% u9 G
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    , c1 N! Y* L2 X; K0 Z0 K1 ^
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">8 [, I# l. s6 A$ @  h
  4.         画布
    2 Q+ w3 H- `7 {: d' w
  5.     </canvas>* c' N/ g1 B! i! _
  6.     <img src="" id="videoImage" width="350" height="700">2 E3 C# w" B3 {. a, m2 f
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>: H$ O: D7 R' ~+ z. q* M% I- t
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    4 J4 K$ P, y9 ]: |  w: T) L
  9. </body>7 ~* g2 P- m7 e1 @8 D
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    7 l+ e+ e% M' A
  2.     var c = document.getElementById("myCanvas");
    9 b9 _2 B. G+ b8 R
  3.     // var c = document.createElement("canvas");# x  B/ p9 c3 h9 b' S! G' t. m
  4.     var img = document.getElementById("videoImage");4 `, y/ A6 @& ~: z
  5.     ctx = c.getContext('2d');
    9 x# J5 h6 H" K" Z
  6.     var dataUrl;
    % ]0 f0 J  i! i) o
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    ! {. O( O' @4 b0 ~; {6 ]
  8.     //Connection opened
    * b: t0 F0 p' W* Q
  9.     socket.addEventListener('open', function (event) {  l1 y; R/ M" O
  10.         // socket.send('Hello Server! im websockt');
    ) G& Y8 G0 v6 |# _
  11.     });
    8 L- Y' U' y# b( e  Q* I
  12.     // Listen for messages
    + i2 C, f$ K' i7 u0 N
  13.     socket.addEventListener('message', function (event) {
    , C1 D. T! [" p! O
  14.         console.log('Message from server ', event.data);9 m% z- u% F3 N
  15.         img.src = event.data;% T. e) y  M4 `
  16.     });1 H1 p1 l, r8 H& G& X7 U

  17. 1 ~- X4 }9 q1 R7 O; Y- A4 }
  18.     function playVideo() {
    0 k9 C$ ~+ ^; ?5 t
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    ) \$ @' \# F- V. d$ D
  20.         dataUrl = c.toDataURL("image/png");
    - T3 E* a/ E* R- q6 \
  21.         // img.src = dataUrl;
    0 \8 f' c  G2 I' |; v& v  b3 |0 I0 I
  22.         socket.send(dataUrl);! B6 x+ A# H, T5 x9 h) h
  23.     }
    1 o2 b& t3 r$ e6 f" D
  24.     var tick;" [: b/ L& g3 b* N. P# `
  25.     function aphla() {
    & z/ m$ p, c$ a
  26.         tick = setInterval(function () {( _# x8 g- s* B! p' s
  27.             playVideo();
    , ]7 R0 @& Q" h5 r( G3 ~# H  R8 O
  28.         }, 1);
    7 X& G/ P) B6 B7 g" K
  29.     }
      H- ?& N8 Y2 [/ i  G
  30.     function vdStop() {
    ! t" M5 T$ ^& B
  31.         clearInterval(tick);
    * K0 J: x/ C1 G2 Y
  32.     }+ ~& m% V' Z& H/ J' e. w. d
复制代码
用户页面
. F8 r) c( ?# ]: C

html

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

javascript

  1. var img = document.getElementById("liveImg");0 x- a  D/ u. `5 X; r) |
  2.     const socket = new WebSocket("ws://lm.com:9502");
      c! p: v- y% X; Z4 v  P; a/ O# Y
  3.     //
    , P3 a1 Z( M8 ?7 X& t/ m9 ^
  4.     socket.addEventListener('open',function(){
    / A" k) C$ t) T. f$ Z3 [7 o1 Q
  5.      socket.send('Hello Server! Im live.html');
    * @% P- j- B! X$ u( V
  6.     });
    8 l( ]9 k4 _# B: j& u5 m4 o* D) a
  7.      // Listen for messages
    1 `  ]3 a& z; @/ R
  8.     socket.addEventListener('message', function (event) {
    ; Q% ]6 y# ]/ y
  9.         //图片地址
    : Q) _8 a% Q$ X
  10.         img.src = event.data;1 M/ s7 d% ~5 x4 Z' n1 b
  11.     });+ Y2 \4 Y, ]8 z- s
复制代码

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

( k( z% g# H4 @) Q( p; }4 d

4 o+ k) W& o( H" g  k4 I. R" D) c
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-6-19 21:04 , Processed in 0.057751 second(s), 19 queries .

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