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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 14080|回复: 0
打印 上一主题 下一主题

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

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

代码如下

  1. error_reporting(-1);  7 j) j  `' t1 T- {9 r9 T8 a
  2. //创建socket服务% p, V% ?4 V& ]+ E
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    7 B  m9 o- o  O. h: U9 L: Y3 i! f- Q
  4. //监听WebSocket连接打开事件. T/ ^( d9 [/ K1 F5 {7 B$ O
  5. $ws->on('open', function ($ws, $request) {. ]3 ]% {$ M2 z, o1 I3 p5 |
  6.      var_dump($request->fd, $request->get, $request->server);8 F! S: ]. f0 P: D7 B
  7.      $ws->push($request->fd, "hello, welcome\n");! x( B* O: u( V* O- p7 |- M
  8. });' Q8 Z& s( B3 U, G
  9. . H+ B0 R4 W- e" A3 i" ?
  10. //监听WebSocket消息事件  ]( D% X& B% |$ C- {
  11. $ws->on('message', function ($ws, $frame) {
    3 h/ T4 U! X% x: T0 L: r* y" o
  12.     //推送消息给所有用户+ ^3 p* {  O3 E* g& B2 I" G1 h" b: I
  13.     foreach($ws->connections as $fd){
    ' D' f9 |$ w8 Q- Q
  14.         $ws->push($fd, $frame->data);9 W, r! j1 T7 A, C1 f9 s, c8 J
  15.     }8 t' u* Z, b" Y6 z
  16. });
    $ T& {0 v/ s% G. U) l
  17. 2 H: b) P: y2 z- h- J7 R1 b) c
  18. //监听WebSocket连接关闭事件
    5 }* G6 K# X' n7 Q2 b. B$ G
  19. $ws->on('close', function ($ws, $fd) {3 q9 B- ^4 \- P" B
  20.     echo "client-{$fd} is closed\n";& v% S3 [$ {: Z# W
  21. });
    ! z3 A7 u8 s, c, i3 k
  22. //启动服务8 ]* U, e) \4 b1 J# N
  23. $ws->start();
    + @& O$ h6 E3 |! Q9 T

  24. + h8 _: r% t- _! ]# ~; l* o! n/ C7 _
复制代码

) x' G6 E  g2 A$ C* ^  IWebsocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
9 ?1 p  P  t; ~  Q4 w+ p5 b5 p

代码如下

  1. //连接服务器& E6 m7 H- D4 b+ W
  2.     const socket = new WebSocket('ws://lm.com:9502');1 a! a$ |) [3 g9 _
  3.     //Connection opened
    / D& ^+ _' x3 F" S' _" A* N
  4.     socket.addEventListener('open', function (event) {8 X! o/ s7 L: ~, B9 C
  5.             //发送消息给服务器0 j/ X: O3 K6 i
  6.         socket.send('Hello Server! im websockt');
    # R" ~$ `7 b1 \8 o1 `" q& n: U
  7.     });
    ) s0 p8 u( v& U6 z% @; T
  8.     // Listen for messages
    $ |% t: |  e0 j/ E; C
  9.     socket.addEventListener('message', function (event) {$ _& \1 `7 a2 a
  10.             //接收服务器返回信息
    # t+ N/ J2 `, H
  11.         console.log('Message from server ', event.data);
    , l7 E1 M5 ^$ W: i3 L. N
  12.     });
    9 l1 D4 l3 E( I. _
  13. ' L7 @2 E( N2 ^0 H1 n7 w
复制代码
伪直播主播页面
0 b! y/ P7 R9 `/ f0 V' l2 A& M

html

  1. <body>7 |0 v0 [( Z4 f) u  @
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>2 A$ W8 M' o, G1 i" }
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    ! ^; A1 k  p' I, c7 N- p
  4.         画布: u$ D* y7 J$ r* @$ V
  5.     </canvas>
    , X2 \3 |9 P1 }7 g
  6.     <img src="" id="videoImage" width="350" height="700">' j3 w3 M9 c! w* x2 {; D9 U
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    ( G* W8 y( e6 e
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>$ f- T; U, h  g6 H5 L/ @% U
  9. </body>
    6 w5 p0 ?% Q% J3 A0 }) |1 j
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    0 ?2 i* U. y- F8 x5 z
  2.     var c = document.getElementById("myCanvas");' l, }" ]9 F7 f8 U; B' z( E
  3.     // var c = document.createElement("canvas");
    6 @  O' ^" c# V8 p' v
  4.     var img = document.getElementById("videoImage");0 X) F5 b* r+ P, e$ @- a" L& ?
  5.     ctx = c.getContext('2d');
    / \  ^! Q4 u& R3 i5 x2 s
  6.     var dataUrl;
    - N: c; j9 \8 Q, M3 a
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    5 W- w5 M, v' }" s9 K* H
  8.     //Connection opened
    # c1 r2 E4 D5 K) y! F8 P  f, |! D
  9.     socket.addEventListener('open', function (event) {2 M# x: d( n: ~$ j% C
  10.         // socket.send('Hello Server! im websockt');! v. ~1 h0 f0 o2 C% _/ w! F
  11.     });
    % u7 r/ u' R6 \; A) W$ ~
  12.     // Listen for messages! p9 y9 ~* |( T
  13.     socket.addEventListener('message', function (event) {
    0 y- b. a4 j7 _) `2 J8 r" u
  14.         console.log('Message from server ', event.data);
    % {0 Y' I) m, B4 z
  15.         img.src = event.data;
    ) j. _0 r" f$ H: U" r+ X
  16.     });% k8 F  N) ?( k. d+ Y; l8 w

  17. $ E$ b6 p. y0 J9 h) z' r# S
  18.     function playVideo() {
    : r/ ?, P1 O3 @- n+ o
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    " |+ ^: n9 J+ h1 ]: U1 ^
  20.         dataUrl = c.toDataURL("image/png");
    % i& S( K/ d+ m0 A
  21.         // img.src = dataUrl;
    2 C. _# ?) ?/ F7 l+ R6 ?# k# e2 R
  22.         socket.send(dataUrl);3 Q& D" W# V! ]. }
  23.     }' \7 H  I/ r* }( j% C& B/ C8 `8 ?, Z$ i
  24.     var tick;. z1 t( O- `: ]* W' S$ L
  25.     function aphla() {+ z3 w: }# {& j: T) T# S7 G# ~
  26.         tick = setInterval(function () {
    7 f1 O0 t4 H* w+ t  n
  27.             playVideo();2 Y- W- X( `- D' T  v( D) d0 r2 _7 r
  28.         }, 1);/ u% I! n. d  ^1 j: t
  29.     }
    + g; u; o$ _6 R0 f( c
  30.     function vdStop() {
    : ~) o* E2 v" O
  31.         clearInterval(tick);
      J/ ]/ j# T& y4 `: k) Q5 E
  32.     }
    . }1 X/ {" l3 B+ l
复制代码
用户页面& A5 m# d" u7 I/ A, o

html

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

javascript

  1. var img = document.getElementById("liveImg");+ `# R& y' p2 O8 @/ b
  2.     const socket = new WebSocket("ws://lm.com:9502");. U5 C! m1 Q8 L. a. A% W/ F. j( L
  3.     //7 P4 o) c: ^- C9 s7 s7 T
  4.     socket.addEventListener('open',function(){4 Q/ q5 Q% z8 s. W  S& b
  5.      socket.send('Hello Server! Im live.html');
    ) B0 h. ?; d- P
  6.     });
    ; u5 I2 K$ l5 S0 w
  7.      // Listen for messages
    $ H3 O3 W$ f4 @6 G
  8.     socket.addEventListener('message', function (event) {- M8 N% q. h6 ?0 X0 A
  9.         //图片地址, a5 I% Y% C& T
  10.         img.src = event.data;8 \( ^) j' M4 w/ F+ a7 j" K% n
  11.     });1 {' u  y0 i% q
复制代码

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


3 @" P9 D/ J  D) d  X( J" M
% N# E5 g) g0 U! B
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-1-30 08:13 , Processed in 0.067038 second(s), 20 queries .

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