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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    * e% J3 G" L. L! E# l' l
  2. //创建socket服务
    3 ?# p3 l1 Q" h9 U5 \; L: ^9 V0 f" H
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
    + H7 I+ I9 b0 x
  4. //监听WebSocket连接打开事件
    / Z1 x2 m/ @' `, i# i  c
  5. $ws->on('open', function ($ws, $request) {2 p- h( p/ `) ]5 R
  6.      var_dump($request->fd, $request->get, $request->server);
      F  l# ~6 h6 {( D9 i+ c- b
  7.      $ws->push($request->fd, "hello, welcome\n");! _0 l- j0 |8 z5 v
  8. });& ]) @; g) B% P8 c2 Z  w& N

  9. 5 m" G8 S0 f) R, q
  10. //监听WebSocket消息事件
    # a7 J5 v, T$ C, B5 j( o4 l2 B7 t
  11. $ws->on('message', function ($ws, $frame) {
    ) ]: c* _: T, Q  `6 e9 x
  12.     //推送消息给所有用户7 ^: {* ~* |2 J  Y" i8 O" s
  13.     foreach($ws->connections as $fd){
    ! \" \: l  P( f* B
  14.         $ws->push($fd, $frame->data);7 B) Z3 u3 S/ [$ `4 [1 J& p
  15.     }
    ) a2 z1 a; Q1 m* ^+ O$ J1 S+ U
  16. });. X2 l- B8 ]; q) C4 Y' c5 b9 S9 ^
  17. % i% g6 G( K9 [6 j  C+ ~
  18. //监听WebSocket连接关闭事件/ }( {* \3 ?; B) c/ Z3 \0 X% N7 X
  19. $ws->on('close', function ($ws, $fd) {* L1 w1 s* \% b; D- Y5 f7 r( q
  20.     echo "client-{$fd} is closed\n";
    % @; ?+ ^3 Q1 g: p+ m3 N6 e
  21. });
    ' U& Q, i6 Y, i& {& G
  22. //启动服务
    1 {+ D: t+ g7 V$ [3 [; ], |
  23. $ws->start();5 Y- O5 H) P; X, F: w
  24. 8 [4 G3 R; [) @3 u
复制代码
& t6 r+ Q* w! [5 Z/ D. K2 q! B2 P- I+ W
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端" s3 N2 V! K  H) R( B6 q0 T# S4 z

代码如下

  1. //连接服务器+ |4 X) _- o. T$ c4 T
  2.     const socket = new WebSocket('ws://lm.com:9502');8 n# z( s: V& J# w3 |& m
  3.     //Connection opened0 ~: }0 _' ^! O6 `$ T! X" t
  4.     socket.addEventListener('open', function (event) {
    & h5 v5 u. b" g" I/ T4 Z
  5.             //发送消息给服务器, L- f7 q% S/ }. T" i
  6.         socket.send('Hello Server! im websockt');
    ) X/ f* {# |( B6 i1 A0 p
  7.     });
    6 W" S/ M! @5 u6 \; P
  8.     // Listen for messages3 C4 p  n$ E- l
  9.     socket.addEventListener('message', function (event) {/ Z( }( p' p! z2 ^- j( t7 H$ b
  10.             //接收服务器返回信息
    1 U6 c. x7 V! v
  11.         console.log('Message from server ', event.data);1 f! M8 z2 ^" ^! `' I! h
  12.     });
    3 [3 p. B& l9 k

  13. 5 E; c: y* S0 r. b6 \
复制代码
伪直播主播页面
% j- F8 y  B8 R6 x0 e. }( v; D

html

  1. <body>
    5 W) \* q4 q6 A* v
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    $ k8 }0 J! M. \. p+ f
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    5 a8 I0 |* o3 l- J" b+ R
  4.         画布) ~0 c. [& S) a+ d/ E
  5.     </canvas>! C1 S3 D& O, h$ f1 M, y% Q6 `
  6.     <img src="" id="videoImage" width="350" height="700">
    . m. N- n) j& d+ |
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    2 l' j0 a) a  F9 q' P4 V6 W
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    * k+ n1 E; P! u( Y% d: R  E5 J* A# m
  9. </body>" V# m' a* U& ~- A6 a- r9 @  O9 ~
复制代码

javascript

  1.     var v = document.getElementById("myVideo");1 w- B$ ]! t; {+ K2 D: E7 w; _
  2.     var c = document.getElementById("myCanvas");+ t$ ~6 l. L7 _7 y
  3.     // var c = document.createElement("canvas");
    : ^8 q1 d* B2 R2 H
  4.     var img = document.getElementById("videoImage");
    9 S: f1 ]2 U6 Q& b3 C
  5.     ctx = c.getContext('2d');% @# q3 k- j, K; @3 h
  6.     var dataUrl;* b6 Z7 W7 L, L! N
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    % m( ^: C4 a& V
  8.     //Connection opened
    / r4 P, k  u2 ~
  9.     socket.addEventListener('open', function (event) {
      g) G% S6 m7 H; [9 S1 V
  10.         // socket.send('Hello Server! im websockt');
    8 N- @0 a, _% c8 B( n9 I+ E
  11.     });9 V" }  M% C8 A
  12.     // Listen for messages! z' Q& ]+ i  f1 b
  13.     socket.addEventListener('message', function (event) {
    1 K% h6 _1 E: u6 ]
  14.         console.log('Message from server ', event.data);6 p$ `; @, g/ g+ }2 V: T
  15.         img.src = event.data;5 Y8 [) k8 h) H8 f  V$ Z
  16.     });- B! B' B( c8 V) e. W# T

  17. 8 l$ E2 K  ]) b3 i& u
  18.     function playVideo() {
    % ^& @* g3 m$ Y6 [, \% Z1 R
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    . c/ J' K) ]- |: S
  20.         dataUrl = c.toDataURL("image/png");
    " ~2 @" F' g, D
  21.         // img.src = dataUrl;* @9 u3 ?+ h+ \7 q
  22.         socket.send(dataUrl);9 I7 j6 X$ E2 {5 J6 o
  23.     }2 Q% P$ ~6 O: h% D3 J7 s5 z$ h2 h
  24.     var tick;
    : M) L3 Q& [+ M# B/ W7 ?
  25.     function aphla() {
    ' m- Z3 t% _& f! ~: E
  26.         tick = setInterval(function () {
    7 y9 e$ q" }, {( D0 c9 C
  27.             playVideo();5 F  }! ]' K; I! T& y
  28.         }, 1);
    / N' u7 v' h% ^0 e9 N7 j- |
  29.     }9 y' ]! Z$ Z. q8 [' {
  30.     function vdStop() {! [+ }# v0 F( `9 @" k
  31.         clearInterval(tick);) Q/ `5 D" N) e1 L
  32.     }
      }% D- i& g* H, \9 P
复制代码
用户页面/ ?" h# c* ]: ^3 B

html

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

javascript

  1. var img = document.getElementById("liveImg");3 A: h: O0 t8 l& J4 k+ e$ V% X
  2.     const socket = new WebSocket("ws://lm.com:9502");
    ( W6 W: j) u8 H# v6 a5 J+ E4 n3 A
  3.     //
    ( L0 q" ]+ h4 J* A  I
  4.     socket.addEventListener('open',function(){8 h' Y: t6 `: E" D) {
  5.      socket.send('Hello Server! Im live.html');+ s3 b( f( U- k; C, F# ]: @
  6.     });) F  D) H6 x3 ?% p8 t3 m
  7.      // Listen for messages9 i# a6 }' M$ k7 ~. \" ]* _$ e6 Q
  8.     socket.addEventListener('message', function (event) {
    ! r5 B' X3 f, I. T2 D" w
  9.         //图片地址
    & m1 c' [3 `6 r4 a4 I8 x
  10.         img.src = event.data;
    , B, d! a+ P* J4 M7 J% U
  11.     });. {* s  x: o6 Y( p2 k. n
复制代码

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


+ f! j+ e- [- ^+ |7 l& }8 [8 u- C( s, |) @: p
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-4-30 19:04 , Processed in 0.047523 second(s), 19 queries .

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