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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  ! q% A" ?6 l1 \0 s9 X5 Y' p
  2. //创建socket服务2 [0 j9 K( `" ]* h) h
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);! ]$ B* O$ B# |; [
  4. //监听WebSocket连接打开事件
    , C- D2 J2 M) p( S: I
  5. $ws->on('open', function ($ws, $request) {
    2 V. A% @+ S' _& Y
  6.      var_dump($request->fd, $request->get, $request->server);" ?0 l! v* x0 o" F* A1 A6 P
  7.      $ws->push($request->fd, "hello, welcome\n");0 W, u( b/ |. X# D* ~8 k" u
  8. });+ Q# E, e  Z( `  _8 s1 _
  9. 3 N! [0 c( j7 C8 E6 A1 b5 i, b0 Z
  10. //监听WebSocket消息事件
    + ~0 f7 S* V( D8 X3 m5 r( d: `; L
  11. $ws->on('message', function ($ws, $frame) {4 j0 n9 c2 {' |7 l' [
  12.     //推送消息给所有用户
    3 }6 j( h' T/ ?8 c  e; ?& C7 j0 w
  13.     foreach($ws->connections as $fd){
    + x0 q3 n7 m$ K3 S4 C" t
  14.         $ws->push($fd, $frame->data);
    / N1 {3 C7 i1 u
  15.     }2 [3 O! A3 R* `8 s4 E" n% c5 U
  16. });8 C% x$ i5 G8 V7 l$ O, L2 j5 Z

  17. 2 T! C3 [* e2 v
  18. //监听WebSocket连接关闭事件
    , B. c' _6 b+ X
  19. $ws->on('close', function ($ws, $fd) {
    , ?: K5 S* \4 U# a- \
  20.     echo "client-{$fd} is closed\n";' Y" c- |- ^4 k2 Z0 g
  21. });
    ( l1 Y/ f% ^6 J6 M! l9 k, l3 K
  22. //启动服务
    ' w$ @4 m+ U+ u& ^6 x- k
  23. $ws->start();
    $ g: W# U3 s- s% p9 @. \
  24. 8 H& B: X; Q3 K) Y6 T. y9 o: e
复制代码

8 p# T* k  R* o+ bWebsocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
2 w: z  F- `" t! {; _4 J

代码如下

  1. //连接服务器5 ]& w: X) d, I) i( p/ O
  2.     const socket = new WebSocket('ws://lm.com:9502');
    ( Y0 u, H* T" ~+ Q" ?* F* J
  3.     //Connection opened6 ]2 @: A* B' }: \) N& B: f, v1 R
  4.     socket.addEventListener('open', function (event) {9 _; o6 ?, i: r
  5.             //发送消息给服务器' D/ o% B8 N' |" w0 n
  6.         socket.send('Hello Server! im websockt');
    6 m+ h; a" P. F) v* `5 g7 h( M! v* c
  7.     });
    ; ]6 L# m$ i( @8 J0 _% a. a" J* l
  8.     // Listen for messages
    ( N$ r  O# F6 h' S5 ~
  9.     socket.addEventListener('message', function (event) {0 C  `- \' A: N1 X2 F2 h& `
  10.             //接收服务器返回信息
    % z( p; p- |. |$ ?* J3 y$ Y9 P
  11.         console.log('Message from server ', event.data);
    . H/ C) _8 j" T& Q6 g6 T
  12.     });
    , q  h4 O5 ^7 x! D  ^. j
  13. ! R( [4 m# i0 C+ m
复制代码
伪直播主播页面
: T/ R' Z# G  k

html

  1. <body>
    & ^" q7 U; w" F9 [
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    + x, k& r* _: v  s! b! @5 k. _
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">6 o2 x4 a6 U* S9 K
  4.         画布! N& p3 u1 H# E6 _
  5.     </canvas>* h' A/ U" r; l: C% }7 o7 N
  6.     <img src="" id="videoImage" width="350" height="700">
    ) a9 b# V: {& f" a/ @
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>% }$ d" Q! a7 F; e' ]' ~  G
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>4 t/ k' B" P, N! j: X
  9. </body>
    5 U$ V1 A: k. p" o. z4 t
复制代码

javascript

  1.     var v = document.getElementById("myVideo");  _4 d; x5 n+ q; l6 v0 r- j/ n4 {, [
  2.     var c = document.getElementById("myCanvas");
    ' [! E. p6 M6 b- h
  3.     // var c = document.createElement("canvas");
    ; y6 w$ j3 P  f: B) P+ Q
  4.     var img = document.getElementById("videoImage");
    , D9 H  C# |5 C
  5.     ctx = c.getContext('2d');( M7 o. y8 T0 n. E- S
  6.     var dataUrl;
    * C- ]. Y" X- ?8 m' R* Y+ {
  7.     const socket = new WebSocket('ws://xxxx.com:9502');2 \9 E5 v' G8 m
  8.     //Connection opened# e5 g: _+ L8 r2 q. F
  9.     socket.addEventListener('open', function (event) {$ h: R  S7 b3 I5 W3 y5 K
  10.         // socket.send('Hello Server! im websockt');
    6 O5 ^+ l8 X5 V' @; b4 O
  11.     });
    ! M/ t6 E/ |3 X4 T0 ]6 y
  12.     // Listen for messages$ D; R$ @: L7 S: \: H
  13.     socket.addEventListener('message', function (event) {
    8 ^  w  S" T# l9 j0 w( j) P
  14.         console.log('Message from server ', event.data);1 i% O) ]5 M9 F7 C* P# ?
  15.         img.src = event.data;# @4 _, u0 T( m( W$ k6 Q  y, ~
  16.     });& l( W1 z5 w# b/ ^& K
  17.   T1 K! v! {" _% e3 O  F* }
  18.     function playVideo() {& _+ Q% ]4 [$ F3 m! t8 {  d
  19.         ctx.drawImage(v, 0, 0, 350, 700);9 a9 m( g6 K4 M" R+ |" N
  20.         dataUrl = c.toDataURL("image/png");
    " m* u6 e/ G) J% Q2 z; S
  21.         // img.src = dataUrl;  O% N) j6 }& Y. q4 |7 b
  22.         socket.send(dataUrl);' F$ P" b7 a! H( Y7 G+ E
  23.     }
    ) _) i0 O" D( t! F* H' W) o% J* [* L
  24.     var tick;
    ' N, o, ^5 u+ n9 Q
  25.     function aphla() {
    5 G2 P! K, Z; A0 v% g* h! T
  26.         tick = setInterval(function () {4 r& E6 d) [, b; t8 l# {6 N
  27.             playVideo();* Y9 [& I: \" S) n6 O
  28.         }, 1);
    ' x6 U. ^1 v9 W  w( ^
  29.     }5 j5 J& e# C" z( w! c4 T
  30.     function vdStop() {
    # R5 S! y0 c: R; A4 F. E  q, s
  31.         clearInterval(tick);
    9 V: i" f* h! }. x5 y5 h8 W
  32.     }2 }+ j0 b9 E- o* ?
复制代码
用户页面
; [: L* T( G% N( F% Z4 Q

html

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

javascript

  1. var img = document.getElementById("liveImg");3 h& T- ^4 J# t  d8 _+ a5 G; [
  2.     const socket = new WebSocket("ws://lm.com:9502");
    $ s! p% Q2 d: i+ E! r
  3.     //
    ' }& `2 l3 D( w7 }( _$ B  |1 O6 F
  4.     socket.addEventListener('open',function(){
    4 O4 A% i0 `5 G
  5.      socket.send('Hello Server! Im live.html');
    ( L" p% s% o1 q* R0 b, g  O3 A
  6.     });' I1 d; ~' S4 f- R8 p4 ^7 {
  7.      // Listen for messages
    1 E2 j$ ?, s( f
  8.     socket.addEventListener('message', function (event) {
    8 k+ j. n1 m/ M  Z! [  \
  9.         //图片地址
    6 p4 `. ~( J( ^! Y
  10.         img.src = event.data;3 d+ K: B( m0 G- F/ ]8 e
  11.     });
    0 y, s8 j) d( d4 @
复制代码

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

# i! r( C9 c4 h0 p6 e) R9 ^

2 r; `. D, q. h+ m
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2024-12-22 15:16 , Processed in 0.102457 second(s), 19 queries .

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