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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    ( p6 K$ ]4 U, u( s2 |/ u
  2. //创建socket服务$ A# _; n+ ?1 r& E) X
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    1 V+ o  X/ Q5 b" R3 |- t
  4. //监听WebSocket连接打开事件, V0 {/ ?# @; O$ L7 U  r' d' B: a
  5. $ws->on('open', function ($ws, $request) {( @; T# u; H( M; J
  6.      var_dump($request->fd, $request->get, $request->server);
    4 t. G$ J  I% a- r5 q
  7.      $ws->push($request->fd, "hello, welcome\n");0 r2 ]: R1 B- |6 E. j% m2 }$ ?+ F
  8. });
    ) G$ `* ]( v# Q4 ~6 S, i
  9. - A4 i7 N& ~5 `7 D
  10. //监听WebSocket消息事件
    8 y$ N' B9 {& Y1 }( }
  11. $ws->on('message', function ($ws, $frame) {
    2 _- C9 [: \- L( N& S7 J9 m+ E
  12.     //推送消息给所有用户
    # C( N: P# ^6 f  L( x5 ]
  13.     foreach($ws->connections as $fd){
    ( ^6 {1 N, e% {$ X1 j! T: m9 ?
  14.         $ws->push($fd, $frame->data);
    : Y" V, |' k% s5 |* g
  15.     }$ f+ i2 f$ p9 w( s$ v, y
  16. });+ H& h0 Y) x; L8 e3 b+ x
  17. ) R" y, L. H! R' r/ i
  18. //监听WebSocket连接关闭事件! H$ B2 U# @: m) m
  19. $ws->on('close', function ($ws, $fd) {
      Y' I* w+ w( I' u8 r8 R9 \
  20.     echo "client-{$fd} is closed\n";" i. }9 c7 Z  U% n: Y7 a
  21. });/ H  j' w0 p1 C! D3 H: D1 @
  22. //启动服务( d+ p; c# V9 o/ z" P3 A$ ?, C
  23. $ws->start();
    / s$ Q( C9 q# ~" i9 \
  24. 8 b9 `3 Q% t  s
复制代码

7 _6 M- G* k3 h3 o; ^4 q3 {Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
6 A1 ~* ^. x  z# e1 s' g

代码如下

  1. //连接服务器) ~/ w1 A/ z  g* ?! E9 L6 ?
  2.     const socket = new WebSocket('ws://lm.com:9502');3 ]8 u5 W1 d" b
  3.     //Connection opened8 {% w9 M. a* `7 D. O! u9 t4 D
  4.     socket.addEventListener('open', function (event) {  z+ x$ _5 s% w3 a5 N7 D) @
  5.             //发送消息给服务器
    ' X, H. V+ H! R' d) h
  6.         socket.send('Hello Server! im websockt');
    - p. G) O* s4 d1 g5 ^& s* r
  7.     });8 f' Y" _0 e4 v  x
  8.     // Listen for messages: Y* Z& Z# M8 L& z  l; V5 G/ m
  9.     socket.addEventListener('message', function (event) {) t( e* h# N. A/ \! ~8 V: K( B
  10.             //接收服务器返回信息+ A3 b% \3 j& q1 E1 |9 k
  11.         console.log('Message from server ', event.data);
    % L% v; q, W$ O: ~
  12.     });) z' G; Z' ^/ A9 ^6 ~, `

  13. $ e2 {  L* P$ B
复制代码
伪直播主播页面
) D$ x' c$ ]& n8 y2 v( r9 ^- E3 t1 `

html

  1. <body>
    & X% {$ h' x- v# c8 x, ~) O
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>% C' B7 A/ \( p, n6 T/ @+ ^
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">2 [9 a# ~# ?  q5 y3 a
  4.         画布, B3 i& o; ^& g
  5.     </canvas>( I: m' e- E6 ?* W6 K
  6.     <img src="" id="videoImage" width="350" height="700">
    6 G  o& A8 W6 O2 o
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    ! g- W7 a0 b$ c! B/ o
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>& g4 t& m" Z, S9 j$ s
  9. </body>
    0 r$ S7 ~4 [' y. y
复制代码

javascript

  1.     var v = document.getElementById("myVideo");. D* g: z8 w8 J9 R: U- V/ j- V
  2.     var c = document.getElementById("myCanvas");
    8 t6 ~0 F$ `; C8 p, Y3 J
  3.     // var c = document.createElement("canvas");. _( A% M# J: @4 f' r' G
  4.     var img = document.getElementById("videoImage");! q! D( ~5 {$ I. N% w
  5.     ctx = c.getContext('2d');$ C8 W9 d  Z$ W- |& W: L
  6.     var dataUrl;
    7 o' Y+ P$ `4 f9 z. Y
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    . b5 ]9 ~) q  q
  8.     //Connection opened" N6 a& B* e5 M
  9.     socket.addEventListener('open', function (event) {& {2 F5 p- \  d3 o# P: l  _
  10.         // socket.send('Hello Server! im websockt');
    0 g' `! _* O! s& y
  11.     });/ A( o* e) p- A: p, K1 ]4 m
  12.     // Listen for messages2 I) O* N( p" h- P
  13.     socket.addEventListener('message', function (event) {
    0 B1 i! a: G' _) {+ `3 g
  14.         console.log('Message from server ', event.data);
    ; m0 O8 {! x4 J' r7 T$ e% W
  15.         img.src = event.data;
    6 p/ {2 x( R# |4 m. p
  16.     });( E7 z5 P1 P8 `7 g; x0 T* S) s

  17. * j9 l" m- G) f9 G3 a
  18.     function playVideo() {; j' ^/ W' Y0 h
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    9 Z0 {+ W- U. I: v% l2 U
  20.         dataUrl = c.toDataURL("image/png");7 Y/ ~. S- {& f6 m  E9 o! m* E2 Q; L
  21.         // img.src = dataUrl;7 e4 C7 q8 Z3 _( ^0 ?/ L
  22.         socket.send(dataUrl);
    $ d# {2 Y5 E( Q6 Y/ T( E! I
  23.     }
    % A! ]( Y/ Q8 K
  24.     var tick;6 F8 z( Z" c) \
  25.     function aphla() {& d% R1 F* u; P" \& J
  26.         tick = setInterval(function () {
    % y& A1 o& o6 V8 d' \6 P
  27.             playVideo();
    & U# l7 J  v4 g1 h
  28.         }, 1);1 M  U  e2 i" C0 M4 S, i: @
  29.     }
    1 o9 `% d6 ^- j" J) }
  30.     function vdStop() {
    " g4 a2 y& Q% i: M% O( `
  31.         clearInterval(tick);, l+ w9 }* N/ F: q
  32.     }' B5 Z# e6 n+ e( N
复制代码
用户页面
  i" @$ r: S* U

html

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

javascript

  1. var img = document.getElementById("liveImg");
    0 n' `+ B: o/ n0 y+ S, U7 M
  2.     const socket = new WebSocket("ws://lm.com:9502");. G( @7 }- S) ~
  3.     //
    $ a" l8 P% h/ g+ E& q5 `
  4.     socket.addEventListener('open',function(){' E7 T1 g7 A: i' e
  5.      socket.send('Hello Server! Im live.html');  O! h. z8 B1 p5 u* r
  6.     });
    3 e$ A- Y2 b* |( \# b2 k3 E
  7.      // Listen for messages
    6 R. ~1 T' w# e/ }, {
  8.     socket.addEventListener('message', function (event) {
    ! Q9 S8 Z( S5 k. |' q
  9.         //图片地址4 x' N% K7 i0 k
  10.         img.src = event.data;
    ' G. h3 J% n) o2 u
  11.     });, E% Z. i9 f9 _% H& d, _
复制代码

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


( i* S6 L' |1 C$ s- |; o6 h
* b. l! e9 g: o, b' O2 ?- C' L( s
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-3-16 16:43 , Processed in 0.057499 second(s), 19 queries .

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