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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  
    / e/ D9 P, k  c9 K
  2. //创建socket服务$ s: D, t4 B$ \/ T3 S# O3 L  Q
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);  n8 @$ d. K" X' O
  4. //监听WebSocket连接打开事件
    4 J2 o& ^# c3 ~+ n; z9 [
  5. $ws->on('open', function ($ws, $request) {  D! d7 X$ N# l
  6.      var_dump($request->fd, $request->get, $request->server);
    , B# P% Y+ U2 E( f. E" d
  7.      $ws->push($request->fd, "hello, welcome\n");
    ( t+ b2 r! F1 A( K& Z, R# D
  8. });* t+ X1 U5 u( h& v% O
  9. $ q0 X) N. v7 ^; U. `
  10. //监听WebSocket消息事件! _0 }% c$ ]! ]' K9 w( }
  11. $ws->on('message', function ($ws, $frame) {  T# u& Y9 Y) _7 ~5 @1 x
  12.     //推送消息给所有用户# E7 ^: p& b5 L5 o8 V# K$ Q  T
  13.     foreach($ws->connections as $fd){
    ) F# W# E0 a+ Y
  14.         $ws->push($fd, $frame->data);
    , k3 {) v( n8 O- v+ m
  15.     }
    " ~- |- y0 W* l; N# O+ {
  16. });+ }. h% j, C  e  X- h
  17. & l, Y7 Q1 b2 }6 X  J2 M0 w  |) t* E$ v
  18. //监听WebSocket连接关闭事件
    . t8 `8 U6 M5 u  B# Y
  19. $ws->on('close', function ($ws, $fd) {/ R7 z6 o" d" q& L& t
  20.     echo "client-{$fd} is closed\n";
    0 Y9 {3 N4 l4 f: W; ~
  21. });
    8 t! w1 |- `( V. t( j) A: K% U
  22. //启动服务
    8 X8 {! q$ d0 A
  23. $ws->start();
      s+ B) Q( j) n3 g3 D# p1 A. F
  24. 7 l+ y+ p+ `) u! k3 x& i
复制代码
- i1 b/ I9 {' y
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端' O& n$ B, ^; t$ W# e

代码如下

  1. //连接服务器5 O" o) ]% F/ @* ?7 \% T
  2.     const socket = new WebSocket('ws://lm.com:9502');+ P& M2 n0 H1 C2 u( I9 h/ b
  3.     //Connection opened
    0 q7 ?# ^0 Q0 b' `
  4.     socket.addEventListener('open', function (event) {
    , O- `  m1 v+ ?/ o( C
  5.             //发送消息给服务器
    3 A; p/ J6 }  J' m# S  j: Z. N, q
  6.         socket.send('Hello Server! im websockt');
    * ], H4 r% `& q) k# |- A
  7.     });
    " i- u6 k  \; f- \( e1 z" X
  8.     // Listen for messages
    2 q; y+ |9 a  b$ w% r
  9.     socket.addEventListener('message', function (event) {
    7 _6 Q6 r, @) D7 i
  10.             //接收服务器返回信息
    ; P9 Q: ]% w: L" i* F, X
  11.         console.log('Message from server ', event.data);
    5 \( T5 _6 \& b- l$ B
  12.     });
    5 `3 N! n. K  d  d+ G/ D, k# r
  13. $ D# n  y5 k: e% Z! ?2 r& \
复制代码
伪直播主播页面
9 a4 k/ r" q& s5 K4 j

html

  1. <body>
    ( L( w; A, [, I$ J) x# i/ L
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
    2 @) ^. r% D; x1 Y, E- }
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">0 x" ~( }- b. I/ t
  4.         画布' r3 H  @. e1 B' _4 x4 l
  5.     </canvas>/ Q! h0 q7 Z9 W8 X% z# e  C5 n* k
  6.     <img src="" id="videoImage" width="350" height="700">
    : b! L) g- T3 j
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    ( }. @  S  \# h, u2 @
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>: @+ L6 l. x1 s. P# \) ~
  9. </body>- |! a' t) K7 T: i$ A/ ^; U
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
    * U+ K' D. Z; a# o
  2.     var c = document.getElementById("myCanvas");
    , m% \: h& j, d& A2 E  q2 K
  3.     // var c = document.createElement("canvas");; [7 O( o) A, O  M$ u/ {/ U
  4.     var img = document.getElementById("videoImage");5 ?' P$ M, [1 {) a% A* O
  5.     ctx = c.getContext('2d');3 d# x+ P* j3 i( d, s3 E) J4 Q' }
  6.     var dataUrl;
    7 G4 w8 b, h) _- H% Q
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    / C& `3 M% ], x9 b2 P
  8.     //Connection opened8 `5 n2 G9 u% u1 A3 w
  9.     socket.addEventListener('open', function (event) {; G# R& y$ k+ H! Q2 |
  10.         // socket.send('Hello Server! im websockt');+ k) e# E1 r  U& c- Y+ y- [( S
  11.     });& j& r8 Z* v8 ?5 b6 p4 c
  12.     // Listen for messages; \8 n) J! f1 V3 y# A
  13.     socket.addEventListener('message', function (event) {
    3 ?0 j5 ]* _, ]2 U2 ^
  14.         console.log('Message from server ', event.data);) w2 W: T, c& S1 U4 t% p
  15.         img.src = event.data;
    - ]- ^: U7 y5 I% z+ _4 ~
  16.     });& P/ X8 J/ L' T( o0 {  Z

  17. . @* J/ h  J; m$ w) P
  18.     function playVideo() {! q  k, M5 k5 b. p0 n( w  L
  19.         ctx.drawImage(v, 0, 0, 350, 700);9 U3 \# @! u8 H1 J3 k0 I2 G& c" S
  20.         dataUrl = c.toDataURL("image/png");
    + `, t& Y. Q+ b& N( S7 A1 o
  21.         // img.src = dataUrl;; B1 y% R" `2 _  k
  22.         socket.send(dataUrl);
    6 N! H2 ~# ^# @# |
  23.     }% X) n& o# ?- f4 d# o1 i* G+ V
  24.     var tick;
    7 r- o4 }. Y, ?( z
  25.     function aphla() {
    / T- d# U8 Z& i" o
  26.         tick = setInterval(function () {9 m# z* C  q: @" i" Y
  27.             playVideo();
    4 F7 S% K( s; Q
  28.         }, 1);& n- J3 ~! S. v6 z4 b3 J
  29.     }
    5 _& u  P4 j/ `
  30.     function vdStop() {* d9 Y; v" R' R2 S
  31.         clearInterval(tick);
    % _, [& T  F9 Q+ R" T) a8 i) c. O7 I9 n
  32.     }
    3 ?- J, Y4 b. n' }$ X8 U
复制代码
用户页面
5 N" m8 ^7 n3 b

html

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

javascript

  1. var img = document.getElementById("liveImg");
    / V( U1 ~6 b  `7 b
  2.     const socket = new WebSocket("ws://lm.com:9502");
    9 j1 G0 n/ t% h: J
  3.     //8 S: b0 c% b- m/ Z5 G% B7 s
  4.     socket.addEventListener('open',function(){. m) \: |$ T7 h# _2 M
  5.      socket.send('Hello Server! Im live.html');
    0 m0 _- t, I1 L! S  I4 ]( j
  6.     });1 K, z9 k% K, u0 R
  7.      // Listen for messages/ Y# B$ W$ _3 E2 X
  8.     socket.addEventListener('message', function (event) {
    : J& {& |8 @$ N0 f( q
  9.         //图片地址
    % H1 n  F. D) k0 ~0 ]
  10.         img.src = event.data;. S2 L! _" N! }* D* O  G
  11.     });# d) d: y  T/ u9 I5 `
复制代码

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

0 o- y; T3 _4 `* E: j% C

; O% R7 O' E# j7 K( r4 ^+ K# ~
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2024-6-18 20:45 , Processed in 0.113405 second(s), 20 queries .

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