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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    1 X6 Y2 @; P$ v
  2. //创建socket服务, N* S* z; o1 L  C4 Z! [
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    ! c' J6 K- B- h
  4. //监听WebSocket连接打开事件
    0 o' {& }* @4 b0 D4 c
  5. $ws->on('open', function ($ws, $request) {
    4 H0 G; N2 I: c7 S! v8 h, n
  6.      var_dump($request->fd, $request->get, $request->server);
    , N3 @9 I- [4 ~# i
  7.      $ws->push($request->fd, "hello, welcome\n");% j- Y4 B& S! }  Y4 U
  8. });. q  t3 L* @4 n
  9. % y/ l+ `% v9 g1 Z) j* W/ U
  10. //监听WebSocket消息事件9 ]( ?( G  K# {% H$ M  q7 i, P! e  G9 O
  11. $ws->on('message', function ($ws, $frame) {* ^8 Y* n/ {2 ]0 o* l/ x
  12.     //推送消息给所有用户
    ; @7 K) J3 ~7 c' Q, Q. i' Z
  13.     foreach($ws->connections as $fd){
    ( |3 y  }0 ?: R' {; }  h: `/ _
  14.         $ws->push($fd, $frame->data);" c: _. `# j% \+ x
  15.     }% y1 b% j+ M3 `! R9 W
  16. });/ x9 k$ ?. w( b2 M; F
  17. " Q3 K  I/ F* o4 O: z
  18. //监听WebSocket连接关闭事件) ^0 e$ p! g3 ]  h! W
  19. $ws->on('close', function ($ws, $fd) {
    0 u$ G1 `0 a% p
  20.     echo "client-{$fd} is closed\n";7 K+ E, ]! e9 [* T+ ~. y
  21. });
    2 q2 J/ u& q2 J2 s1 q
  22. //启动服务" B" f5 L# P5 p6 Q
  23. $ws->start();- ?  M, O6 R- j- V
  24. . U( X, Y, }( E3 E5 X' O* U
复制代码
8 @) Z; x' g, Q0 w3 T3 c+ H  V
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
* N# _3 w9 c5 |7 @( t0 [

代码如下

  1. //连接服务器* k! u; A. `/ c
  2.     const socket = new WebSocket('ws://lm.com:9502');
    # M+ A0 M6 p( z3 L. z
  3.     //Connection opened
    - m: Z# P" g: D/ C8 P
  4.     socket.addEventListener('open', function (event) {
    % b% m) H, X, D/ |0 j
  5.             //发送消息给服务器
    $ M+ ?  g$ @0 v! T. B) _* f
  6.         socket.send('Hello Server! im websockt');
    # a1 L/ X1 _% g8 r/ X: Y& K
  7.     });. F6 {; Q: A$ y1 @& j+ M
  8.     // Listen for messages
    " H7 [$ v& F. \3 e, ~2 K) Q' L$ M
  9.     socket.addEventListener('message', function (event) {
    ; N! F3 ^6 S; r; h
  10.             //接收服务器返回信息
    ' s! e  j9 g5 H/ g6 i
  11.         console.log('Message from server ', event.data);
    2 R. v' b. Y: E5 e
  12.     });
    5 p* @& {& w; c4 r2 Z, x" O! W
  13. ; ~; F6 E6 R/ f; ^# \  P
复制代码
伪直播主播页面
" Y2 l9 o7 t8 @0 j, j

html

  1. <body>- x5 k6 |/ O" y0 [- R5 Q( H
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>  A( _2 B: G& U( ?- X
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    " ?# W& M  ~; l* \' Q
  4.         画布
    ( D6 ?, g2 C+ t  `+ p
  5.     </canvas>. t% E* c4 }: E2 P1 U( ~( Q0 \" z
  6.     <img src="" id="videoImage" width="350" height="700">
    & L* {3 C% J, |5 h/ G! e' m
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    9 U! `8 V! j' k: S
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>$ r* \) ~7 J: ~0 E
  9. </body>8 p, P1 _2 e7 F5 B
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    $ h( ]- D( Y. A5 Q8 j1 d" `( c" D
  2.     var c = document.getElementById("myCanvas");
    % Y& g, B7 s) C9 |8 J
  3.     // var c = document.createElement("canvas");
    8 h9 {4 I% L- H
  4.     var img = document.getElementById("videoImage");
    , @1 q. }1 X, ?) f9 }. t. u" Z  z  A, z
  5.     ctx = c.getContext('2d');
      U5 m- x6 [9 u
  6.     var dataUrl;  ^5 e- M! q1 L- D* m3 b
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    ' E8 E( l; G% \& y- T( J% n
  8.     //Connection opened
    & Z5 d. R) M2 s
  9.     socket.addEventListener('open', function (event) {
    # q" Q5 c. h2 i$ r
  10.         // socket.send('Hello Server! im websockt');+ g6 f; w6 v; t# I
  11.     });; D3 W0 h, w8 g1 P
  12.     // Listen for messages
    0 W" i3 T, C4 F. P! ^- M" W
  13.     socket.addEventListener('message', function (event) {
    ! P6 O2 f( u! m: }, s' T
  14.         console.log('Message from server ', event.data);
    ' y+ \7 Y: K6 O9 a. o4 h; j3 p/ O
  15.         img.src = event.data;) l. L; o8 G6 i* j) v) q
  16.     });6 Y/ g, F7 v; P. b$ h
  17. 2 E$ z4 V3 Y7 j) y9 w
  18.     function playVideo() {
    3 q: v7 R. f' W/ X3 ^/ A1 x
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    ' o. P" t3 r( D& j
  20.         dataUrl = c.toDataURL("image/png");% X8 B) u" S  }& k3 E
  21.         // img.src = dataUrl;- P. @, h- m4 ^2 g: N  J) X& H1 J
  22.         socket.send(dataUrl);
    1 u- Y  O5 M  E" m* Z
  23.     }
    : `5 V4 Y5 b" |6 J
  24.     var tick;
    & g4 z0 j$ O& ~2 P& O( i
  25.     function aphla() {
    ! j# P! }6 }/ b" e2 m
  26.         tick = setInterval(function () {
    ( L" G; |" V$ L- [0 I0 F
  27.             playVideo();1 _2 M0 E' E( _( j: S$ M
  28.         }, 1);
    9 y" U  ~/ c9 b
  29.     }, f. h3 u! ?! D; A/ Z, J# Y
  30.     function vdStop() {6 W/ ?% f4 H/ m
  31.         clearInterval(tick);
    ! F: Y. n2 r' l7 \0 e
  32.     }  J+ O/ ~7 Z# e# Z5 V
复制代码
用户页面) _2 }7 g$ y2 W. `; W

html

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

javascript

  1. var img = document.getElementById("liveImg");
    , q5 ?9 Q$ M5 {. `6 E4 _
  2.     const socket = new WebSocket("ws://lm.com:9502");
    ! x2 K5 G6 z$ L1 }7 a
  3.     //1 ~* Y- e2 V8 W. K( d
  4.     socket.addEventListener('open',function(){+ v; g9 S# n: M. X5 k8 @! j
  5.      socket.send('Hello Server! Im live.html');- s4 r5 ^4 J" j  M$ e
  6.     });2 H5 s7 q+ `# a8 e2 z5 i
  7.      // Listen for messages/ U3 t4 h; G% ~+ p# [
  8.     socket.addEventListener('message', function (event) {
    * S0 F: N5 _. ^! n: Y
  9.         //图片地址
    6 i# P/ c9 U% F" F* q9 ?) |! g
  10.         img.src = event.data;
    ( Z6 y9 h- t7 e
  11.     });" Q- ^6 ?( ?  E" N1 n; F4 v
复制代码

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

* J/ U+ h7 S2 o- V5 M

5 K6 K0 J1 q  [5 W& k
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2024-5-5 09:57 , Processed in 0.118922 second(s), 19 queries .

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