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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

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

代码如下

  1. error_reporting(-1);  " Q$ P, g8 f  W  D) Y! Y, J( Z
  2. //创建socket服务
    2 v) o7 `* u6 a7 ]
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);- x, Y" w7 F/ c$ m5 I
  4. //监听WebSocket连接打开事件
    ) K. o! k+ a. p: G4 t# K1 l# y5 `! Z
  5. $ws->on('open', function ($ws, $request) {! ?4 e! o* j8 j  F1 E5 @
  6.      var_dump($request->fd, $request->get, $request->server);
    ! S4 F6 p3 D" e3 I
  7.      $ws->push($request->fd, "hello, welcome\n");; s# d, x+ t9 s" g2 a1 b
  8. });5 j9 [8 P" w! f- f! \

  9. # u" T: {# w; M0 I/ o; I
  10. //监听WebSocket消息事件( J9 J2 F4 T) Y# E/ T# D' M
  11. $ws->on('message', function ($ws, $frame) {
    3 \# I9 {; M2 j6 L+ q
  12.     //推送消息给所有用户; x; C! w! A# l4 X& H
  13.     foreach($ws->connections as $fd){' s. v: X! D+ N5 d1 L- d
  14.         $ws->push($fd, $frame->data);
    ) W6 I* H  J3 h7 E( h- Y% [2 \
  15.     }4 V3 W! r2 b4 g2 `+ B5 e. Z
  16. });. W5 Z: F, O% Y9 l& n& X
  17. 2 B; L+ b9 N# w+ t
  18. //监听WebSocket连接关闭事件/ j, _# c" p( E
  19. $ws->on('close', function ($ws, $fd) {
    / g8 W! A) I5 y: U
  20.     echo "client-{$fd} is closed\n";
    7 e5 ?$ k% V' M9 F
  21. });
      r0 d# p$ N  c$ G) j/ F- l1 s6 w! p
  22. //启动服务
    2 O! p( F0 O( q0 a' Y% ^, r
  23. $ws->start();
    % j5 h9 r1 w* @5 @9 w, F5 Q
  24. / Z0 L& V( {6 A; q
复制代码
: s  e7 l/ w  d& A" [& n; S
Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
6 P+ u" w9 k0 m3 B

代码如下

  1. //连接服务器
    7 M9 |' i" }% q9 p
  2.     const socket = new WebSocket('ws://lm.com:9502');* r2 t; R8 N  ^2 Z. B& _8 M
  3.     //Connection opened  E1 x# @! z6 ]0 |
  4.     socket.addEventListener('open', function (event) {
    9 T7 ?) R' u( c" n: F& Z/ X
  5.             //发送消息给服务器* T3 n. y" Z4 Y+ L+ A1 {
  6.         socket.send('Hello Server! im websockt');9 i2 Y% D8 `' q2 j9 x
  7.     });) I6 d; @7 q# T0 {+ [  B8 u
  8.     // Listen for messages5 w0 f3 ^+ x) D& C# `, T
  9.     socket.addEventListener('message', function (event) {, [1 L7 t+ S# B% g
  10.             //接收服务器返回信息
    7 _# Q4 D7 P( e  U
  11.         console.log('Message from server ', event.data);
    ; h5 q! z( u+ z8 H5 }2 z' Q5 h# h
  12.     });, u. P, {$ r3 z( X

  13. 1 X/ g+ \4 X; \8 z6 g: t! V) n: \
复制代码
伪直播主播页面- C0 v' u. V$ V/ l# g: \( R5 g3 N, v

html

  1. <body># ~% Q1 C0 [" L$ a$ P
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>& {& v% k4 R7 z* L1 y
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    ' @, q6 W/ N  l9 F6 c# q
  4.         画布
    2 Y' c) P5 x0 E6 t) @0 l2 ^  G
  5.     </canvas>
    6 }; c6 _' f  K+ a
  6.     <img src="" id="videoImage" width="350" height="700">- w" J/ U7 `. Y% @
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    4 {- h$ E# g+ x4 K. }1 i, r
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
    7 ?6 \+ a- _+ W  Q
  9. </body>
    0 m. u6 M- L! Z* I5 g
复制代码

javascript

  1.     var v = document.getElementById("myVideo");) M$ t. t% e( C, A- L
  2.     var c = document.getElementById("myCanvas");1 i3 m7 W$ d+ {. r/ @
  3.     // var c = document.createElement("canvas");1 Y5 W! p. J. C9 ?; q2 P3 N2 \: w
  4.     var img = document.getElementById("videoImage");
    # k' C6 i+ ^- w' w+ S
  5.     ctx = c.getContext('2d');' v% g3 g/ Y1 n" z: e3 ?6 o" y
  6.     var dataUrl;
    $ _5 m# d" _/ t0 v0 V( |" L
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    & X3 u# d( Z$ D+ ~
  8.     //Connection opened
    ( q' e# J/ S' A' w+ k& j' i
  9.     socket.addEventListener('open', function (event) {2 w0 p0 w6 S' X5 y# d  o
  10.         // socket.send('Hello Server! im websockt');9 Z  k' O/ Q( _
  11.     });
    8 R& ]) `9 h& H1 U, }) U$ z- [
  12.     // Listen for messages, Y+ t! _- B; d. G4 m
  13.     socket.addEventListener('message', function (event) {5 W  ^9 n: }$ ~, f6 `' ~7 F
  14.         console.log('Message from server ', event.data);
    ) h1 B/ M7 n/ m$ j$ m* i
  15.         img.src = event.data;; f# _9 r0 E) Z
  16.     });8 S! J, R6 S7 g5 `
  17. $ I, E) [( w/ M3 M
  18.     function playVideo() {
    ) J; W% v* }8 D8 ~, |* y2 y7 X* z8 v
  19.         ctx.drawImage(v, 0, 0, 350, 700);" d4 K: ?- h( Q% H5 Y( t
  20.         dataUrl = c.toDataURL("image/png");
    % o. h5 h% Y' Q2 @! v& W9 z
  21.         // img.src = dataUrl;! H, c5 L, y5 d" a; U/ O/ z
  22.         socket.send(dataUrl);  q' ]# \% I% o  e; f+ M' H
  23.     }: U4 \6 X  @* }7 u
  24.     var tick;" ~  ?2 [7 l- p( x0 I
  25.     function aphla() {
    * J0 P; z" F+ A
  26.         tick = setInterval(function () {
    : q* x9 l4 j9 u' e) {' g0 {
  27.             playVideo();
    4 o& m$ i4 i/ u& {8 i/ b& K6 G# I
  28.         }, 1);
    - H2 b) f5 k7 ^; j& Q2 _  M- l! F0 t
  29.     }- E! J# s2 O* c( ?$ ]9 o) t( R' N
  30.     function vdStop() {
    ' O* r+ P  H& x& c# X6 S$ c
  31.         clearInterval(tick);- T# G1 J: E7 q4 g; \" [& O
  32.     }2 J1 l. {, k2 W# {! ^0 e6 k7 f
复制代码
用户页面
) _+ ]1 V' \/ Y0 V* @% n

html

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

javascript

  1. var img = document.getElementById("liveImg");
    # v; I0 ^& ?* x& d4 H, d0 d
  2.     const socket = new WebSocket("ws://lm.com:9502");; Q. O% e& d5 s7 [& @2 J: z
  3.     //3 m# L* ~6 j; V8 a
  4.     socket.addEventListener('open',function(){
    . c0 q4 l" I1 l# W5 \
  5.      socket.send('Hello Server! Im live.html');
    : G! N# n: Q. K! D! v9 l7 [
  6.     });
    3 f1 K$ b5 E0 w2 q' t( F
  7.      // Listen for messages6 c  {  q% f1 {: W4 B2 |! r& `
  8.     socket.addEventListener('message', function (event) {
    * d9 M" l9 m  o% b% i5 n
  9.         //图片地址9 P' r; g; Z4 h/ q3 d; }" A  H* D
  10.         img.src = event.data;
    # v2 D+ _1 |) q1 h1 Y* ^/ B
  11.     });; e) p4 t3 p; ^# i4 Y8 @
复制代码

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

7 x' ~  c3 s  b) M, P5 x

- K  {% T$ `# x! G- Z
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-6-4 10:43 , Processed in 0.064834 second(s), 21 queries .

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