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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

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

代码如下

  1. error_reporting(-1);  , C$ B3 b8 p* q2 U) h1 v, D; y& o2 d
  2. //创建socket服务
    8 ^8 f( ]: w5 G( R( V7 i3 r
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);7 k. n, k2 J( \" Q1 _
  4. //监听WebSocket连接打开事件
      Q! n% Y- m9 u9 U* S4 F; x- m
  5. $ws->on('open', function ($ws, $request) {
    5 l3 h0 f* j) w0 V/ g0 ?
  6.      var_dump($request->fd, $request->get, $request->server);
    # {3 i9 [; n5 ^! P8 F. i/ B/ b
  7.      $ws->push($request->fd, "hello, welcome\n");) U1 h2 h- U) Z5 }0 Z8 H  Y0 L' N
  8. });
    8 ]" P, O. B/ R' M" E# E- {+ C2 w1 J
  9. 4 O9 l+ ~6 u0 l2 Q% n8 M
  10. //监听WebSocket消息事件
    & h! B' D  S7 g0 B) o' G
  11. $ws->on('message', function ($ws, $frame) {
    1 l5 o: H3 Q+ @1 c  L$ l: L7 i# N. l1 b
  12.     //推送消息给所有用户
    4 V. o8 L+ c3 ?9 y, Z1 ?2 B
  13.     foreach($ws->connections as $fd){; P, d' g5 a  Y2 m
  14.         $ws->push($fd, $frame->data);
    & q# k2 m# p# l6 d) r+ Q/ M& O  P
  15.     }
    7 b! ?/ C9 |" ^, |
  16. });
    / E2 _* M, r( l" s2 A

  17. - r9 V9 f9 l" R5 r5 |
  18. //监听WebSocket连接关闭事件
    7 N1 F! ]6 b9 _2 M: J" T
  19. $ws->on('close', function ($ws, $fd) {; \1 k7 A0 I7 k% K' U" W2 K( O. S
  20.     echo "client-{$fd} is closed\n";$ p1 ]& u, P1 C* b2 C) T, |9 f
  21. });
    & g1 Z/ d- x3 O' v7 i
  22. //启动服务. H, A9 L6 I) G; \& M$ b+ |6 @
  23. $ws->start();
    ) X  n+ K! t2 j& I" x# V
  24. 0 F4 l2 f% \6 a7 {' N
复制代码
7 v: S. {+ B5 {- e7 D- \$ _
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端- H; l5 Y6 a. K. T

代码如下

  1. //连接服务器$ ?1 v8 ]0 z9 N2 Q3 o3 L: e
  2.     const socket = new WebSocket('ws://lm.com:9502');% p: k0 f' q- r$ m
  3.     //Connection opened4 P: Q, w3 y6 |) V2 [
  4.     socket.addEventListener('open', function (event) {2 S2 c- j' r2 j) C
  5.             //发送消息给服务器
    & w: {& h$ t/ B1 u, s
  6.         socket.send('Hello Server! im websockt');  }8 K1 Z# t6 M) P" Y
  7.     });: \4 w/ O! k& y
  8.     // Listen for messages7 y) X# ], F& ]( {1 f- V5 Z0 [
  9.     socket.addEventListener('message', function (event) {
    ( I. D, |9 R3 _$ I: J, k
  10.             //接收服务器返回信息
    ! G5 u' d# ]8 U# ~) o. g
  11.         console.log('Message from server ', event.data);$ R* r/ V9 \& t# M
  12.     });4 ~$ n* g6 b" `8 R. t8 V$ I
  13. 7 X/ E; M9 B- e0 g* Q5 Q& x9 `9 U; a
复制代码
伪直播主播页面
. S; I" ~( w5 H$ D

html

  1. <body>
    * E, \4 ]2 V( w7 S/ S
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    " H! w' x( G/ w8 O5 Q
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    ' e0 j* P/ `% d( V6 G
  4.         画布
    ) c! v7 F& ]; T+ Z& S- j/ P  c
  5.     </canvas>2 m7 N  t3 p) m7 T
  6.     <img src="" id="videoImage" width="350" height="700">4 b# p" c6 C7 S9 Z" i. C
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>: |% \: m5 D+ ^
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    7 L  Z$ W0 l' A! N& j
  9. </body>- H8 N* T0 ~% ^1 Y6 B. i; j- f
复制代码

javascript

  1.     var v = document.getElementById("myVideo");" E/ _& |( O% J/ d0 i" H! g: Z, c2 t6 ?
  2.     var c = document.getElementById("myCanvas");
      X2 H7 G& `* t% ^. m! J/ ^
  3.     // var c = document.createElement("canvas");1 b7 F9 A0 i1 Q1 A) [% K+ k
  4.     var img = document.getElementById("videoImage");
    0 `, Y5 Y, i* ?
  5.     ctx = c.getContext('2d');4 {5 Q7 H! M- ^0 Q& y% v
  6.     var dataUrl;, v9 ~( X9 f( `" a8 y& w3 ]8 E2 T% ^
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    0 y! G$ t+ ]1 M3 o$ p
  8.     //Connection opened
    ( W9 N$ M3 {8 g
  9.     socket.addEventListener('open', function (event) {% `! Y; D7 q& \' A
  10.         // socket.send('Hello Server! im websockt');/ X8 o2 B) s& K( }" e3 R
  11.     });
    4 I# F5 U( X: f3 l* r
  12.     // Listen for messages/ }! h5 t( d- f- B
  13.     socket.addEventListener('message', function (event) {' `0 ?0 m- m( R  z
  14.         console.log('Message from server ', event.data);( p" R  }1 f' D# _
  15.         img.src = event.data;
    % T1 ~/ A5 L; a4 M
  16.     });2 ^' T, g) U8 g6 I, f' W
  17. ; G# O: I7 h4 f" g, |, u
  18.     function playVideo() {+ K  t, N) X! f" ~3 q+ V  ?
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    3 O- G* x9 u! }8 P3 t8 o( c
  20.         dataUrl = c.toDataURL("image/png");# r: J' N/ h! ~/ p0 y, k# s6 b
  21.         // img.src = dataUrl;6 ]1 X$ j+ V/ B0 N2 t; f! \
  22.         socket.send(dataUrl);4 r8 t! V% Q4 Y0 G( Q6 \
  23.     }
    3 p, x0 m; U7 e6 I3 A
  24.     var tick;
    # O0 B$ }+ w* E% b; u, k, d% o
  25.     function aphla() {8 L* N7 q, c5 f" N" M! `  u
  26.         tick = setInterval(function () {
    . E, E( v9 j4 E8 h1 `& `7 w
  27.             playVideo();
    $ ?1 b* c# X" w! ]' {  w8 k4 }
  28.         }, 1);  x; ~3 M& s& g  \+ U/ Y0 S
  29.     }
    ' G( B& |' R5 X" p
  30.     function vdStop() {- }. ~  C3 O/ w4 y7 l, @7 R
  31.         clearInterval(tick);
    ; S3 m6 u, U* d2 F+ y# a2 u' T
  32.     }
      o* H( j+ H' v: N6 X: {
复制代码
用户页面
2 a2 g% A" G2 K9 d

html

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

javascript

  1. var img = document.getElementById("liveImg");( i, O, C: D7 }" }" B
  2.     const socket = new WebSocket("ws://lm.com:9502");- \' w8 t+ p( z3 f; b9 R1 C( R" u$ X
  3.     //4 b$ W% C1 ~- C/ a  T/ w
  4.     socket.addEventListener('open',function(){
      _3 Z. u+ d+ V% z  L0 |
  5.      socket.send('Hello Server! Im live.html');
    6 L  A- y9 b: M" g& M1 N% M9 |, m
  6.     });
    2 f8 }: L" h3 Q: r
  7.      // Listen for messages: V) N( t: v* B7 A
  8.     socket.addEventListener('message', function (event) {
    8 {# S- g- @! k+ Q* s8 P6 \
  9.         //图片地址7 t& S# O4 b1 [  U$ g9 `
  10.         img.src = event.data;
    & d; n! m1 Z9 m
  11.     });4 l/ q1 R+ L! [& O6 v! W8 I
复制代码

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

+ O7 {, I! l9 f2 E$ h5 O
0 p/ C3 k% H$ u4 G' j- F5 `( @( x
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-5-2 14:33 , Processed in 0.058191 second(s), 20 queries .

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