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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    ! h6 p9 @# q9 k' U+ B
  2. //创建socket服务
    8 i" v. g. p; B$ b) D
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);! J9 T9 L2 ?6 j+ \: `9 j$ M5 K1 [; K
  4. //监听WebSocket连接打开事件6 {6 h! R' z0 p4 @& }' v- b. c
  5. $ws->on('open', function ($ws, $request) {8 s1 {5 ~: P1 k
  6.      var_dump($request->fd, $request->get, $request->server);
    ; q- G' x8 m0 {" f, u0 t
  7.      $ws->push($request->fd, "hello, welcome\n");
    , Q; r$ D  l  t# |8 L
  8. });5 ]" Y! N0 K: f. V! p' l+ q# ~
  9. 0 u4 B. p2 A- l2 h
  10. //监听WebSocket消息事件! F: a+ S6 I7 ~# [, _7 p/ h$ A
  11. $ws->on('message', function ($ws, $frame) {
    & @. M- w2 c) F
  12.     //推送消息给所有用户# p, T! Q+ g3 `; M/ K, o6 {& u
  13.     foreach($ws->connections as $fd){' t" w* \, X( A7 S, ]
  14.         $ws->push($fd, $frame->data);
    5 y9 Z% W2 n) X( ?6 ?; F' Z
  15.     }
    - A1 [0 t" @& ~5 Y
  16. });
    * S1 ^" g* G- V7 t: j, F' b

  17. . _& A! y: q8 f7 ~0 w
  18. //监听WebSocket连接关闭事件
    * V7 v) f/ W9 a) h& Y% T1 B
  19. $ws->on('close', function ($ws, $fd) {
    - l% K1 C8 `& M
  20.     echo "client-{$fd} is closed\n";
    5 D) d; ^$ \/ t2 J
  21. });
    . j, }4 c! I# s
  22. //启动服务9 y% ^% ]: r1 P7 f
  23. $ws->start();
    - {9 a( _3 |# ?$ y0 L' W. t+ g

  24. " V# [8 b0 |  e3 Y" _1 ^
复制代码
( j( P. ?, d7 L
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
3 ~2 I  {* D4 ]4 q" @5 o/ i3 J7 d

代码如下

  1. //连接服务器
    - e# W2 v0 t+ d7 u( Q0 v
  2.     const socket = new WebSocket('ws://lm.com:9502');( K+ K# O1 f6 ^' S( _, k3 `
  3.     //Connection opened6 c/ K6 |$ ~0 o7 c$ {
  4.     socket.addEventListener('open', function (event) {
    ; `1 O* D+ b' n6 S; R
  5.             //发送消息给服务器
    2 v3 m3 ]6 Z5 k; y6 ~2 q8 Y! n# f
  6.         socket.send('Hello Server! im websockt');$ K7 f. u' s! M( D' O- W
  7.     });; {+ n/ i1 _$ D. P  |- S5 v
  8.     // Listen for messages
    % O* c, h4 b1 b
  9.     socket.addEventListener('message', function (event) {  [, y9 n8 i8 W" u' f
  10.             //接收服务器返回信息
    8 D1 I) y6 o% E  y3 J" K- J. D
  11.         console.log('Message from server ', event.data);  V9 R5 C$ B; f$ W5 y. F8 {
  12.     });2 x7 m' u( Z0 _4 A8 {

  13. # A- D$ f; L% W
复制代码
伪直播主播页面3 u, {6 V6 |2 i8 v: C

html

  1. <body>2 q. x" g& Q2 M' c- J+ j
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    / h' _8 M: O5 G7 H- `7 P
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
      `% G+ [3 B+ M5 S: H) z6 S
  4.         画布; d! z1 P" n0 W: [
  5.     </canvas>
    # W  {9 E# Q9 e; ]. D( _0 u2 V
  6.     <img src="" id="videoImage" width="350" height="700">
    7 K4 o% v1 u; F' N" d; O5 V' e
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>& N; J- l+ M# z5 x! T$ l$ s$ @
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>7 a* C) O' J4 S( h
  9. </body>
    ( d* J6 A; Z8 \- \8 t7 @" V
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    & ^/ S& i" X* C' Q
  2.     var c = document.getElementById("myCanvas");* G, a/ [! H8 Z/ Y6 n
  3.     // var c = document.createElement("canvas");% i( S+ `/ @' ^+ x
  4.     var img = document.getElementById("videoImage");
    4 q3 M3 G" X  y3 ]1 n" v0 z# ~
  5.     ctx = c.getContext('2d');6 i2 o( m1 V' ^# @2 U; B
  6.     var dataUrl;
    6 p! T! S- a) r  [: O( B
  7.     const socket = new WebSocket('ws://xxxx.com:9502');. y: S' Q, j; H: ~: P
  8.     //Connection opened
    7 _  d: ]! p7 m. z  z; r# O. M
  9.     socket.addEventListener('open', function (event) {
    / ?2 H9 o+ I5 k" y  u
  10.         // socket.send('Hello Server! im websockt');
    ! r* ]( {, l5 R3 t+ k
  11.     });' ^  m5 L* j/ F$ F( K# J
  12.     // Listen for messages
    9 O$ `5 N( x3 ~4 R7 K
  13.     socket.addEventListener('message', function (event) {3 y7 n% C& n- A
  14.         console.log('Message from server ', event.data);# f/ t( d# ^- j0 i
  15.         img.src = event.data;- _% o: W) U: G- g4 ^/ D
  16.     });
      S. s% F  W* G( X4 I
  17. % V( q0 N$ N; B" ]8 H, r
  18.     function playVideo() {" _8 ~: W$ d- d
  19.         ctx.drawImage(v, 0, 0, 350, 700);3 F1 X1 G( R/ Z( O  Q! l& C
  20.         dataUrl = c.toDataURL("image/png");
    # L. [) _: O4 |7 i& k( v
  21.         // img.src = dataUrl;" g7 n+ K9 u& b
  22.         socket.send(dataUrl);3 p+ m, @4 k6 Z5 [
  23.     }
    . a5 B" }4 x0 ~) z
  24.     var tick;  s% I( z) ]% H6 Z
  25.     function aphla() {9 L8 N  {6 r7 X$ U6 X2 ~/ `
  26.         tick = setInterval(function () {
    3 m+ i6 Z- |" ^7 c6 y
  27.             playVideo();
    # V4 ]( q% R0 `4 v: |9 T
  28.         }, 1);- a1 [7 w  J# T7 [
  29.     }
    . b! ~7 b! ~/ S9 ?' L6 `' J  O
  30.     function vdStop() {& T4 e7 U& K4 M6 X
  31.         clearInterval(tick);" n9 }3 J& K% J5 h
  32.     }
    , ^; m: y5 f1 F3 |
复制代码
用户页面
0 [, D; G8 L$ X2 d" D* W& F) @( E; ~

html

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

javascript

  1. var img = document.getElementById("liveImg");3 G2 f  Z9 n2 j
  2.     const socket = new WebSocket("ws://lm.com:9502");
    % h: C* K6 M; S
  3.     //
    ' i: s$ Z- Q6 F3 D  F/ l2 G9 s6 j, ]& C" ~
  4.     socket.addEventListener('open',function(){
    % w( V: W1 `& l0 {
  5.      socket.send('Hello Server! Im live.html');( v. w/ J# I( D  j/ r) I& C2 G* ^
  6.     });
    ! _+ P! l4 n! z8 w
  7.      // Listen for messages( A/ T9 F8 d, t/ |. _. S# o. f
  8.     socket.addEventListener('message', function (event) {
    / e8 M) s. W7 ]; Y
  9.         //图片地址! Y5 z# {0 r3 H5 ]& S5 U
  10.         img.src = event.data;0 Y( }# V- U2 w6 o+ Z* A: \) J
  11.     });
    1 ]3 L1 R$ v) L3 P. s/ x
复制代码

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

  w5 Z5 h1 n1 d- ^  ^

$ s! ^2 D2 p4 {! U1 M) ?8 T
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2024-5-2 22:10 , Processed in 0.115301 second(s), 19 queries .

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