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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  ; I. v' r8 K7 g
  2. //创建socket服务
    & ?. c. {7 \. u
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    7 O. ^( D' L+ |3 {, z
  4. //监听WebSocket连接打开事件0 ?, d: L6 r( |5 Y
  5. $ws->on('open', function ($ws, $request) {0 d& b/ L; x% v! I
  6.      var_dump($request->fd, $request->get, $request->server);
    & F% l& p, N+ ~/ g$ g+ T
  7.      $ws->push($request->fd, "hello, welcome\n");
    5 b# H' C+ ]3 G: w# t6 J
  8. });6 N" ]6 ^5 o& X: z1 ?
  9. ' b; X" _: w. h* c' \
  10. //监听WebSocket消息事件
    9 [6 j* ]. ^; X* ]
  11. $ws->on('message', function ($ws, $frame) {7 p3 M* p. Z( O) t- {7 t1 {6 ~4 p2 U
  12.     //推送消息给所有用户% e, s& `0 R# t5 M9 n! S$ e7 T9 n, H
  13.     foreach($ws->connections as $fd){
    5 z" I  E  h- {3 `1 A
  14.         $ws->push($fd, $frame->data);
      n* M" e- H% M7 t1 }" \" H1 y0 ~1 i: |
  15.     }" [$ p( h, R  }$ ?5 V
  16. });4 y+ V+ o2 p2 `4 y& v: k
  17. - l. u4 a! R7 i6 f/ [
  18. //监听WebSocket连接关闭事件
    ( Z$ \3 K% l, T. i
  19. $ws->on('close', function ($ws, $fd) {
    7 Y/ S  q! b  R5 \# g
  20.     echo "client-{$fd} is closed\n";
    . P6 E: ?, n+ ?; \
  21. });; |0 d2 Q" M0 i5 a( x
  22. //启动服务
    . K# F) b' U. E. i  u
  23. $ws->start();
    9 n/ Y/ `! A; y/ ?5 d7 e

  24. - L1 ~7 V$ t! \/ e, v: a
复制代码

. \/ V5 D% a8 q+ e; ?9 fWebsocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
$ ?9 j+ ^# X. d6 t

代码如下

  1. //连接服务器
    3 M: ]4 ?) c" F1 ^
  2.     const socket = new WebSocket('ws://lm.com:9502');8 }; v( h6 X4 L$ X" u3 C3 K
  3.     //Connection opened" o* U% T, ?1 Y; R
  4.     socket.addEventListener('open', function (event) {
    - `& E; l3 G, u
  5.             //发送消息给服务器
    ' Y+ ]$ c3 \  D& N4 F+ p
  6.         socket.send('Hello Server! im websockt');
    6 o" L3 `" [, |% p
  7.     });" u) K- {8 W$ X& u( _; K
  8.     // Listen for messages# e9 _7 ?* Z3 c
  9.     socket.addEventListener('message', function (event) {
    . Z/ r- D; A+ o' X' E+ a1 w
  10.             //接收服务器返回信息
    ; p" W( g: h4 F( Q, o7 n& n- M
  11.         console.log('Message from server ', event.data);. M! a" `* p) A, N- h5 p& z( R1 S
  12.     });
    7 R" d3 P: ^" ]* d) r" V7 A

  13. 0 }  ^% y. s9 {' h1 L
复制代码
伪直播主播页面
. `6 R' D$ f$ Y  {; B: y: U( s: D

html

  1. <body>
    $ |4 R: L% N6 j! p4 U* q0 Q6 H
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    3 q5 f$ k$ B$ p" U) P( ?/ b
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">2 I0 @$ I* r6 _* _
  4.         画布
    $ D3 A% f6 V+ P  g: @" `' {
  5.     </canvas>: w" [+ X; N  h8 K3 Y! A) |* ~
  6.     <img src="" id="videoImage" width="350" height="700">% i& U2 U6 N0 t! Z3 T9 Q  U4 Q+ e0 D
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    + |% n3 Y) d7 a/ H
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>% b, L0 @0 ]6 Z/ ?% g: z2 b1 ?) Q
  9. </body>
    1 }! z3 y6 @0 t
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    - l1 Z5 K2 V6 Z8 H: l
  2.     var c = document.getElementById("myCanvas");
    1 |' Q5 x! A( q! o/ g
  3.     // var c = document.createElement("canvas");1 [  E( N- U$ c# R: X
  4.     var img = document.getElementById("videoImage");
    * J! D/ H3 o5 @7 [/ M
  5.     ctx = c.getContext('2d');. J( c+ J9 U8 ^0 W8 ^6 M% x2 Z
  6.     var dataUrl;: |/ o9 _4 A0 O! P
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    $ i. S3 F& L1 U. e
  8.     //Connection opened
    , o2 h: E# k. `
  9.     socket.addEventListener('open', function (event) {
    5 g- H: T: q# v3 S6 l7 S
  10.         // socket.send('Hello Server! im websockt');
    , X7 _8 T- ?& N% T. `
  11.     });
    2 X0 @* i% m$ v3 ]/ H5 ^
  12.     // Listen for messages. F5 B6 \4 m) S) E  h4 Q7 _
  13.     socket.addEventListener('message', function (event) {$ T- z- [- n% A5 C$ `' B
  14.         console.log('Message from server ', event.data);. j# x+ @; j! s% O' c) K& V
  15.         img.src = event.data;
    * n2 d  x: P3 A4 S( d: W- `
  16.     });
    ( }( j8 m" B8 ?
  17. + }3 [$ @0 L4 H) R
  18.     function playVideo() {
    % Z# U7 u( H4 Z, W% c# u/ a
  19.         ctx.drawImage(v, 0, 0, 350, 700);: d8 S5 W, K+ H8 X6 J
  20.         dataUrl = c.toDataURL("image/png");
    . m' H% V6 F/ W' @/ i/ a- Y# P
  21.         // img.src = dataUrl;8 S3 I7 k; n  G8 s
  22.         socket.send(dataUrl);9 h3 F5 I0 r+ Y
  23.     }5 \& J+ }' ~. t/ l* j5 f7 p
  24.     var tick;
    . m5 S# [  k& C
  25.     function aphla() {9 |6 J. ]' s& ~2 M. D/ S
  26.         tick = setInterval(function () {
    $ B" u$ w6 W+ t: j9 H8 k+ t; a1 d
  27.             playVideo();
    / @6 X# T2 `+ J9 W! R* v
  28.         }, 1);
      [& V  h9 A; r5 z* k" h0 d! V
  29.     }; U6 Z$ R" y+ Z, S* k. O
  30.     function vdStop() {
    2 w: i" S8 `# b
  31.         clearInterval(tick);
    " x$ |& H* j, L0 z
  32.     }; X& _# p0 O' Q: S2 b  I$ f
复制代码
用户页面6 c: ^" _. f. ~/ ~

html

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

javascript

  1. var img = document.getElementById("liveImg");
    0 E/ P4 Y$ }$ l2 M% `+ x2 o
  2.     const socket = new WebSocket("ws://lm.com:9502");
    6 M# l4 c3 R/ \+ P) U
  3.     //1 G$ Y' ]7 [- K. |; X
  4.     socket.addEventListener('open',function(){$ W. C9 e5 D+ ?8 t3 G  r+ s% p1 G
  5.      socket.send('Hello Server! Im live.html');
    0 s5 K8 n& w- W$ @1 J
  6.     });; y0 F- w* N+ _0 t% w2 S
  7.      // Listen for messages$ A4 A: V0 X4 i
  8.     socket.addEventListener('message', function (event) {
    + e0 ?* V+ n) y; \& _
  9.         //图片地址7 p1 x7 M2 L+ @
  10.         img.src = event.data;3 K# P) O2 j* D3 d: J
  11.     });
    5 `% U9 n: S' {0 w
复制代码

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

, h7 W! }2 g* ~

  n: s, I1 c/ i4 G# l+ {& m
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-3-17 16:06 , Processed in 0.085531 second(s), 20 queries .

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