管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
伪直播功能Websocket服务器* ]. b0 t% m# a& L
- socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码 创建websockt服务代码如下 - error_reporting(-1); 1 f C) m0 ^, c7 B6 S7 ^. S1 Z0 t# ^
- //创建socket服务
% x3 R) e7 r" y! ^4 J, s - $ws = new swoole_websocket_server("0.0.0.0", 9502);4 O4 |) d/ N, ]' T" x
- //监听WebSocket连接打开事件 h+ m* x3 d- z" R: K" K
- $ws->on('open', function ($ws, $request) {7 p. o" G8 x$ ?* g
- var_dump($request->fd, $request->get, $request->server);
& s' t$ T6 a% ~8 `% F - $ws->push($request->fd, "hello, welcome\n");
& Y5 W4 h3 P, N) S+ M - });
/ h0 d+ k! p) j* F# E2 B
( @' P4 Z6 p/ ~8 L- //监听WebSocket消息事件7 U% Y$ S, I$ g, F
- $ws->on('message', function ($ws, $frame) {
m, A3 y) y& \- r Y0 l$ i# l - //推送消息给所有用户
; Q" n o: L% @. M - foreach($ws->connections as $fd){
# m1 o8 {" A5 S0 Z$ m - $ws->push($fd, $frame->data);
$ Z3 d6 c, S2 \3 s; ]8 a/ v' Y7 g9 J - }
& {2 q. k4 S( t* }/ U; N2 k - });8 B% d; f- D0 r2 q" c' q9 {5 `! H
- 7 E" n% l; t6 S; H
- //监听WebSocket连接关闭事件
9 R- G# F- V* x9 _- J q9 L - $ws->on('close', function ($ws, $fd) {
9 ?) {$ [6 | d0 G5 n - echo "client-{$fd} is closed\n";+ _: l- }* ]- L% Q4 o; z( p
- });
1 M5 W$ T% _: K3 s8 ]& D - //启动服务" p, I8 F, Q' S; K7 K
- $ws->start();0 l7 A, p& r. j9 y5 _7 |' o; c
5 ~6 n6 N2 g/ U. V
复制代码 1 C0 t- R% R% J" P" _
Websocket客户端- socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码 创建websocket客户端6 m4 i X/ j: z4 Q9 F7 l6 Y1 B {* v
代码如下 - //连接服务器( r& x# [9 t/ P( x+ `% F0 d
- const socket = new WebSocket('ws://lm.com:9502');
5 k) J4 `9 y# E# O4 V( l - //Connection opened- W* Q y! Z9 _/ `' i7 W/ L9 x
- socket.addEventListener('open', function (event) {5 p4 B6 z( c c Q
- //发送消息给服务器& j1 ^$ T; T( q- ?# g
- socket.send('Hello Server! im websockt');% ^# u4 F7 M% A4 |: I
- });7 L; r, w8 V0 X/ o' b
- // Listen for messages& F3 A4 M8 _! e, S* H
- socket.addEventListener('message', function (event) {
" Z9 X2 f' Z3 H) g% P$ R6 Y - //接收服务器返回信息9 y2 e0 n' L: V: T. Y1 z
- console.log('Message from server ', event.data);# n9 n/ U6 A$ g h% Q
- });! I, y- ]0 I1 i1 S9 P1 {
+ x o* r. Q$ v( M; E6 h6 F
复制代码 伪直播主播页面
, n( K5 c$ @- ~" Mhtml - <body>7 N) g' G! z5 ]! a: v, o
- <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video># m$ f1 ?8 f y: r2 Q
- <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
* g/ f3 S' X# P) d, D2 {4 j% } - 画布
3 g( B# {* N2 t8 q y# z - </canvas>! {0 F8 z/ {- [8 W1 n
- <img src="" id="videoImage" width="350" height="700">" F5 ~: Q! e) X' @4 z0 u0 H
- <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
* L9 s, g. e# O _- A - <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>- H9 q( E% h4 v# u
- </body>
& `! Z, C. C: Z. _& L$ H
复制代码javascript - var v = document.getElementById("myVideo");: G0 L0 T" t% ^% H9 n9 V
- var c = document.getElementById("myCanvas");
8 D( \# q6 N& q: A) E, K - // var c = document.createElement("canvas");
- U% \4 Y( R( d7 f - var img = document.getElementById("videoImage");% F4 b+ m2 p1 k9 }
- ctx = c.getContext('2d');! E7 t- r a4 Y# S; x; D1 w
- var dataUrl;, n# c* w. q ?3 e1 K
- const socket = new WebSocket('ws://xxxx.com:9502');
. p% u) o9 R( Q! I6 V( H2 P1 v - //Connection opened
6 L! O5 t% z3 B2 O1 q2 K3 g - socket.addEventListener('open', function (event) {
5 W: U- @5 i: n% C5 |% j( L+ \ - // socket.send('Hello Server! im websockt');; z6 ^) a, B: _/ V# Q. d7 b8 U6 m
- });( M l7 @/ p" {0 Z v
- // Listen for messages
) p' H* L' t2 V+ Q* p# D) z: Y - socket.addEventListener('message', function (event) {3 d; b5 ^1 p1 _% l/ A H `
- console.log('Message from server ', event.data);
6 S! X+ O7 I: L+ V, O - img.src = event.data;8 Y0 t; @( K- p F! ?
- });
3 I6 M- X( o! w: U) P [ - $ N% k) S6 @* R) S M8 d$ d
- function playVideo() {8 [: e5 ]) D. p/ M' o% C3 }7 u
- ctx.drawImage(v, 0, 0, 350, 700);) z& e; D/ p* q; {4 y, }: I
- dataUrl = c.toDataURL("image/png");
/ K; o7 _8 h/ T. O# a - // img.src = dataUrl;
- F7 z$ y+ C8 U3 Q, U h. c - socket.send(dataUrl);; x r ^4 P0 Q) B E
- }
7 P R5 m' C, T( _% k - var tick;
& Y( `0 u) ]" o m+ Y B - function aphla() {8 I4 M0 W% ~4 C, z: S
- tick = setInterval(function () {% S( H7 Q9 v; z8 D6 R
- playVideo();
+ P; \1 e5 x2 c1 a: M) ]) |. l - }, 1);
4 S5 Q. Z9 J; ~" f4 l8 F - }
% v6 M; I% O5 {( x5 U @ - function vdStop() {- V! }2 n" m; I" @
- clearInterval(tick);
7 Q1 {% M+ s5 e; {' r1 P - }5 p; z B# Y" `5 N" X
复制代码 用户页面' F5 T% [6 C) y0 }* e) w; U4 j) e
html - <img src="" id="liveImg">
复制代码javascript - var img = document.getElementById("liveImg");
# s( x# }0 ]2 ?! C - const socket = new WebSocket("ws://lm.com:9502");( Q( q% M- n' ^. k6 t
- //' P5 K% f. ]; p
- socket.addEventListener('open',function(){9 i2 M& c' m4 O/ r
- socket.send('Hello Server! Im live.html');" ~+ G) D8 I3 ?% [$ D
- });8 X6 j9 |( c( C% C& @/ i% J
- // Listen for messages
4 y" \. _" L$ X1 T - socket.addEventListener('message', function (event) {( U* E% A( L8 ]1 d) y7 P
- //图片地址. _0 X9 I' N) m+ }
- img.src = event.data;8 \# [1 X. U! R; d5 ~4 A6 x! z2 [
- });
1 F; i* m) O$ _ g- l, _( Y
复制代码真直播应是通过rtmp推流实现的,本次功能仅作为swoole框架的一个案例用法 ; r# E7 d. h2 T) T) p+ ^ W5 P U
5 J5 p( w) k$ ~' ~+ W |
|