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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    + [) W0 r/ E, D0 o+ s# U0 D8 Y; t
  2. //创建socket服务
    % ]* \# Y7 w- s4 j6 Q- @% }: j
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);9 `) x/ V( d; e4 l$ G" j$ z
  4. //监听WebSocket连接打开事件
    % m& Z* Z) S6 d7 b0 I4 N
  5. $ws->on('open', function ($ws, $request) {3 Z( p" l) ?, R$ `; v6 D
  6.      var_dump($request->fd, $request->get, $request->server);3 I2 K% o0 ?0 t" Y% D1 d
  7.      $ws->push($request->fd, "hello, welcome\n");
    8 a- y: S  W- i. K$ v9 G
  8. });
      V5 i* h( o9 g' G

  9. ( W9 G6 o5 P  r5 X7 L% S
  10. //监听WebSocket消息事件
    2 s* r$ Y: l; a' |6 S* z
  11. $ws->on('message', function ($ws, $frame) {' d* U7 Z. o7 ^! T# @
  12.     //推送消息给所有用户0 c4 j6 w) u2 v3 l
  13.     foreach($ws->connections as $fd){/ S# s/ z* |  T
  14.         $ws->push($fd, $frame->data);( ]! Q2 J( o7 U" D: |
  15.     }
    8 ~7 _3 o9 F/ f
  16. });
    # B" c- D1 }& I$ J% h
  17. $ W0 I! }1 I4 i: L. i( Q
  18. //监听WebSocket连接关闭事件5 C* q& j6 s% R1 t' s( e$ B/ ~( }
  19. $ws->on('close', function ($ws, $fd) {
    : B5 M) w2 \/ u' u# S: g
  20.     echo "client-{$fd} is closed\n";
    ! Y% A, D, I, e0 G6 C
  21. });
    0 K, r+ n6 I. e9 j
  22. //启动服务; L5 X9 \$ \7 a& m9 T
  23. $ws->start();  ^. C0 g' z) [0 H# A. U
  24. $ C% K) o$ n& i+ P" c  q
复制代码

0 t1 S, l6 a& K3 a( {  wWebsocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
8 y. ~0 \9 G6 g! }0 s4 `

代码如下

  1. //连接服务器
    9 \# v$ {) N+ Q  P& X/ `! S" _
  2.     const socket = new WebSocket('ws://lm.com:9502');
    9 u4 y- J. Z9 u% n2 e! @
  3.     //Connection opened
    + M5 a9 f9 d* A" o8 S6 Z9 s/ a
  4.     socket.addEventListener('open', function (event) {
    ) U; S: e4 k9 m5 D. h7 ?
  5.             //发送消息给服务器0 _( _9 A; A: C0 E$ k: ?
  6.         socket.send('Hello Server! im websockt');) ?7 ~$ h8 Z% Q( S# [$ u" o9 Z
  7.     });
    8 B3 `8 j: }' G% B2 Y" V
  8.     // Listen for messages- D- H6 v- K% f$ h  B  B
  9.     socket.addEventListener('message', function (event) {: [" G! z# @. D: {7 y
  10.             //接收服务器返回信息
    , p+ L  s) k7 z" O" C, p; B, g
  11.         console.log('Message from server ', event.data);: T4 i+ @8 o: ?: D- |
  12.     });
    9 w6 v; T. F  |' k
  13. / c( b/ O$ h9 _( t+ q, N2 Z& `3 \" H
复制代码
伪直播主播页面' E$ B* Z. V$ B/ j9 U

html

  1. <body>
    1 G: Y( ?4 |, O4 [9 v5 C# F
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    8 g$ A  S. F# p& S
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    9 s7 l$ h8 K; ?% Q4 v% B
  4.         画布6 @+ t1 R- J0 d1 _' Y. Y/ C) K
  5.     </canvas>1 x7 w5 ]0 K. ]+ W  f
  6.     <img src="" id="videoImage" width="350" height="700">- l0 D2 X0 b. H  K: c
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>8 i* w0 \: m- T( c0 y% e
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
      H5 f' y3 K# G: O8 `: Y& b
  9. </body>0 W, k  o8 W; C' |9 [. T) U
复制代码

javascript

  1.     var v = document.getElementById("myVideo");9 Y2 w. ]! M) t* K
  2.     var c = document.getElementById("myCanvas");
    7 J( Y( g  P0 {4 b4 R4 K
  3.     // var c = document.createElement("canvas");0 O6 l2 k) Z% e9 l
  4.     var img = document.getElementById("videoImage");: S! n( E& y- U$ F9 t; I
  5.     ctx = c.getContext('2d');( E2 U; w) C. P3 ^8 ?+ F
  6.     var dataUrl;
    5 ~* A. X. L# ]& B* L
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    6 H3 o9 V  C' B3 M
  8.     //Connection opened
    0 }/ C, [$ a. n, W
  9.     socket.addEventListener('open', function (event) {
    ' y! d" Q6 z# G4 @% y2 B
  10.         // socket.send('Hello Server! im websockt');
    # ^0 [) A2 e( ~: {+ d2 n
  11.     });
    * l7 W4 V! _" j: U3 \( z( w; ^: B# R
  12.     // Listen for messages
    $ E' f8 l( Q  h* ?9 l9 L# B
  13.     socket.addEventListener('message', function (event) {
    + C( ?7 d: F/ J& d
  14.         console.log('Message from server ', event.data);
    + _2 u9 F$ y2 P4 G$ ^
  15.         img.src = event.data;& I- D) @+ z$ O$ \" s( }
  16.     });
    * F9 Y( X& q% W" ^7 \
  17. 9 T. z2 u8 {2 `$ H" _1 f1 ~
  18.     function playVideo() {5 l/ ]" Y$ B  C- B+ y$ Q! u
  19.         ctx.drawImage(v, 0, 0, 350, 700);& U/ [% }' e9 j( X5 c5 I+ y
  20.         dataUrl = c.toDataURL("image/png");
    5 ~4 c. t' _/ c% q" v
  21.         // img.src = dataUrl;
    8 g  f: N5 F& x5 c) z$ `, K
  22.         socket.send(dataUrl);
    6 _, x2 b+ G' z) N
  23.     }, M- M! C, a2 t0 c: Z. {
  24.     var tick;
    9 f" U7 y! v6 v
  25.     function aphla() {
    7 k  q) A6 S) d% b% Q
  26.         tick = setInterval(function () {; M4 }# T# o6 s% m2 L+ T7 t$ c" S- w
  27.             playVideo();  N' N  |; ~  l0 j1 f: k1 ^
  28.         }, 1);; @6 q! i, k; I; X
  29.     }
    ; A4 S4 z6 |& V- H% E
  30.     function vdStop() {; W; d. e, g0 n/ M
  31.         clearInterval(tick);
      Z) Y! V& @5 D, \6 h
  32.     }
    ) [* [2 N# Q- P3 m
复制代码
用户页面3 _' I; J& F1 H* @7 ]

html

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

javascript

  1. var img = document.getElementById("liveImg");
    8 A) i! G/ ~$ a* Z7 Z" ?' K
  2.     const socket = new WebSocket("ws://lm.com:9502");
    ! F6 K6 l1 D8 E. a& f
  3.     //! e- V  m( i+ \: [$ h* O
  4.     socket.addEventListener('open',function(){' b8 \4 b, }7 x4 y2 J
  5.      socket.send('Hello Server! Im live.html');
    6 L0 y2 ]) M1 Y0 |% g; p* q
  6.     });& P6 N4 X4 H0 Z5 ]
  7.      // Listen for messages
    8 S' k& J  b: Z
  8.     socket.addEventListener('message', function (event) {
    / M! n) Y5 t& Z9 K1 S8 N
  9.         //图片地址
    " G1 ~* N! H- H9 S0 g- C, {, A
  10.         img.src = event.data;
    6 D: g1 c, {* h9 q9 H
  11.     });
      u8 p! `+ p% Y' |; r
复制代码

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

9 ~3 G6 g+ V. h3 Z( e
; v  B% y4 v1 n8 g
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-8-4 10:53 , Processed in 0.059475 second(s), 20 queries .

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