cncml手绘网

标题: PHP大道至简之Swoole伪直播功能 [打印本页]
作者: admin    时间: 2020-3-31 19:50
标题: PHP大道至简之Swoole伪直播功能
伪直播功能Websocket服务器
% f+ B& }) N  o) {. A
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websockt服务

代码如下

  1. error_reporting(-1);  
    1 {4 \8 z" d7 i& J1 h
  2. //创建socket服务
      B$ N8 z5 B1 @; u" W' ?
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);1 p; G; g& b  y3 S& L; d# t
  4. //监听WebSocket连接打开事件/ I: m3 f8 \* k% ]+ {+ I9 g" J
  5. $ws->on('open', function ($ws, $request) {9 N/ u4 ]3 B9 V
  6.      var_dump($request->fd, $request->get, $request->server);$ \5 L# o* W4 J0 ?
  7.      $ws->push($request->fd, "hello, welcome\n");
    8 J: @8 ~& G  @/ X: {) C
  8. });
    ; E6 ~+ \% u& g$ L1 L- w
  9.   Q8 h$ V7 a$ N9 d3 [' j
  10. //监听WebSocket消息事件) u& i1 }. G& ]- W4 Z0 @# H
  11. $ws->on('message', function ($ws, $frame) {7 e& T7 `! |" i; Z
  12.     //推送消息给所有用户1 B: g# d0 d( N# h3 K% y. S
  13.     foreach($ws->connections as $fd){( }, t: \0 D& S) U5 }# P
  14.         $ws->push($fd, $frame->data);
    ; x; y" \% W4 I$ _
  15.     }( ], f3 L; z# a! Z6 ~
  16. });3 o8 F7 v  |! [  t9 R

  17.   b/ `, S7 ]$ m
  18. //监听WebSocket连接关闭事件) C( B' v8 z, I5 c$ g
  19. $ws->on('close', function ($ws, $fd) {* ?, _/ ~6 e/ }
  20.     echo "client-{$fd} is closed\n";( @4 d2 b, J7 S! u, ~- \
  21. });9 Q" I6 i3 y) I3 i$ c6 E
  22. //启动服务
    ( m3 M& e% _: W
  23. $ws->start();
    ! W) k9 D: u( e

  24. 0 `! m$ L+ z) X$ B% L
复制代码

6 ~5 T, O/ M2 W4 ^8 {Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
/ M( K3 K9 W1 A# G& C' Y/ [

代码如下

  1. //连接服务器
    ( Y, R+ ~# u- V3 G% C# W) ~0 W
  2.     const socket = new WebSocket('ws://lm.com:9502');0 u( U2 N, Q% O7 L
  3.     //Connection opened
    * u" }  O5 y' n) Y4 `8 n
  4.     socket.addEventListener('open', function (event) {, I# g: U' Y& H4 [7 Y# T
  5.             //发送消息给服务器
    % I% t& J& G& K* K( M0 G7 z) s
  6.         socket.send('Hello Server! im websockt');
    . W6 [. j4 f8 `0 O' [
  7.     });9 |0 k4 w7 r2 o; x# j
  8.     // Listen for messages  q7 F/ w5 ^9 T7 `% n) V
  9.     socket.addEventListener('message', function (event) {
    1 `' U7 w: a$ r3 |  ?8 b  j2 p
  10.             //接收服务器返回信息
    ( s" n1 B* Q; ]# h$ T; j
  11.         console.log('Message from server ', event.data);
    . }6 T! r, k# S& D  Y& ~5 d/ [
  12.     });
    $ V6 g3 h, D0 C0 g% C/ p4 I
  13. + q1 \: }* P2 _6 t! W' M8 }
复制代码
伪直播主播页面
2 N7 [5 U7 {% j8 A8 L% G

html

  1. <body>1 j' q  x$ K3 b& B4 s
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    + c% l. y" _6 ^5 S& m/ T
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">( r& a3 `3 J0 p; ^: O
  4.         画布
    : {' x) M' Z* B( m! V
  5.     </canvas>
    - I/ B) {" U9 W4 i  n" k
  6.     <img src="" id="videoImage" width="350" height="700">
    " d" n3 I7 V# R$ R% @8 r
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    4 F* q. ~" }6 D8 Q) ^
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    6 S9 @$ o1 A! K
  9. </body>
    0 y5 f# j6 X6 ]9 e+ k: t; X. u
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    3 e2 r$ \4 `% T, T/ x. G! [( h
  2.     var c = document.getElementById("myCanvas");
    3 N/ t5 K! L: i/ i  V! m8 H
  3.     // var c = document.createElement("canvas");" f) I& m8 d: n( l& F( C0 m; k6 }
  4.     var img = document.getElementById("videoImage");
    8 {; f. {- R- D7 n& b4 L; ^) J
  5.     ctx = c.getContext('2d');- D7 B6 I5 S$ b  P) K
  6.     var dataUrl;3 v6 O1 [; L: {% D$ I
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    ! g: a( J# D/ W4 F
  8.     //Connection opened
    / `) n' ]0 Z& [
  9.     socket.addEventListener('open', function (event) {
    + e/ P" M# f& N, p* n
  10.         // socket.send('Hello Server! im websockt');2 e, E6 Y* |& e& l' c0 ]6 j/ E
  11.     });. k* O- l% E; I4 u+ n/ s4 s
  12.     // Listen for messages( t3 k$ P  g, r, M+ V/ G4 n
  13.     socket.addEventListener('message', function (event) {2 @! e+ b* X! o( {+ E1 o* f  B
  14.         console.log('Message from server ', event.data);) D" F% o/ T3 ?' _  r0 g
  15.         img.src = event.data;
    % _9 ~( _- `% x0 d. K8 W
  16.     });# O% F# M6 c# ^

  17. 2 y) H6 }" g+ d' Y
  18.     function playVideo() {
    6 g8 K& F# L% K$ _$ x  E
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    ' z  {5 L$ }+ u( m# I% A
  20.         dataUrl = c.toDataURL("image/png");: |3 Z7 [" ?6 d& S
  21.         // img.src = dataUrl;8 K" B: G) o( R" b
  22.         socket.send(dataUrl);
    * H# y7 J) B" V+ w; V
  23.     }3 G% R; u+ H0 G4 g# G0 G
  24.     var tick;
    - }. X7 ^) ]( ]$ }
  25.     function aphla() {
    , K" E+ r7 g- t8 D1 {3 q
  26.         tick = setInterval(function () {
    - k1 G- q3 ^: p' `- V: C$ H1 V7 t
  27.             playVideo();
    4 n! x  j$ Q/ A9 l& J4 D8 j9 W  F2 a
  28.         }, 1);* p2 J$ m7 c* O8 Q! L- @+ |' f
  29.     }9 Z2 {) z5 Z- P: o3 b, }
  30.     function vdStop() {+ o) c# H4 Y. @! J
  31.         clearInterval(tick);; L0 @8 `2 C& ?: n- q% ]' T
  32.     }2 E6 p: H# [* o* i4 {7 d
复制代码
用户页面
- N0 t2 ?) I: L

html

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

javascript

  1. var img = document.getElementById("liveImg");  n  Q* G; G9 _+ W) ~# w5 D+ C
  2.     const socket = new WebSocket("ws://lm.com:9502");2 g4 ~! Y2 `; F5 W/ w& I9 b
  3.     //
    * y! A3 R( n8 n, x$ v, ^4 g) f
  4.     socket.addEventListener('open',function(){
      s0 b0 c" C# N$ [  u6 F
  5.      socket.send('Hello Server! Im live.html');3 z( Y4 [( R" N1 G+ f9 ^& G. [
  6.     });& H7 b  n3 s$ ?: w- |
  7.      // Listen for messages6 V0 j) z# g* ]; w
  8.     socket.addEventListener('message', function (event) {
      @$ O2 ~9 {6 \0 o
  9.         //图片地址
    $ t: g9 z6 W, s
  10.         img.src = event.data;" Z6 b# e! m+ T8 ^
  11.     });' }! x( Z0 D% q5 D0 d4 d2 O
复制代码

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

' q" H. F% Y0 \& q' |( P
. M' I# {& J8 x/ J( A




欢迎光临 cncml手绘网 (http://cncml.com/) Powered by Discuz! X3.2