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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    1 z) s/ n5 S2 e- x9 W
  2. //创建socket服务! l1 b" [* s0 ?# i8 K! P: n, T& V
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    - ]9 H4 H  w" i& t9 T, y" o
  4. //监听WebSocket连接打开事件
    8 |% Q' |2 \- a3 E0 Y3 |
  5. $ws->on('open', function ($ws, $request) {  ^! P( t+ M, @) n
  6.      var_dump($request->fd, $request->get, $request->server);: K* t8 W# ~* ~" t2 l+ I: l
  7.      $ws->push($request->fd, "hello, welcome\n");
    ; o! `6 k) f- M; @9 n
  8. });
    + ]* L$ u4 s) Q0 r
  9. . j5 G% F3 W$ t  F. Z
  10. //监听WebSocket消息事件2 l: B; B+ W& N
  11. $ws->on('message', function ($ws, $frame) {4 x/ S( u5 q; v' i, }9 }& X
  12.     //推送消息给所有用户& I  K& R) t9 W" s5 O$ z9 `
  13.     foreach($ws->connections as $fd){/ z8 T; r7 J# s# E2 M! P$ [0 G# p/ q
  14.         $ws->push($fd, $frame->data);
    ' s, Q" [- ?) O/ {
  15.     }2 o* l! p8 H7 q; j& b& p
  16. });
    3 m# P7 y% N$ t6 j2 Z: T0 _1 E) D) M

  17. ' T% D: o6 f, p
  18. //监听WebSocket连接关闭事件9 M1 i2 b; f+ l* B. D$ X
  19. $ws->on('close', function ($ws, $fd) {
    ' ?; }7 A+ N5 M# G
  20.     echo "client-{$fd} is closed\n";- ~& Z$ M) }! t$ @$ w
  21. });
    % L: l1 N- J' }8 F3 l* y' U
  22. //启动服务; u4 Z) Y" d' ]
  23. $ws->start();
    ( `9 B5 S6 `1 R% w7 D; b2 N0 b; w2 B! x+ h

  24. 1 J8 t" w" O; ]. s
复制代码

% h( b' T2 j! O9 \Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
; }3 X* Q0 f- V4 e# }; H% K

代码如下

  1. //连接服务器
      v! Q1 A, @& s2 u
  2.     const socket = new WebSocket('ws://lm.com:9502');; C. N5 v: Z/ D0 {
  3.     //Connection opened3 m% J' d( y0 C8 M$ H
  4.     socket.addEventListener('open', function (event) {
    6 [3 |0 e4 q) ^/ H( s5 ]& G
  5.             //发送消息给服务器
    1 b- V6 w: `% {1 x
  6.         socket.send('Hello Server! im websockt');4 _$ g3 j. `3 X
  7.     });9 `# [* Z) L& f- g6 W' F0 S/ b
  8.     // Listen for messages
    6 |- y9 L% f  O' n
  9.     socket.addEventListener('message', function (event) {
    7 @' q3 v+ {8 s( k: A
  10.             //接收服务器返回信息
    , Z! o5 P; {4 s- h
  11.         console.log('Message from server ', event.data);: ]$ O% \1 D, C. o8 W+ g4 r+ \
  12.     });9 p/ z4 @6 P$ F8 S" R. v( G
  13. # P. h( V7 a2 e: i4 @4 e
复制代码
伪直播主播页面
4 a% H, |0 B3 o& V

html

  1. <body>' `) u- ~5 B6 w6 z1 H' H' U
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>4 f4 I& F( g& B0 W9 x) v
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">0 r7 U$ u1 L5 b6 ~# E3 s" ]
  4.         画布
    ' ]' L* n2 B5 D. V4 X0 T# D" Q2 C: o- m
  5.     </canvas>
    6 |! p6 y' _" {8 j$ G; v
  6.     <img src="" id="videoImage" width="350" height="700">
    / |( M9 d: r' w  j0 p+ l4 A
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>( z* h+ h+ q8 q. B6 C4 [$ ?
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>& a3 F0 h" I% I/ O: q
  9. </body>
    : l! X. K* A1 I2 i
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    . W  o) R( l) m) p/ L% m7 S
  2.     var c = document.getElementById("myCanvas");
    $ g! {' C. ~9 p+ t
  3.     // var c = document.createElement("canvas");) H+ G3 D# H. k7 B
  4.     var img = document.getElementById("videoImage");1 n6 _# e" W; z# `# i4 |
  5.     ctx = c.getContext('2d');# t' _. I4 O' t, j3 i' h
  6.     var dataUrl;+ P1 y$ `7 ]2 [2 R( |% ~
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    5 p( k! c# o0 k; _3 J
  8.     //Connection opened
    8 K0 T3 l- t- [6 j/ p) ~. {
  9.     socket.addEventListener('open', function (event) {
    & l9 o4 O+ a7 F$ G
  10.         // socket.send('Hello Server! im websockt');
    * d/ v5 D# k9 z1 ^  k3 Z# ~
  11.     });1 _/ q# w* l7 l$ c  d
  12.     // Listen for messages9 f! ^4 n" s: G3 B2 y
  13.     socket.addEventListener('message', function (event) {, J, X/ I  L; p( i: }; y6 T
  14.         console.log('Message from server ', event.data);& H0 W* R8 F! K& o3 y
  15.         img.src = event.data;
    + t/ k! t  ^& X! V# ]$ u3 J
  16.     });
    % l. u$ I; W7 `. K) w. ~' V

  17. ( U( u: z6 g/ ]( q/ P) x
  18.     function playVideo() {- V3 C+ E4 a: D' U+ X! i" b! o
  19.         ctx.drawImage(v, 0, 0, 350, 700);2 {: Q( N& |+ v2 O/ h: B, H( N5 E
  20.         dataUrl = c.toDataURL("image/png");
    " ~( V3 W7 G% _
  21.         // img.src = dataUrl;
    ! @: S9 w* j8 _  P; u" Y2 z- q
  22.         socket.send(dataUrl);
    ' Q: x) R1 s/ S* D2 m0 V6 e
  23.     }! ?4 Z- v6 H  R  N: ^- |
  24.     var tick;
    ( r% Q8 ?6 v" u$ L; r$ `/ P
  25.     function aphla() {: E: ?0 ^3 W& F3 g" w
  26.         tick = setInterval(function () {2 |4 m% P# l2 O1 m1 l% U4 D- G
  27.             playVideo();
    " m2 x( a% |; o% P
  28.         }, 1);
    2 D$ Y, t9 \- Z$ g* A# H) g: h$ m
  29.     }
    - p9 h, j3 O8 X- t8 F5 g
  30.     function vdStop() {
    4 g# R5 x, R  X4 P% w& I9 P0 Z/ Z
  31.         clearInterval(tick);
    ' R# i; v% [, X3 u5 u9 l: h" j
  32.     }# z, Y1 s' ^- j
复制代码
用户页面
' A! I( E( B( T- Z, \" h! G

html

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

javascript

  1. var img = document.getElementById("liveImg");
    8 O( g# l2 p3 b
  2.     const socket = new WebSocket("ws://lm.com:9502");
    ! n7 e* M; L4 A9 u
  3.     //
    " ~8 f; _" U) X$ V" X# ?6 c: W
  4.     socket.addEventListener('open',function(){
    $ @# W* p/ P5 V* i# u
  5.      socket.send('Hello Server! Im live.html');# R! |+ T" u) w+ U9 y& c' O) `0 ~# r
  6.     });* w* k$ Q4 z( l
  7.      // Listen for messages
    5 z0 a! |3 W( X( M
  8.     socket.addEventListener('message', function (event) {# Z; {' j1 E# @4 a1 l
  9.         //图片地址% `4 }7 Q# W0 g' _$ P" _  i$ x
  10.         img.src = event.data;# t8 y$ J7 Z. ~5 f4 z8 ?% k9 Q
  11.     });
    ; I7 H5 b! h) M, b$ e& v% K
复制代码

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

3 U2 E: D8 C2 l+ x
) u  b9 Z8 ]" k! P! B# M3 H8 R) {
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

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

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