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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

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

代码如下

  1. error_reporting(-1);  2 o4 h# j/ T1 k) ], u; I
  2. //创建socket服务
    0 c8 d0 s5 |0 A, h7 s$ a7 [
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);( J$ @# S( P" J7 U& E, e# c/ o
  4. //监听WebSocket连接打开事件
    3 n" l3 Y+ L1 \4 [% d$ f
  5. $ws->on('open', function ($ws, $request) {
    . X/ {( c  l8 p; K; p
  6.      var_dump($request->fd, $request->get, $request->server);" |" V" h) C. g) \1 q  d/ c/ f
  7.      $ws->push($request->fd, "hello, welcome\n");' u" z9 L- f2 o2 V2 A$ O
  8. });6 G" C/ A# I. W) B

  9. 5 [0 g0 M2 L) W/ e5 z! r
  10. //监听WebSocket消息事件
    & O9 k# I+ H; p, b( j3 Y
  11. $ws->on('message', function ($ws, $frame) {( q+ _0 d: E" G- y1 }
  12.     //推送消息给所有用户& I3 @2 ^# b& P6 \) l
  13.     foreach($ws->connections as $fd){7 d! ?0 }' D6 s0 q! j3 A/ f5 M% ^: W
  14.         $ws->push($fd, $frame->data);' B1 x% m3 S+ k
  15.     }+ @3 N! `  |3 P6 @3 Y
  16. });. V* }+ c+ B2 E9 |: P6 t

  17. ( C/ e# }: R4 ?  Z
  18. //监听WebSocket连接关闭事件  {3 m4 F5 i. h& J6 ^8 ^) u
  19. $ws->on('close', function ($ws, $fd) {
    ) N( f5 F4 Z9 N- j$ b4 p" E
  20.     echo "client-{$fd} is closed\n";
    % M# O$ B* b( F) [' d) M4 W" D
  21. });
    . H. i9 h0 r, W2 g7 O
  22. //启动服务
    & z6 S* ]( U7 n! L* u2 m7 c
  23. $ws->start();3 \, c6 f& S; `  G
  24. : V: {9 @8 s" P# Y& a, j
复制代码
) j$ W/ b" D# W2 g* N
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
+ G) V; j! }: ?: a' ?) C/ C+ I* Y

代码如下

  1. //连接服务器
    / @( g( f+ [0 a- t
  2.     const socket = new WebSocket('ws://lm.com:9502');, O  U' [3 u& K0 \( C$ X4 D
  3.     //Connection opened
    & q; {7 W& F: G: D) \
  4.     socket.addEventListener('open', function (event) {) ~4 N, b3 \  `. R# @
  5.             //发送消息给服务器
    # g9 p3 w+ b1 b6 y3 l! ]5 |  e
  6.         socket.send('Hello Server! im websockt');
    ) e9 l2 r0 h7 j7 g" m* ]
  7.     });
    2 G% F, |4 a. X
  8.     // Listen for messages
    ! i9 |" s) g  {0 z6 S9 O
  9.     socket.addEventListener('message', function (event) {4 y6 _8 w9 j; V9 J. C& a
  10.             //接收服务器返回信息
    ; I9 G4 J5 w( t
  11.         console.log('Message from server ', event.data);
    4 _# i! J) }/ b& R( s" C. }
  12.     });; u) ]# R+ ~' h* G7 l
  13. 8 ^+ S* R' n5 K. f
复制代码
伪直播主播页面) u0 t- [! `- S, M" G5 l5 v

html

  1. <body>
    $ U' R4 a7 N& T
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>6 K; E, u1 m+ H$ X* S, s1 \4 i% ~
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    9 X8 E6 T$ C1 a  k8 A' q
  4.         画布8 g; h. p) g( d9 j$ ^* h
  5.     </canvas>
    8 D5 z. c1 j" D( j
  6.     <img src="" id="videoImage" width="350" height="700">% z% v4 W; X* y
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>) J2 W* X3 b1 `: w2 M
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    + A7 L7 t" i6 [( e0 W9 F
  9. </body>; R" V3 F- n( @6 I$ Q7 d
复制代码

javascript

  1.     var v = document.getElementById("myVideo");9 F0 o+ W4 S8 `& c
  2.     var c = document.getElementById("myCanvas");, g" `  u4 p6 I. K. `/ v
  3.     // var c = document.createElement("canvas");
    5 b1 A/ A) s; e  F' h
  4.     var img = document.getElementById("videoImage");* t3 G% k7 o5 N$ E0 \1 h0 n: n/ R
  5.     ctx = c.getContext('2d');, B5 `% Q6 Z- ^0 L. L
  6.     var dataUrl;; y0 D+ K, u* X
  7.     const socket = new WebSocket('ws://xxxx.com:9502');/ B8 S7 ^# }$ @: ]9 y
  8.     //Connection opened
    . |9 ?! ?1 J3 {% W: S9 N
  9.     socket.addEventListener('open', function (event) {
    & w% C; |& ^3 }/ X% j
  10.         // socket.send('Hello Server! im websockt');: g$ x7 V/ z  b( Y- ^. u
  11.     });
    , A/ H! X+ b+ W0 |
  12.     // Listen for messages
    9 T/ s# n, U& Y1 ~  J0 r+ }- }: s2 w
  13.     socket.addEventListener('message', function (event) {9 W$ n7 D2 y+ p4 G# v# v0 f3 L
  14.         console.log('Message from server ', event.data);: a: L  H  F& d
  15.         img.src = event.data;& n1 P# C% r( Z9 Q. j" Q
  16.     });
    # b' U9 m/ B; U: O  x4 n: i

  17. ; O* T$ a- a1 H: ~/ C7 U% P, _1 n
  18.     function playVideo() {
    - N" c, H6 W, ^/ h; j5 C/ T% N
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    8 N$ d1 ?0 h4 m" A
  20.         dataUrl = c.toDataURL("image/png");
    ' X) r" g" y9 y0 w: x
  21.         // img.src = dataUrl;2 {; w8 M$ _& Q) C! {( f
  22.         socket.send(dataUrl);
    7 D: R1 U- f: D: T* [9 S( ^
  23.     }
    2 Z& h- [( I& J9 h" I
  24.     var tick;! b0 d3 \) G; V! s. K9 P2 ?1 f
  25.     function aphla() {
    $ G$ ^) H, @9 Q4 Z1 R
  26.         tick = setInterval(function () {$ L6 P: Q6 I% ^* ]
  27.             playVideo();
    * ~: s$ B9 I& p0 X
  28.         }, 1);
    . `3 p  }5 f: [
  29.     }& Q$ E* x, ^# G3 g
  30.     function vdStop() {
    + o- f# I$ d& ?: D! j9 e4 p
  31.         clearInterval(tick);. t, u, i! p7 Q* {
  32.     }
    2 P& T$ v! p! V" v9 W0 [8 b6 T
复制代码
用户页面
7 X% n5 Y' @. P+ c6 N

html

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

javascript

  1. var img = document.getElementById("liveImg");7 _& ?9 p2 A0 U$ J+ h; z% c
  2.     const socket = new WebSocket("ws://lm.com:9502");5 ~# d0 L' y% g" \
  3.     //
    / G2 y" J% Q( X- a) W9 R. m
  4.     socket.addEventListener('open',function(){
    5 N* U6 n& K- D# h5 b% {9 o
  5.      socket.send('Hello Server! Im live.html');
    . `+ B- E$ C& Y" T
  6.     });
    ! V: t3 s; f7 C& G; d! K
  7.      // Listen for messages
      d& r- k* G( w) V7 i; W* a
  8.     socket.addEventListener('message', function (event) {
    4 ~" t1 y2 }$ M; z! k
  9.         //图片地址! n0 A8 U- M$ v6 q% p
  10.         img.src = event.data;- |3 r7 Q$ Q$ u1 B1 N6 _
  11.     });* t& W  d+ |$ J6 Q1 y, \, _
复制代码

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


0 _. ~3 h" H3 G* S5 o* l; Y1 B5 Q6 S6 g* o: D/ t. O* x
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-16 17:21 , Processed in 0.059114 second(s), 21 queries .

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