管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
伪直播功能Websocket服务器
1 {" d) `: _% Z5 d; k5 N0 k" a- socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码 创建websockt服务代码如下 - error_reporting(-1); 1 ]! m8 x3 _) S- H- V
- //创建socket服务
6 G$ U' M' j4 E+ ] - $ws = new swoole_websocket_server("0.0.0.0", 9502);2 V$ L/ v1 I4 d+ Y" x0 n9 F: y
- //监听WebSocket连接打开事件) M8 {1 e; v! Y6 ^5 H, d3 y9 q5 f
- $ws->on('open', function ($ws, $request) {# L# V; D# W/ Q+ M4 a* }6 c
- var_dump($request->fd, $request->get, $request->server);9 K6 j3 h! B. l" ~
- $ws->push($request->fd, "hello, welcome\n");
( _% P& U) t ^# g - });
) ~3 E5 [: z1 u$ g6 j - ( S, l' W5 p, b( W0 {7 `
- //监听WebSocket消息事件
( F! ?% v, o% P5 b) H$ z - $ws->on('message', function ($ws, $frame) {1 R0 j1 i3 |5 g/ i
- //推送消息给所有用户4 g/ A9 X# Q. a
- foreach($ws->connections as $fd){
% f* f, b$ Q. x - $ws->push($fd, $frame->data);( [& |) Z" \: h
- }& i$ ^7 @' k# n$ F
- });
}8 W. _% p! z5 J2 ^' S4 v
& f& F3 y: h n" N5 E4 f3 Q. a- //监听WebSocket连接关闭事件
- r: R5 _1 L$ e6 r+ Z. F! o. J: i - $ws->on('close', function ($ws, $fd) {
4 V! V# o" w* l, x - echo "client-{$fd} is closed\n";8 y& b- h, H. i4 l3 O' N0 {
- });: u. D! l6 i/ h' }1 r9 ? i
- //启动服务* m7 V" }6 E. h/ n$ I
- $ws->start();1 ^" ^7 B) `/ z
- 3 l% s! u; n( f- m, v( D! E B
复制代码
}. |& O* [/ c# g; Q" MWebsocket客户端- socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码 创建websocket客户端
5 [2 \- j8 l% n, D& b代码如下 - //连接服务器
+ F8 O' L! K2 |0 } - const socket = new WebSocket('ws://lm.com:9502');1 B1 N; q- s4 L- ]- z/ ^5 r/ H
- //Connection opened5 A4 T+ j3 ^" L' O. H
- socket.addEventListener('open', function (event) {
6 N G0 p/ a- ~ K) ?7 g2 N - //发送消息给服务器
2 @, T5 s, z* @* a - socket.send('Hello Server! im websockt');7 s* s" K& V+ v' Y% ^7 Y: @, r- V
- });( f, Y1 p! g+ C P
- // Listen for messages
9 Z: A0 e% l; ~6 W" ~ - socket.addEventListener('message', function (event) {
& ^$ V/ B) {- Z( O- Y# P' m( `- J - //接收服务器返回信息, a6 b; i6 n: B- b! b, g) A
- console.log('Message from server ', event.data);
1 Q5 }) h- _8 N! n7 D' @$ i - });; { n; r& r* t) y
- , H. M, I0 r: J) o6 I
复制代码 伪直播主播页面& _- _, B0 m5 K# o2 v9 o& O2 E
html - <body>
% E* m" e# z H$ j1 {; D& H - <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
- t; M m5 z, h: c% f5 c8 m1 L; q9 s - <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">8 a4 F6 D" T* ^) V5 F
- 画布5 {' F. F* d/ l/ U- c8 j
- </canvas>: M8 D2 x |( Y
- <img src="" id="videoImage" width="350" height="700">" [, @9 ]6 h1 Y
- <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
% P0 c& A1 J6 f* I- t - <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>- A' R4 Q6 t$ B: Q6 T) ?1 R
- </body>
1 E Y$ k: g8 @# ?6 U2 u& d5 C- S3 C
复制代码javascript - var v = document.getElementById("myVideo");
4 `, W. B0 S8 ]% \% Z3 V; \ - var c = document.getElementById("myCanvas");
u' A0 a9 n4 Z3 g - // var c = document.createElement("canvas");1 {4 Y" F$ P5 D8 L5 q7 @6 |. c
- var img = document.getElementById("videoImage");6 ?/ `: f4 ~5 Y/ W: H/ S
- ctx = c.getContext('2d');
; y2 z7 M- Z7 v$ ^( X: @ - var dataUrl;
" K2 S x) b" ?, T4 e! h' U b - const socket = new WebSocket('ws://xxxx.com:9502');
9 r) `" z _ J4 g+ v& H+ H( m - //Connection opened
4 u' E' `1 U4 g( R3 Z8 m, W - socket.addEventListener('open', function (event) {
2 D. N( f( Z9 k* ?# q0 k( T [ - // socket.send('Hello Server! im websockt');
/ {$ B+ N$ G) T/ f - });
0 B, [' l, q: ~- A, A8 k - // Listen for messages
5 y5 \; g9 k. Y - socket.addEventListener('message', function (event) {9 C% Q" z* @) H0 P2 U. Z7 ]6 {6 g
- console.log('Message from server ', event.data);
: k; K* l& X' @1 G6 O; h, I - img.src = event.data;/ K9 t% @* u- R9 M0 ]
- });& E* M2 K2 h* r+ D0 Q
- : ^" L, l8 _4 B" Q* S( n
- function playVideo() {
9 A$ C, P1 u1 B t/ s# ~! [/ A: k - ctx.drawImage(v, 0, 0, 350, 700);: t- ?2 }% d4 N2 V
- dataUrl = c.toDataURL("image/png");3 d6 `$ \0 ~# d6 ~5 @& Z) p
- // img.src = dataUrl;: h! O3 ?2 ^ y3 k" E6 J F
- socket.send(dataUrl);: b r% B" L/ T, ^( L$ S3 p
- }
3 W2 i, \9 B9 r0 R - var tick;
# `( `1 v6 f7 t; Q - function aphla() {
6 q: V9 z. C# _; \( e' C - tick = setInterval(function () {
9 F. F2 v% V7 r) J: K - playVideo();+ q7 U: R* N& z
- }, 1);% j& j- N. w# [' c# w/ [( i; c
- }9 p1 ]2 ]5 f# j( ?
- function vdStop() {! ^ ^; i. d2 }
- clearInterval(tick);
7 u, Y* D& ~9 j+ }7 K - }, \: ?2 |, k8 L- {+ w
复制代码 用户页面
4 _- G$ y! x4 m2 ]; s8 yhtml - <img src="" id="liveImg">
复制代码javascript - var img = document.getElementById("liveImg");$ y q/ X$ i* e. t T* A
- const socket = new WebSocket("ws://lm.com:9502");
& E9 h/ n) R8 Y4 Q% o# e! a - //3 {9 u: q3 ?3 C
- socket.addEventListener('open',function(){( ~! n# ^+ ^1 i4 p' l2 K
- socket.send('Hello Server! Im live.html');
) J; ~! B7 Q! e, t# x$ p - });7 b1 m( {3 u% H4 ?3 z
- // Listen for messages* V, Y; h3 h( e) X+ Q, A
- socket.addEventListener('message', function (event) {
( T3 u6 {: X. p6 Y. Y9 ^" D2 S1 D- V - //图片地址" t' \8 F# f. _9 F F. N
- img.src = event.data;4 A5 w4 ?: j* J& Y$ P/ n
- });# Z ]6 i4 I- G- n
复制代码真直播应是通过rtmp推流实现的,本次功能仅作为swoole框架的一个案例用法
/ \; T; a T& N+ J4 L) Y% I$ Q8 h4 C m: g3 B0 L' o9 h
|
|