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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    $ l+ g' o7 g4 i2 c
  2. //创建socket服务. P! T" h8 R* [6 y: |
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);0 l; N3 p: h6 e- `$ w+ F
  4. //监听WebSocket连接打开事件
    8 s& S. F3 t1 A: t; ^9 J7 b
  5. $ws->on('open', function ($ws, $request) {* _  h. H$ k0 k, ?5 b6 S
  6.      var_dump($request->fd, $request->get, $request->server);
    % F/ U$ G4 }4 `# u4 J) d% \8 Q
  7.      $ws->push($request->fd, "hello, welcome\n");2 V  p) }, U, {; Z
  8. });
    " X$ R/ R& \+ J# O
  9. 6 q& Z& |" A7 n( F
  10. //监听WebSocket消息事件
    7 x0 E8 W) U# O1 N1 `% ^
  11. $ws->on('message', function ($ws, $frame) {4 h+ u& p) ^  p
  12.     //推送消息给所有用户% C9 D8 K3 s. W7 L
  13.     foreach($ws->connections as $fd){+ P) n; i1 h" E8 s& E: R
  14.         $ws->push($fd, $frame->data);+ p% z8 S9 J' [8 p& o& v( ]
  15.     }, C* v% _2 l4 L' L6 y2 f
  16. });
    1 E% }# B: K: t/ x* d
  17. - l2 B# V( ?' V- q' s+ T
  18. //监听WebSocket连接关闭事件2 g( d1 t% c* F8 x+ M
  19. $ws->on('close', function ($ws, $fd) {/ P* T3 A& ]6 Y! C3 a* U) k
  20.     echo "client-{$fd} is closed\n";
    ' ^* z2 f& j  Z6 v: ]8 E; ~' C
  21. });( O: k; `' k/ Y. I* D! a0 X
  22. //启动服务
    . b3 G6 e, A2 \3 T$ s$ t  W
  23. $ws->start();! A# P- N+ u+ F0 A) Z
  24. ! C9 p# o9 [& n, E- y; w; M5 i2 H! _
复制代码

$ |; Q" P5 O+ d' LWebsocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
7 i! J# i* `) a9 c1 h) [/ @

代码如下

  1. //连接服务器/ X& x9 c: M" p: b
  2.     const socket = new WebSocket('ws://lm.com:9502');
      ?6 G) H1 J; D) b( d* Z0 f
  3.     //Connection opened' @: T2 Z* M/ h
  4.     socket.addEventListener('open', function (event) {8 Y& |+ C3 n5 w6 ~0 ]+ F' ]
  5.             //发送消息给服务器
    & k. o& V) C3 G! U$ `
  6.         socket.send('Hello Server! im websockt');3 P8 i, |" o$ {7 _
  7.     });& ?9 i. I1 S/ {* Y+ C3 W
  8.     // Listen for messages
    ( T* T& _. Q5 ~3 v; d( d6 D
  9.     socket.addEventListener('message', function (event) {' [# @" S! v5 w! u" g
  10.             //接收服务器返回信息
    4 d8 b2 R1 {" B# ^( ^2 v
  11.         console.log('Message from server ', event.data);5 k( t/ }, b7 E
  12.     });
    * c4 A8 v! k1 M4 C
  13. - I. S8 t. v7 U9 r% L- ?+ B* D! f, e
复制代码
伪直播主播页面
! k4 \% a' \  d# [& n  K

html

  1. <body>
    / g! V: W5 g9 o0 K
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>/ }6 w+ R0 W. ?- l6 ]  b5 V/ C
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    1 T# Y0 K; a3 s! V6 ~
  4.         画布
    : p, @3 }7 l( B
  5.     </canvas>+ h  N! }3 m+ T# h$ U& L8 z
  6.     <img src="" id="videoImage" width="350" height="700">
    " p% V% m- \, I) }4 _9 m
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>" X* r) {, P  Z- H# v% b
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    2 c% z! W/ l' v6 g+ }0 [
  9. </body>
    * l% F6 R. U. i2 W  r; h$ L
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    ' l" J7 |7 V# A7 O) z/ o4 f
  2.     var c = document.getElementById("myCanvas");
    " q; E; k- m" P+ X$ G0 G
  3.     // var c = document.createElement("canvas");) P- p( m& H0 E
  4.     var img = document.getElementById("videoImage");/ p* G0 w) P' G- U$ J
  5.     ctx = c.getContext('2d');3 g4 `" N  }# x: K6 K3 }. g$ H: C
  6.     var dataUrl;
    ' M+ a( z; G0 Y( w4 R
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    & j/ G; O% B9 R1 J4 C5 h
  8.     //Connection opened% h, b2 C0 y: d* o: u" [1 v
  9.     socket.addEventListener('open', function (event) {2 T8 U% V7 S% l7 M9 Q
  10.         // socket.send('Hello Server! im websockt');
    ' }0 v0 A& [  v( h, G5 D4 v* i! ^
  11.     });
    3 O& u& x" x. T. {2 b3 Q
  12.     // Listen for messages; j  u* X1 d9 x1 H2 R; s* \, F
  13.     socket.addEventListener('message', function (event) {4 h& _6 f9 C! n/ h3 k' C
  14.         console.log('Message from server ', event.data);
    ! c: d7 u* i% H4 k1 k
  15.         img.src = event.data;( C# P3 o6 m- D1 Z$ t5 S9 g' V
  16.     });
    3 Z  g8 j0 ^- G" l0 f, o
  17. ) c. r4 M4 m, F4 M8 [
  18.     function playVideo() {: U7 C8 C9 n* n* c+ g6 ]. T
  19.         ctx.drawImage(v, 0, 0, 350, 700);
      z$ C& R) }. v" Z0 @
  20.         dataUrl = c.toDataURL("image/png");2 |! \  {. P+ n# s0 e- B' p) [  F
  21.         // img.src = dataUrl;( N) l, l% k7 C# n
  22.         socket.send(dataUrl);" e* E/ T5 I3 a" x% [2 w
  23.     }
    8 j: S# a- L& R( e
  24.     var tick;
    - P$ _8 J$ `# K5 k$ m+ k! y6 d
  25.     function aphla() {
    # ?5 B& [& l5 M9 K: X  [
  26.         tick = setInterval(function () {
    : K2 `6 ~9 w3 M8 }2 E, y$ k" D0 i8 u
  27.             playVideo();
    ; \, `& ?; Q. t: o) }9 i3 H
  28.         }, 1);( K. m" |% G! d4 H
  29.     }; k  [8 U) j9 Z) u; O+ C! d! l
  30.     function vdStop() {
    7 W9 M7 v/ D3 c5 l/ Q4 |
  31.         clearInterval(tick);$ X: w5 D4 {5 ~+ P! f* w% y" l$ Z
  32.     }
    1 Z7 n* x: u  B3 q
复制代码
用户页面# X9 R& `7 k+ ]# f0 m

html

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

javascript

  1. var img = document.getElementById("liveImg");* T* K8 b2 S6 P! n
  2.     const socket = new WebSocket("ws://lm.com:9502");% t7 |# d9 d% i# ^+ e4 Z
  3.     //
    5 Z/ \% W4 M0 s/ ^
  4.     socket.addEventListener('open',function(){
    / h) }8 f) |  T6 S, C9 G% E
  5.      socket.send('Hello Server! Im live.html');
    1 h% ?, t. u0 P- J% G
  6.     });
    ' N. G8 Y" n, k  k: q; z
  7.      // Listen for messages% B, Q- e' q. l1 Z6 r1 V2 O
  8.     socket.addEventListener('message', function (event) {
    . g, ]5 C; D- H* x8 L
  9.         //图片地址( P# j+ X, f, R+ S+ L5 x: |
  10.         img.src = event.data;
    ' W  e& u. F* r  y2 }( a+ d
  11.     });" n* X. `4 F% M1 X1 W( e9 q
复制代码

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


% S3 }8 W4 T( U/ B) @3 I: u5 g0 L5 c7 {
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-9-21 00:13 , Processed in 0.055794 second(s), 19 queries .

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