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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  % \2 b* _5 [( H
  2. //创建socket服务
    ) H3 T  Z+ _8 Z+ P
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);3 h! N$ l2 O( B8 ?* h
  4. //监听WebSocket连接打开事件
    " @. P( O' [- S2 T8 V
  5. $ws->on('open', function ($ws, $request) {# H6 W1 Y2 R; `+ a
  6.      var_dump($request->fd, $request->get, $request->server);
    ; F5 d3 T) ?3 |5 [
  7.      $ws->push($request->fd, "hello, welcome\n");9 W' f1 i% N7 T' }0 B& H8 y% m
  8. });' Y2 z3 ?' c: \$ ?

  9. ) ~' n0 d; a- o) t
  10. //监听WebSocket消息事件
    ( L+ b3 S5 z8 t8 a; A8 F
  11. $ws->on('message', function ($ws, $frame) {
    ! V' r9 ^, m4 `+ @# r8 I3 @
  12.     //推送消息给所有用户
    5 o( Q0 T5 u7 e  U8 e! u3 c
  13.     foreach($ws->connections as $fd){
    * u1 m  r. g; Z' t+ a; T- I+ T
  14.         $ws->push($fd, $frame->data);
    3 O2 z. J" M1 z
  15.     }
    : j, I- s" U. H0 Y5 [3 Z6 G
  16. });
    # r( [% B: k) Q/ i. U. j

  17.   t1 a8 e6 _; M7 F
  18. //监听WebSocket连接关闭事件
    7 K! \& L7 h& ]: j5 }! f
  19. $ws->on('close', function ($ws, $fd) {8 D) h- s3 m9 Z
  20.     echo "client-{$fd} is closed\n";
    ( ^7 P! b& b1 ^" g
  21. });, {9 Z2 K3 G0 ]9 B4 a
  22. //启动服务
    - Z3 u: u( j( G+ H4 d. ]
  23. $ws->start();
    & b# n4 e% z. v* s/ n! W) h- _1 c5 {4 ]
  24. . ?) k4 ^% O/ I& n" F! F
复制代码
4 S! _9 ^7 \  `- ?/ l
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端( d. V/ B8 u+ W

代码如下

  1. //连接服务器
    9 ?$ e: e8 N+ l9 B
  2.     const socket = new WebSocket('ws://lm.com:9502');
    1 X8 R0 Y& O5 W3 C+ P$ m
  3.     //Connection opened
    " Q+ x& d8 J5 d6 \% }
  4.     socket.addEventListener('open', function (event) {6 h1 `6 p# T+ N3 v  M% j2 o5 w
  5.             //发送消息给服务器6 V9 b9 q: ~5 K2 k2 P5 j
  6.         socket.send('Hello Server! im websockt');8 W, V5 a' L) t- b4 u$ y! s
  7.     });
    / J  O' n0 ~' J, P$ a# P: q
  8.     // Listen for messages
    - G* v% O: j( \
  9.     socket.addEventListener('message', function (event) {- V: o5 B0 {* |+ O7 G
  10.             //接收服务器返回信息7 O0 i/ L% f5 d6 b9 B5 O9 y) p' \
  11.         console.log('Message from server ', event.data);
    3 _. H! j& o% L" F
  12.     });
    : \" X+ z7 ?# _+ H% J0 d
  13. 1 f: V  d* I# n9 Q! @: m
复制代码
伪直播主播页面: P) @; ^+ A  P) U( _0 M

html

  1. <body>
    ; S. k& I  n* ]. @
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    1 f2 g/ r$ R6 S
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    ( _( v: |+ @9 S( T/ T* j7 O* q
  4.         画布
    - Z8 b7 [+ \8 }
  5.     </canvas>- ]9 S$ e- o8 J. X6 `
  6.     <img src="" id="videoImage" width="350" height="700">
    # q9 P% E/ W3 ?
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    $ Q( [( r' W! m3 K  g* L  f
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>6 F* b: ]. M$ ]9 p* p4 {: A
  9. </body># p, }) g3 e. b0 Z* x3 k. X" q2 y
复制代码

javascript

  1.     var v = document.getElementById("myVideo");) y. N1 A  R8 v0 b8 f
  2.     var c = document.getElementById("myCanvas");, m9 _$ e  r$ ~
  3.     // var c = document.createElement("canvas");
    3 F3 d  e; t$ m. s+ Q$ A
  4.     var img = document.getElementById("videoImage");! ~, b# V% k; |# J4 K- p! a
  5.     ctx = c.getContext('2d');2 _- U8 l) x' D, }
  6.     var dataUrl;% t+ ?# ]: p$ Z$ A
  7.     const socket = new WebSocket('ws://xxxx.com:9502');4 Q6 I% l3 O6 w4 s
  8.     //Connection opened
    : O/ v$ \' r' _5 a- R7 q- @
  9.     socket.addEventListener('open', function (event) {
    . k; |! T% |' s) c% K/ f
  10.         // socket.send('Hello Server! im websockt');3 X/ V8 v7 o1 W6 {* @$ p
  11.     });  T; i3 a- L& s
  12.     // Listen for messages; O/ Q. O4 N5 g! i5 p
  13.     socket.addEventListener('message', function (event) {
    $ i* h" p: U: I. z3 a6 P0 l+ Q
  14.         console.log('Message from server ', event.data);
    3 R5 Q  Y/ }* r9 }
  15.         img.src = event.data;; d2 n) }7 q9 [! M3 y/ z
  16.     });
    6 {8 ^2 c9 @, ~

  17. . n4 {! ]3 N% A: R
  18.     function playVideo() {+ Z$ \) Y# w! R5 B
  19.         ctx.drawImage(v, 0, 0, 350, 700);4 C* B. A: k: M6 h4 w) ]- h
  20.         dataUrl = c.toDataURL("image/png");
    5 E  Y9 g0 r$ o5 k+ ~# n" K
  21.         // img.src = dataUrl;6 a: ~* |1 `1 {$ q% n8 O5 i6 K/ R
  22.         socket.send(dataUrl);
    : p- T% I& a$ ^/ U' Z+ Z& X
  23.     }5 s5 i' z3 `0 k
  24.     var tick;
    % {! r3 O% a+ g5 W1 L
  25.     function aphla() {
    : N9 [# v5 u2 S% R: U
  26.         tick = setInterval(function () {3 M! I& l# c9 ]
  27.             playVideo();
    6 u! G4 ^& a1 H( g8 W; J
  28.         }, 1);
    3 ^( j* H# a$ u6 c/ I  _
  29.     }
    * B8 W- S. Q0 t$ P7 J( n
  30.     function vdStop() {) }6 x& h" Z+ f* b1 |: _# o
  31.         clearInterval(tick);
      \- w7 W9 [! N" f5 M* e
  32.     }" \2 F! K! ]+ B) L
复制代码
用户页面, j& f( W* p1 {" I+ d! ~( H

html

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

javascript

  1. var img = document.getElementById("liveImg");4 F$ C+ \; @! L% }
  2.     const socket = new WebSocket("ws://lm.com:9502");# o6 w$ Z# g, z7 _2 \: {4 @
  3.     //& V/ E& L7 y& q6 x- D# V) x+ b
  4.     socket.addEventListener('open',function(){% u' Y3 h, B' D5 p
  5.      socket.send('Hello Server! Im live.html');( E7 e$ B4 J' ?; {$ W; ~
  6.     });  U4 I1 o- z7 G6 d
  7.      // Listen for messages* [& s" a+ l7 J; Y: Q
  8.     socket.addEventListener('message', function (event) {& o9 B, Q% o3 w* A6 ~
  9.         //图片地址
    + D5 T) t6 T. ]9 N( I1 q
  10.         img.src = event.data;; a2 s1 b, ~( o) v( ?! K4 t
  11.     });6 N8 ?$ J$ j  k7 `5 S3 p  j
复制代码

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


5 O3 t. `2 F" g8 G
7 H, J6 v* G4 I2 i$ m/ z) i  ~
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2024-12-22 10:04 , Processed in 0.114888 second(s), 21 queries .

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