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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    $ d! N8 N5 u% p( o3 s! E& J" c5 d5 M) }
  2. //创建socket服务
    + v- V" F/ u5 V5 I: {: G! [4 ~
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);+ z' e6 P8 |( U0 g
  4. //监听WebSocket连接打开事件1 e$ R& l  D6 }& ~! Z
  5. $ws->on('open', function ($ws, $request) {
    + n1 I4 E1 h( a4 H+ y" k
  6.      var_dump($request->fd, $request->get, $request->server);8 d& }+ r+ u3 ]# t* z* ]7 U" f% S
  7.      $ws->push($request->fd, "hello, welcome\n");
    * U; v/ O7 t5 ^6 b7 r4 ?
  8. });' N4 {. \! r  h+ p! u

  9. * e$ x1 X# |# v1 l$ X
  10. //监听WebSocket消息事件0 n* T) o6 W' W  x7 @3 p5 X  N( `
  11. $ws->on('message', function ($ws, $frame) {  [  [$ s5 |+ k0 T* C
  12.     //推送消息给所有用户
    , \9 L! H6 {/ }/ C' i- {) u
  13.     foreach($ws->connections as $fd){/ s) ?  T; ]0 ?6 `# N2 j1 y
  14.         $ws->push($fd, $frame->data);: y+ n; b0 }7 A/ v/ F! a$ n5 d. g
  15.     }
    - W% Z9 p8 k. H
  16. });6 p2 l; {& `! y1 G% T0 T. k( {( u

  17. 0 ?7 U; w& w7 }9 d+ R) c' [% x
  18. //监听WebSocket连接关闭事件, |! f8 K8 @" _2 c# B% a
  19. $ws->on('close', function ($ws, $fd) {  X8 B' D& }! c& b
  20.     echo "client-{$fd} is closed\n";" ]1 ~8 o) E* i! Z) B; ]
  21. });! K' g) o0 h8 h, f
  22. //启动服务
    " |; E, C6 g! H, |
  23. $ws->start();- u( H( P! K0 _$ S2 S% v
  24. ! w- l) m. J1 c+ E  o
复制代码

$ K6 s" [2 T3 ~9 dWebsocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
0 J# K4 x( Q9 t6 m: {

代码如下

  1. //连接服务器
    2 @6 M/ r5 B% D9 L
  2.     const socket = new WebSocket('ws://lm.com:9502');
    ; n0 n2 k0 l' R7 d" H  y1 L4 ^
  3.     //Connection opened( E7 H$ X9 T8 _; F/ V" `! I# q0 t0 G; J
  4.     socket.addEventListener('open', function (event) {
    " g; S# d( R% `/ U; f& g
  5.             //发送消息给服务器  U6 Z% U+ N1 e  B: H! n
  6.         socket.send('Hello Server! im websockt');  H- T# E$ s6 Z7 h* U
  7.     });( Y- X) P- g3 }, {  G
  8.     // Listen for messages/ E+ Y+ Z1 P% {, t- u
  9.     socket.addEventListener('message', function (event) {' ?& a& @6 P  u
  10.             //接收服务器返回信息; r9 I  r$ Q( P! d0 d6 Q' X9 r
  11.         console.log('Message from server ', event.data);
    % ^- u" g" B+ t0 H" i' e5 p
  12.     });
    + e% j( @4 @) x0 I  h
  13. $ L# y. f+ [7 z
复制代码
伪直播主播页面
4 ?+ W+ L; ?$ Q9 U* y* B' g1 {

html

  1. <body>
    ( l% l  Q% F/ t$ m
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    5 V8 Z8 P1 {2 ^1 [& H4 j( Z
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    $ q+ S* f2 Q* C7 u( r( ?
  4.         画布
    4 W' p+ ?$ u+ {4 |
  5.     </canvas>
    - h, f; m* J: \
  6.     <img src="" id="videoImage" width="350" height="700">
    * F6 ?$ O; `8 H, C0 E
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>3 o6 u; N* ]9 k2 i) q* N
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    3 ^9 _+ C* f. d0 c! j8 m( r, y
  9. </body>
    4 c# J0 C' X/ S" z7 X2 G5 [
复制代码

javascript

  1.     var v = document.getElementById("myVideo");8 b/ f# `; I, _- s
  2.     var c = document.getElementById("myCanvas");( A% N0 X& Q) C# q- u4 }( k& `
  3.     // var c = document.createElement("canvas");
    2 J/ [: u7 t1 @% T: _% t
  4.     var img = document.getElementById("videoImage");3 V2 z/ [  G: S( P1 \
  5.     ctx = c.getContext('2d');
    4 i6 P% f8 t- {7 W; y0 |  k3 u& \/ g% Y. n
  6.     var dataUrl;
    5 O$ K% B/ U( \& ^" ^( K& y' S6 @
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    + U9 L- `( P! p% v. X( P9 g
  8.     //Connection opened
    7 B. L0 J0 D/ }& G, Q
  9.     socket.addEventListener('open', function (event) {
    3 `$ ~  @, d4 I3 [
  10.         // socket.send('Hello Server! im websockt');
    % p( j# g& I' |8 Q: n
  11.     });8 z- [" _1 {4 l; X2 g# L
  12.     // Listen for messages
    / E: M( K2 R- m+ ~! {, K2 W
  13.     socket.addEventListener('message', function (event) {
    , C1 k% \" E; v1 q6 M0 ~
  14.         console.log('Message from server ', event.data);
      b+ h# u. S& u' z* c
  15.         img.src = event.data;
    * k4 S$ W0 U8 i7 G8 X2 }
  16.     });: C, Z8 |: N& |- K2 I" d

  17. 6 S% C. z5 [9 x, F; `* V+ r
  18.     function playVideo() {
    * U: `2 H, s# H) Q
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    0 X/ I. B% }! y3 k
  20.         dataUrl = c.toDataURL("image/png");  n/ o. a( k6 @0 }' X0 r
  21.         // img.src = dataUrl;$ n+ Z& V$ M4 c& T! T& f
  22.         socket.send(dataUrl);
    8 }5 T, I- }$ \7 D; B& S
  23.     }
    5 y. s( J7 r* a
  24.     var tick;- ~5 |7 \* U4 u! c4 I/ \
  25.     function aphla() {, O4 j% v+ c2 u+ U  f, `
  26.         tick = setInterval(function () {
    . h% g" Y2 K# b1 T4 s: ?2 s
  27.             playVideo();% R& v' s5 {* K8 x4 v7 x& E
  28.         }, 1);) q9 {0 Q! f! s
  29.     }
    3 K# r- E! R" ]
  30.     function vdStop() {# P% m& _# l0 B; m6 N
  31.         clearInterval(tick);! z+ ~  W4 e& ^+ e2 b1 L
  32.     }
    * f- `# y) J, e$ b1 ~
复制代码
用户页面
2 |0 |0 n$ P4 k% D  z

html

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

javascript

  1. var img = document.getElementById("liveImg");, M( D; _' ?* e5 R
  2.     const socket = new WebSocket("ws://lm.com:9502");
    8 O% j/ F. T+ \; |& M. Z
  3.     //
    0 r) p. R/ O: ^' R0 N1 {' }
  4.     socket.addEventListener('open',function(){7 d6 R- K+ q8 }' w
  5.      socket.send('Hello Server! Im live.html');- J+ b/ F/ e" q& G3 T! Q
  6.     });/ j8 W2 a  q' S6 v: O
  7.      // Listen for messages
    : s2 [; @  i( u& |2 x+ |2 m: ?
  8.     socket.addEventListener('message', function (event) {7 H4 e/ A! ?+ C4 J4 j% G( {
  9.         //图片地址
    . X* t; P" F& V( G$ l
  10.         img.src = event.data;
    4 X; X; d( V4 _) \
  11.     });
    ; N) f. w( t6 a* H
复制代码

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


! f' k. U- v% ?, e" W) P" e5 ?. r5 T8 q0 b, r
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2024-6-18 20:59 , Processed in 0.110145 second(s), 20 queries .

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