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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    ' b5 z2 i: M2 Y' o  g0 U. Q
  2. //创建socket服务- s) `8 X1 ?9 ~  _7 G+ Q
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    8 O( s! l9 o) Q* X
  4. //监听WebSocket连接打开事件
    . l9 i0 |: p" |6 b8 ~
  5. $ws->on('open', function ($ws, $request) {
    2 R" \. R) |  C' Q  a
  6.      var_dump($request->fd, $request->get, $request->server);: M8 n1 _+ ^0 _; y- T: H: w
  7.      $ws->push($request->fd, "hello, welcome\n");" \4 g. K; O3 l' n9 A
  8. });5 Q7 q# }0 z  m

  9. ' H; }. o0 R! t! a# r' P
  10. //监听WebSocket消息事件
    3 Z( f5 D+ z$ F
  11. $ws->on('message', function ($ws, $frame) {
    # ?6 H/ i* |% y2 E6 x
  12.     //推送消息给所有用户4 [9 d5 |$ t! D7 T7 p
  13.     foreach($ws->connections as $fd){
    . @- E" [2 A+ X, S. R0 C
  14.         $ws->push($fd, $frame->data);
    - a, d: P& a( w6 k0 Y, n
  15.     }% e9 O) A' p9 @1 T1 _, ]5 g
  16. });
    % o6 @4 F& u) R4 z5 }8 `( r& S2 f" l7 e

  17. 4 l; M6 b7 F# g
  18. //监听WebSocket连接关闭事件' m8 ^* I) |$ |) R
  19. $ws->on('close', function ($ws, $fd) {
    9 D; L  a! ]5 T, M& \
  20.     echo "client-{$fd} is closed\n";" Q3 O: P7 n9 e5 W
  21. });
    - S/ e( m# X+ h5 b( \
  22. //启动服务
    8 W3 |. P, o1 t5 F' c! L+ {  P$ y
  23. $ws->start();) J2 q. e7 q9 M  G

  24. + u4 Y( ^+ T% v4 h6 g
复制代码
7 i: g8 g& C" G0 p
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端7 l6 }: X% G0 d9 O. H$ m

代码如下

  1. //连接服务器! h+ S/ ^* z% q% u& W0 @( D9 m) w
  2.     const socket = new WebSocket('ws://lm.com:9502');9 }7 V: X5 b7 o4 ]
  3.     //Connection opened
    ( N7 ~$ C# b3 E0 g# v9 J& L
  4.     socket.addEventListener('open', function (event) {
    & _# _' m" T2 F, {) ]( J
  5.             //发送消息给服务器
    9 F6 l: V6 s: f' c$ _* W; n9 W; p
  6.         socket.send('Hello Server! im websockt');
    3 X( g( J& J4 l4 b, F( l4 G0 n1 x
  7.     });
    8 O8 I3 m* e" ^2 X9 {; |( `9 s! I
  8.     // Listen for messages
    ( q% z; I4 S$ i7 Y
  9.     socket.addEventListener('message', function (event) {
    # p  c: c# C3 t1 r" \# H
  10.             //接收服务器返回信息- B+ v5 {: Q" R2 z9 |0 e
  11.         console.log('Message from server ', event.data);
    9 j! j# T1 L( H( F% [6 }+ R
  12.     });
    8 h6 _+ @- p* C, K. D$ @

  13. 8 g8 |! J# Q' z; @' Z: o, S" W
复制代码
伪直播主播页面
" H& R+ t0 K+ x7 l8 S* x

html

  1. <body>3 n. X. `. |2 U2 X* ]+ u( s
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>. _6 H. R; C' u4 j9 o
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">: d+ b9 O. k8 T( [- j5 r' b2 U2 @0 ~
  4.         画布
    / P8 A! U5 z$ e+ J
  5.     </canvas>
    + O# ~3 h) u4 w
  6.     <img src="" id="videoImage" width="350" height="700">0 z  e4 e& U' f# _$ @
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>; R- Y, F$ I0 G
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    . _+ }% }# @7 V4 S1 i6 ~' C
  9. </body>8 Q5 {% ]0 F- I# x
复制代码

javascript

  1.     var v = document.getElementById("myVideo");" K0 e; D: y# @; {$ x
  2.     var c = document.getElementById("myCanvas");
    % A& D' J8 u. ^6 }& G6 Y
  3.     // var c = document.createElement("canvas");: y  [& f* S( ?
  4.     var img = document.getElementById("videoImage");
    3 }: _/ I+ X: t& Z) u7 H
  5.     ctx = c.getContext('2d');  [+ ~, q" u$ D3 C
  6.     var dataUrl;, x% c1 X7 C, v
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    2 F) e+ C& a' a+ U
  8.     //Connection opened# b. T( U7 o5 ^+ t- b) _9 q
  9.     socket.addEventListener('open', function (event) {9 u5 L% d" o1 p3 H3 y
  10.         // socket.send('Hello Server! im websockt');( b. L7 {/ ]- d2 E
  11.     });6 `- E. C( G" M  g; f
  12.     // Listen for messages9 y8 z- z2 a" p0 E9 _
  13.     socket.addEventListener('message', function (event) {/ P% }' k& F* i7 L
  14.         console.log('Message from server ', event.data);
    2 H& P9 I" k- |0 {  Y
  15.         img.src = event.data;' `4 W3 c0 O( Z3 Z
  16.     });& P! }% {  m% d' @
  17. ) r3 c) o- k( O! [  t$ r
  18.     function playVideo() {
    " u) }0 F" j" F
  19.         ctx.drawImage(v, 0, 0, 350, 700);. D, b: x1 l" t/ s; m8 p( ~8 |
  20.         dataUrl = c.toDataURL("image/png");- Z, B+ n/ ]% F$ D" v4 L8 d
  21.         // img.src = dataUrl;6 M. x8 i6 \9 _1 J. @! C7 _
  22.         socket.send(dataUrl);/ k) V+ P/ H/ Y( A) W& j. s( L& J
  23.     }
    * @9 a$ R# [+ y% _4 `7 ~5 L4 u$ x
  24.     var tick;
    ; O6 Q4 S" W+ w5 x
  25.     function aphla() {
    & _; C: Q; R- V% N8 [+ z6 n3 m1 L
  26.         tick = setInterval(function () {
    4 M* b/ ]4 B/ g  e( d. `2 N
  27.             playVideo();
    5 ^2 V$ b. O+ i. Q* F- ^
  28.         }, 1);! j; V" o/ s9 M
  29.     }
    , I3 M2 U$ }- a5 s# {; d1 s+ H$ M
  30.     function vdStop() {/ J  u& I$ F& ?4 W6 h3 Y
  31.         clearInterval(tick);2 c) V- E- R- x; o2 f3 v6 C, S
  32.     }
    + {( ]' N8 A) i& g8 s, f: G
复制代码
用户页面8 E, _7 C4 H$ u5 U* |8 f

html

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

javascript

  1. var img = document.getElementById("liveImg");/ u3 M6 t5 `8 r0 `
  2.     const socket = new WebSocket("ws://lm.com:9502");
    3 E: j* m5 o2 {, ~
  3.     //
    ; b! r. H* \+ O' Z0 M( W/ P) [
  4.     socket.addEventListener('open',function(){
    : t) u2 n+ `, v
  5.      socket.send('Hello Server! Im live.html');
    0 D) e1 Y- z  K; `
  6.     });
    9 {9 I6 r: ]' a( [% J. C: K
  7.      // Listen for messages
    + s; Q* P" ]; n7 D2 S+ ]1 u
  8.     socket.addEventListener('message', function (event) {* h% Q2 R7 j5 h* `+ ~) B
  9.         //图片地址" u1 x6 B/ L" z+ q2 m
  10.         img.src = event.data;
    : t" E9 }" g5 |/ o( E
  11.     });8 z  X8 G/ g) j/ r7 p
复制代码

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

7 F- \6 z& O# o. C' D

2 s1 P& z- x) b0 @1 z+ ~) I
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-4-30 19:54 , Processed in 0.062935 second(s), 19 queries .

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