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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    : Q; T8 |2 q9 g- U. {9 ^, m& ^
  2. //创建socket服务
    , q' j+ `5 |4 k& c0 q* A
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    1 X. w& S, f5 B+ y5 `
  4. //监听WebSocket连接打开事件
    1 j& g6 t& h0 F
  5. $ws->on('open', function ($ws, $request) {0 a$ q4 D- L! s- E& C/ h
  6.      var_dump($request->fd, $request->get, $request->server);0 I) R7 g0 u1 }
  7.      $ws->push($request->fd, "hello, welcome\n");
    : S/ b0 C2 c4 Q4 \7 b0 Z3 [
  8. });7 C2 @7 @2 c& s

  9. - _* i" n: v# K% _  B
  10. //监听WebSocket消息事件
    ( k5 p% d' a8 Y! O+ ~# P
  11. $ws->on('message', function ($ws, $frame) {  V8 p$ R" G+ @
  12.     //推送消息给所有用户& b% p# Q; Z( q9 n: R; C' [
  13.     foreach($ws->connections as $fd){' K. o+ [' ], K6 I4 R# e9 ^
  14.         $ws->push($fd, $frame->data);
    - h3 ]+ j/ E, }) H
  15.     }2 c+ W% |: R' T) w/ f
  16. });
    " o$ o( {" D" l% H
  17. # I* J- O: P; u1 ]2 S( k
  18. //监听WebSocket连接关闭事件3 Y5 |& d$ G" l9 z' U) o
  19. $ws->on('close', function ($ws, $fd) {& u# k) f$ T, s1 p
  20.     echo "client-{$fd} is closed\n";$ }! M/ V7 ~# L8 q
  21. });
    , n% Z) ~$ p: l: d! i2 t; B
  22. //启动服务9 a8 B6 x% e* H. f
  23. $ws->start();
    + E) \% N! j6 o; Q% Y( n  u

  24. - Q5 M: [1 T7 w% ?; ~/ P) O
复制代码
5 u! a) Q( |- C  ?7 {" Z7 Z
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
( i! c) ~( D3 h8 i  {

代码如下

  1. //连接服务器
    7 M3 L$ w# j% `; ]5 a. q
  2.     const socket = new WebSocket('ws://lm.com:9502');
    5 B! f5 M' R4 T! F" }- T/ W& @3 b
  3.     //Connection opened
    0 t9 U- J# B  e/ r, O& p4 E9 ~
  4.     socket.addEventListener('open', function (event) {
    " w" I+ j! n4 o( C2 O
  5.             //发送消息给服务器
    6 n) b. {' ?. t* h5 ^& H" k
  6.         socket.send('Hello Server! im websockt');1 T3 h8 R3 ~" j! W* V
  7.     });
    ; g7 {; W) K5 d5 a+ U3 ?
  8.     // Listen for messages7 k: B% x9 v1 r: U0 p( r7 u
  9.     socket.addEventListener('message', function (event) {# @, l; {0 u- l/ T* x  X" b
  10.             //接收服务器返回信息" t; Z, @9 K' x
  11.         console.log('Message from server ', event.data);
    0 m# `7 |$ `, E8 `/ M/ p
  12.     });9 X; t. O6 j% G

  13. 7 R+ g  j5 ]4 l: t8 X3 j
复制代码
伪直播主播页面3 K! f7 l, x  F5 F0 c% v. [; \

html

  1. <body>3 |" u1 c% c1 F( l" ~. {1 n
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>% [# o  ?' c" D( x6 v
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    , ]+ V3 k1 n7 l2 G; p/ ?
  4.         画布
    " t8 n& Q- l& N2 }# B( d
  5.     </canvas>
    * p5 D  {4 y8 L& f; B( Q
  6.     <img src="" id="videoImage" width="350" height="700">0 z6 L# I( Z$ }' o* Y+ g- U/ k
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>/ W  s  V- [) D6 p4 Z. o1 g
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>: q: G, m( r* @4 e; v% @. ~
  9. </body>
    . X& G. `0 k0 x8 G! i0 y) v
复制代码

javascript

  1.     var v = document.getElementById("myVideo");% k' i$ g  d  Q9 \
  2.     var c = document.getElementById("myCanvas");) z( Z7 n# h8 n8 N+ m8 W! w, y
  3.     // var c = document.createElement("canvas");
    * {/ C& X) A  L. k. E% v
  4.     var img = document.getElementById("videoImage");! L! Q! P+ |1 K2 ?9 |
  5.     ctx = c.getContext('2d');2 n/ w% ]. K% v! M; i( M
  6.     var dataUrl;# H4 ], V1 Q7 Z# T. ]' q1 r
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    8 g1 [; \! [  E6 _( p. H' M8 L
  8.     //Connection opened
    2 |/ O2 G" I/ m! L0 m  d( ~
  9.     socket.addEventListener('open', function (event) {
    5 R" |. s5 p( y! K
  10.         // socket.send('Hello Server! im websockt');
    0 h$ \  @: m% f; z9 L6 o9 r+ _
  11.     });
    + z, _9 \, s  e+ T6 o1 J
  12.     // Listen for messages: Q! {  Y2 m) `7 g% o2 W+ x
  13.     socket.addEventListener('message', function (event) {
    ' P" q# q" I0 O4 F, N0 C
  14.         console.log('Message from server ', event.data);: \: h1 I& z9 Y5 b' N  B% x
  15.         img.src = event.data;
    9 E" Q7 M/ E3 \, g
  16.     });5 x! ?! U1 b) Z; _

  17. 9 O* E1 P6 u% b2 d$ ?+ T. U8 @
  18.     function playVideo() {( {( S% K1 Q% W* U6 s+ a6 q- M
  19.         ctx.drawImage(v, 0, 0, 350, 700);' f' ~$ x) S6 T, G
  20.         dataUrl = c.toDataURL("image/png");* P2 P1 ?) r/ Z
  21.         // img.src = dataUrl;* o: y" @/ g* R( w* q; p! J
  22.         socket.send(dataUrl);3 e! K) @, q8 r* [7 N6 ^) Q
  23.     }
    2 B1 x$ w0 N4 w; X0 h
  24.     var tick;
    6 y. |# v2 E1 ^# ]2 I" O
  25.     function aphla() {( m9 B& E: P0 A
  26.         tick = setInterval(function () {
    7 o/ J3 d% z8 O7 O. V. c7 s
  27.             playVideo();: C' I. n6 s* _2 Q$ \3 z" @6 E4 g
  28.         }, 1);- w) n5 g8 R! |0 x2 F" P
  29.     }/ p% t4 e7 l) o
  30.     function vdStop() {
      F& U( J* R6 S& m
  31.         clearInterval(tick);
    ( ^. T  a% F, \6 l9 h; q% t- @3 G
  32.     }
    3 G0 h3 Z) i4 a% C
复制代码
用户页面# N" i( G* F5 @1 u2 G1 K) f. D

html

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

javascript

  1. var img = document.getElementById("liveImg");
    * i, n! v( p. x0 i: U" a1 O
  2.     const socket = new WebSocket("ws://lm.com:9502");
    $ a1 D9 V% x3 f+ f
  3.     //6 q+ k* @' G. X1 W# A
  4.     socket.addEventListener('open',function(){
    % ?! ^3 Y6 u9 b
  5.      socket.send('Hello Server! Im live.html');
    ! }. P; I! d3 I+ k: z  O/ a5 b9 S
  6.     });8 e2 h+ h3 X! R& d' s2 w
  7.      // Listen for messages% Y) L4 ^$ r- }! I
  8.     socket.addEventListener('message', function (event) {9 F/ L4 Q* q. ~$ T
  9.         //图片地址% [) p  l  r# X( V
  10.         img.src = event.data;
    ' ?: M$ \9 k0 C3 ]0 }$ O8 B
  11.     });
    ; Y2 |5 G! F- c2 g! S: \
复制代码

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


6 u) \8 s0 G: R  Z$ z  V
  _/ a' k- a5 t
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-19 22:30 , Processed in 0.049510 second(s), 19 queries .

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