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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
      f* b+ A2 l: o8 _4 _; j: a  M
  2. //创建socket服务* _9 b; @1 ~9 T  ?
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);' q& m& K) Y7 Z0 C% V4 B
  4. //监听WebSocket连接打开事件5 Q' u6 O) M9 y0 W
  5. $ws->on('open', function ($ws, $request) {
    : }7 Z3 }1 _" t% l* K# j  D
  6.      var_dump($request->fd, $request->get, $request->server);) x( q( A6 ]- r2 Y8 I% n
  7.      $ws->push($request->fd, "hello, welcome\n");# {& @5 G/ @& X
  8. });* @# n0 M5 D* E( q/ ?
  9. 8 @5 R: `* e2 J2 n3 P: n
  10. //监听WebSocket消息事件
    4 b& R( I4 ]) u* E7 q; O
  11. $ws->on('message', function ($ws, $frame) {" L) i, ]7 W6 s' M
  12.     //推送消息给所有用户/ o# ]- ?" o$ Y. @
  13.     foreach($ws->connections as $fd){4 H" r: D" y7 Z
  14.         $ws->push($fd, $frame->data);
    , L7 s- L4 r0 l2 r5 e; F/ w3 J
  15.     }
    5 s- H) D+ M2 i$ _2 Z
  16. });) Y: _8 H8 y& K( }" z# H5 y+ v
  17. 1 ^7 q* G$ c' a# a
  18. //监听WebSocket连接关闭事件
    / Q$ L6 p, {2 c! S( D7 ~* F, E
  19. $ws->on('close', function ($ws, $fd) {. O1 t  [' Y8 g9 g6 T3 u' J9 e
  20.     echo "client-{$fd} is closed\n";4 F* F. D( T% E- E! E
  21. });
    ( h2 u" l* A7 x( `  @/ |/ v6 N
  22. //启动服务' {4 \' G3 p- T" Y. n2 n
  23. $ws->start();
    9 r6 s3 _+ I" U% z; I5 C6 n  y
  24. / {5 M5 R* A0 V1 ^/ ^; l
复制代码
9 w" l3 O6 f4 `5 e; r( W
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端3 x' z) y# ?8 v

代码如下

  1. //连接服务器2 D3 V. l' [8 x4 f
  2.     const socket = new WebSocket('ws://lm.com:9502');
    , r9 \7 I' N2 g; p0 |/ J! _* I  ]
  3.     //Connection opened
    + x3 ?5 ]1 B; j" S4 m
  4.     socket.addEventListener('open', function (event) {9 o  c; K7 N/ t% n( M
  5.             //发送消息给服务器
    1 m7 ~, I5 i; g* Z
  6.         socket.send('Hello Server! im websockt');8 G# Q: P% A' J' `# p
  7.     });( j; N: U  a; ?9 e8 ]# U/ D
  8.     // Listen for messages5 F5 x- n& a6 n4 }
  9.     socket.addEventListener('message', function (event) {$ y. f/ {! l& S9 w, ?% s( S) u
  10.             //接收服务器返回信息
    2 V# a6 F" E3 K6 T9 s. r  `
  11.         console.log('Message from server ', event.data);* L- H3 [4 |3 t3 ]# `& b% l' Y- T
  12.     });* I' I# Q) C2 Z  a) ^) a

  13. 5 H( i6 b" f/ h- n- o- G
复制代码
伪直播主播页面  f- \  b7 i9 N1 \: Y0 v" |4 [/ i

html

  1. <body>
    , Y2 u9 e. t0 U/ H
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    + A. D0 V  C+ Y3 ]. w6 a& E8 |: w
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;"># @) o8 v- B- ?5 ?+ B: t
  4.         画布
    3 t" c' m9 F6 f- _  t* h
  5.     </canvas>
    4 x6 P' m! e3 w& D  D
  6.     <img src="" id="videoImage" width="350" height="700">
    " a1 s0 V2 }3 ~. _3 [
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
      C' k2 G( x: }( r# A! n# @
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>1 @1 H" o+ @& r" W: T4 c
  9. </body>% p/ C7 V4 ]! a! o
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    8 U4 }- Q* e& |: M" D+ ?% Q- L5 v
  2.     var c = document.getElementById("myCanvas");# `" ~/ r+ `' [+ t6 n* ^
  3.     // var c = document.createElement("canvas");1 x$ K( _' N( R) l( |5 G
  4.     var img = document.getElementById("videoImage");
    7 E' h0 R9 i4 L, Y
  5.     ctx = c.getContext('2d');1 m, T# a; i! N& ^
  6.     var dataUrl;0 ^$ U) H# I" c! F3 v. L  B
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    : l& c! Z* U2 ]" ?2 u8 z- e
  8.     //Connection opened& i. P4 y% z9 h6 ~$ N" Z
  9.     socket.addEventListener('open', function (event) {( v% u  F+ ^: l9 @6 a
  10.         // socket.send('Hello Server! im websockt');
    8 B# T0 j# V' [* A! j
  11.     });
    : y7 ]2 J% E+ T5 Z  }# \
  12.     // Listen for messages, I3 G; f' K) n4 F
  13.     socket.addEventListener('message', function (event) {* g5 G+ D. m7 F4 I1 I
  14.         console.log('Message from server ', event.data);# I% X$ h) {$ m4 m8 g
  15.         img.src = event.data;
      v3 O4 _2 n5 q! b6 w
  16.     });3 W& R* }3 P4 |6 T" `6 T# v
  17. ' B7 l& ~$ v, i0 \0 y5 E/ v) q
  18.     function playVideo() {4 N1 B# ~, b; ^$ ^# I
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    ! Z) }3 U, U4 z# B& T9 [
  20.         dataUrl = c.toDataURL("image/png");  j& E+ ]* a* i& _/ O! i) g
  21.         // img.src = dataUrl;
    ! x: Q' l1 L9 {: F: e) U2 b
  22.         socket.send(dataUrl);# l! k( W( I7 b! I# ?
  23.     }% H4 i2 Y6 m& m/ ?0 `% w' c- o
  24.     var tick;
    4 E- o/ z6 z; d# A
  25.     function aphla() {
    6 S3 {, x0 A2 F1 }  y, U5 Y
  26.         tick = setInterval(function () {
    $ Z% ^2 o6 S8 W+ x1 Q  i
  27.             playVideo();4 b/ P4 O4 [% Z6 E3 _5 r
  28.         }, 1);; j& q8 {5 i7 f* F. Z1 w9 ^
  29.     }
    " |7 U. n; _1 w( s& C6 C
  30.     function vdStop() {; `7 g% h% f7 ?+ @! P8 p
  31.         clearInterval(tick);
    6 K5 S! O; z! t6 \% R
  32.     }
    * ?5 P) q4 K) n0 @
复制代码
用户页面
8 T/ b# S. D  D

html

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

javascript

  1. var img = document.getElementById("liveImg");
    - [! H! X% S5 s2 U; N
  2.     const socket = new WebSocket("ws://lm.com:9502");* h! n2 e0 H% C3 ~1 I
  3.     //4 v; \2 k# T( U% d3 u' b
  4.     socket.addEventListener('open',function(){1 B9 X' {- T% X8 u, O& M" D$ U
  5.      socket.send('Hello Server! Im live.html');: |: i" a. S: X; K& `3 r7 ?$ U
  6.     });
    & F# _. A( t$ f# y7 e7 d9 n" J
  7.      // Listen for messages4 _6 X! s3 b& ?- |4 D0 A' d1 L5 o
  8.     socket.addEventListener('message', function (event) {
    & y2 N! j1 C4 h3 |7 P
  9.         //图片地址
    , T- ]: z( Q' {" C
  10.         img.src = event.data;
    / W+ u! L  H, X4 o3 r) s
  11.     });! e, z- g" g  ~9 o! m$ x. s- F
复制代码

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

) U0 r) T+ F5 Z- N/ i- y
7 W; B$ C7 H  n6 s8 l; a$ w/ ~
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-6-19 22:23 , Processed in 0.053422 second(s), 19 queries .

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