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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  " d- ^& I4 [  i; u
  2. //创建socket服务5 N+ @- }( l. K8 `) k/ t
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    . M, b- `- R) d9 E: C
  4. //监听WebSocket连接打开事件
    7 `, B4 Z# Y7 ?+ @
  5. $ws->on('open', function ($ws, $request) {) t) b! x9 |. [0 n/ v/ _" p3 S- R
  6.      var_dump($request->fd, $request->get, $request->server);  ~* M; A7 l- b/ K5 {7 ^+ @3 ^
  7.      $ws->push($request->fd, "hello, welcome\n");% W- I& ]6 e4 H, z
  8. });0 ~1 Y1 Z1 C+ x$ @

  9. 2 |% H6 f! ~* L' y9 K& N% H9 M* `
  10. //监听WebSocket消息事件# S% n& I3 I. b0 j! O& h* R1 b
  11. $ws->on('message', function ($ws, $frame) {1 H  ~0 n' e) {0 I$ t1 k1 F
  12.     //推送消息给所有用户
    - Y3 W/ ]( |  n3 K1 g2 \
  13.     foreach($ws->connections as $fd){
    2 V$ J% C) X& F2 t
  14.         $ws->push($fd, $frame->data);: e1 `( K+ p2 m! i8 r3 r
  15.     }$ M2 j) Q' v4 K$ D& i4 a
  16. });
    : E- R1 R( M1 Y: K- Q) T

  17. " E5 C  p% z0 [+ y- f; g
  18. //监听WebSocket连接关闭事件
    * h- p' R9 h7 T: L# p
  19. $ws->on('close', function ($ws, $fd) {* @, c8 x; e3 H  Q6 v% U- s! A$ a
  20.     echo "client-{$fd} is closed\n";- j5 z+ ?. l* B5 x. [% q* m
  21. });5 [* w7 A! _9 ~' \" U9 U
  22. //启动服务
    . |; V+ r* k& a6 l, B6 A
  23. $ws->start();, N7 x0 k8 @4 n( [' S

  24. - d3 A0 M0 B0 s
复制代码
, e' g9 _# q" Z( @2 R) A
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
* z. w3 Z* I  L5 F4 H

代码如下

  1. //连接服务器! n1 u' N/ d; G  E. E3 X- L9 S6 `
  2.     const socket = new WebSocket('ws://lm.com:9502');3 d* R. J8 L4 j8 f
  3.     //Connection opened7 g" P7 j. y0 G. ]5 U0 ~1 z& B
  4.     socket.addEventListener('open', function (event) {
    0 G8 P0 \- [- S5 o% k% t: o
  5.             //发送消息给服务器
    7 H( [: H. G: F  [9 M
  6.         socket.send('Hello Server! im websockt');# s- {, i& {, E4 M" k% `
  7.     });1 M' H7 E" S! v6 h
  8.     // Listen for messages
    & ^6 p5 t- n; [8 @7 B
  9.     socket.addEventListener('message', function (event) {
    5 w, P* C8 v) ~! A  ^* R/ k
  10.             //接收服务器返回信息, p% ]# Z8 ]. F( O4 H- B/ ]
  11.         console.log('Message from server ', event.data);3 [3 m) d" j5 ]8 q( q' l# O& ^# _
  12.     });1 j! Y* c: p7 b0 @: e

  13. - A) u' Q. z% F2 P$ L3 h
复制代码
伪直播主播页面
- c+ B/ p9 W# U

html

  1. <body>6 N$ K+ ?$ P3 S9 j( P
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>2 P3 v+ W7 {8 ~4 x' W
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">( i/ ^, n1 S; l/ ~' i5 @! s: S) p5 U
  4.         画布
    5 N2 R( P) i& |
  5.     </canvas>
    1 I7 Z0 `( u5 y( K7 j2 o; F* \
  6.     <img src="" id="videoImage" width="350" height="700">
    - h. X, ]! g$ {+ k
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    0 w$ p- a0 d. V# I# }' v4 u
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>6 C. ]1 T; S0 t
  9. </body>
    2 y% N$ p8 v' a) m
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    . w& z9 l! w" d  `+ x
  2.     var c = document.getElementById("myCanvas");5 G+ Q, {9 c: D
  3.     // var c = document.createElement("canvas");" q5 X; H( Z% T2 u" O
  4.     var img = document.getElementById("videoImage");
    / s, b! a( i9 K0 M
  5.     ctx = c.getContext('2d');1 `, k1 e9 `( ]" u4 D9 {$ |, `
  6.     var dataUrl;
    , w3 D8 Y* I8 j! r- I* \  \
  7.     const socket = new WebSocket('ws://xxxx.com:9502');3 R/ i& h; C7 v7 T/ j0 S5 B
  8.     //Connection opened
    1 y- O! c- z* c! x
  9.     socket.addEventListener('open', function (event) {
    6 @! t$ L! d- y6 H6 j$ W) i
  10.         // socket.send('Hello Server! im websockt');3 U! R1 x1 _: e( l0 G4 D  g
  11.     });) P7 y# _- F& x9 m7 p2 e' p
  12.     // Listen for messages
    / }! W0 H( B8 ~$ w( [; f2 \: R
  13.     socket.addEventListener('message', function (event) {' O- ]/ P4 c/ R, j2 K0 `  F
  14.         console.log('Message from server ', event.data);5 S3 s0 q, H4 t3 L& F! w
  15.         img.src = event.data;
    " {' b0 h* D* h( Y+ M% |
  16.     });' z3 }2 O9 A) q7 ]

  17. 0 }! a6 R" E! T) T6 h* t+ i
  18.     function playVideo() {0 A# r6 t0 S8 }  t+ m
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    # L0 i2 l- {; x2 V; |* W+ e
  20.         dataUrl = c.toDataURL("image/png");
    * \: G+ V) n3 U8 R, S
  21.         // img.src = dataUrl;; J3 t( d6 w$ X4 w/ n9 D5 i( m
  22.         socket.send(dataUrl);, E) s8 W1 ~1 o% V1 h! E" v; w/ }
  23.     }
    , z. i: r4 r5 v4 w1 s6 F" c0 F
  24.     var tick;
    : e# l  s2 K) C1 L
  25.     function aphla() {, o9 e5 S: T% L$ _
  26.         tick = setInterval(function () {5 L9 f) l* r) C0 n0 b
  27.             playVideo();
    ) g' b' ^* k: ^+ \0 i
  28.         }, 1);4 v" x2 k; T; d, J) J
  29.     }
      D. T$ i9 {3 r( @3 I" ]2 P
  30.     function vdStop() {
    8 q' G6 t% u: x0 W( k1 J- x& O+ V
  31.         clearInterval(tick);' c6 v) z3 Y5 S" ?
  32.     }5 \2 ]$ I. a4 N
复制代码
用户页面6 L4 x  D& Y0 H  x6 v- ^; [+ X

html

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

javascript

  1. var img = document.getElementById("liveImg");  Z! j* h' P" z5 N
  2.     const socket = new WebSocket("ws://lm.com:9502");
    2 e! R' ?  G( B8 a; X/ ~3 h
  3.     //
    ; _2 h3 m* {3 U0 E, ~/ L* O; G8 N
  4.     socket.addEventListener('open',function(){- r: A. Q6 I/ ?! V8 T3 F5 ^
  5.      socket.send('Hello Server! Im live.html');7 B$ z4 @' [  f
  6.     });& Q. e( v7 A! H- V8 |( l' T$ @: e+ X
  7.      // Listen for messages1 o( ^, K; a4 I0 T6 e7 E5 D  n" {
  8.     socket.addEventListener('message', function (event) {( U+ }! J' G0 Y6 @" q1 C
  9.         //图片地址
    2 k$ Q- u/ y* \7 R4 B5 P
  10.         img.src = event.data;
    4 u+ X4 W( M$ j, i9 L( |% G# D
  11.     });4 r& U, C# t* {3 E" ^8 s, b/ C* h+ O! o
复制代码

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

4 m( y/ S  o( @( j5 B

0 T# r7 q) A  G( [
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-5-2 14:32 , Processed in 0.059784 second(s), 19 queries .

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