管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
伪直播功能Websocket服务器
" T3 {2 `1 E: i; x6 v7 l- socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码 创建websockt服务代码如下 - error_reporting(-1); " Q$ P, g8 f W D) Y! Y, J( Z
- //创建socket服务
2 v) o7 `* u6 a7 ] - $ws = new swoole_websocket_server("0.0.0.0", 9502);- x, Y" w7 F/ c$ m5 I
- //监听WebSocket连接打开事件
) K. o! k+ a. p: G4 t# K1 l# y5 `! Z - $ws->on('open', function ($ws, $request) {! ?4 e! o* j8 j F1 E5 @
- var_dump($request->fd, $request->get, $request->server);
! S4 F6 p3 D" e3 I - $ws->push($request->fd, "hello, welcome\n");; s# d, x+ t9 s" g2 a1 b
- });5 j9 [8 P" w! f- f! \
# u" T: {# w; M0 I/ o; I- //监听WebSocket消息事件( J9 J2 F4 T) Y# E/ T# D' M
- $ws->on('message', function ($ws, $frame) {
3 \# I9 {; M2 j6 L+ q - //推送消息给所有用户; x; C! w! A# l4 X& H
- foreach($ws->connections as $fd){' s. v: X! D+ N5 d1 L- d
- $ws->push($fd, $frame->data);
) W6 I* H J3 h7 E( h- Y% [2 \ - }4 V3 W! r2 b4 g2 `+ B5 e. Z
- });. W5 Z: F, O% Y9 l& n& X
- 2 B; L+ b9 N# w+ t
- //监听WebSocket连接关闭事件/ j, _# c" p( E
- $ws->on('close', function ($ws, $fd) {
/ g8 W! A) I5 y: U - echo "client-{$fd} is closed\n";
7 e5 ?$ k% V' M9 F - });
r0 d# p$ N c$ G) j/ F- l1 s6 w! p - //启动服务
2 O! p( F0 O( q0 a' Y% ^, r - $ws->start();
% j5 h9 r1 w* @5 @9 w, F5 Q - / Z0 L& V( {6 A; q
复制代码 : s e7 l/ w d& A" [& n; S
Websocket客户端- socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码 创建websocket客户端
6 P+ u" w9 k0 m3 B代码如下 - //连接服务器
7 M9 |' i" }% q9 p - const socket = new WebSocket('ws://lm.com:9502');* r2 t; R8 N ^2 Z. B& _8 M
- //Connection opened E1 x# @! z6 ]0 |
- socket.addEventListener('open', function (event) {
9 T7 ?) R' u( c" n: F& Z/ X - //发送消息给服务器* T3 n. y" Z4 Y+ L+ A1 {
- socket.send('Hello Server! im websockt');9 i2 Y% D8 `' q2 j9 x
- });) I6 d; @7 q# T0 {+ [ B8 u
- // Listen for messages5 w0 f3 ^+ x) D& C# `, T
- socket.addEventListener('message', function (event) {, [1 L7 t+ S# B% g
- //接收服务器返回信息
7 _# Q4 D7 P( e U - console.log('Message from server ', event.data);
; h5 q! z( u+ z8 H5 }2 z' Q5 h# h - });, u. P, {$ r3 z( X
1 X/ g+ \4 X; \8 z6 g: t! V) n: \
复制代码 伪直播主播页面- C0 v' u. V$ V/ l# g: \( R5 g3 N, v
html - <body># ~% Q1 C0 [" L$ a$ P
- <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>& {& v% k4 R7 z* L1 y
- <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
' @, q6 W/ N l9 F6 c# q - 画布
2 Y' c) P5 x0 E6 t) @0 l2 ^ G - </canvas>
6 }; c6 _' f K+ a - <img src="" id="videoImage" width="350" height="700">- w" J/ U7 `. Y% @
- <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
4 {- h$ E# g+ x4 K. }1 i, r - <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
7 ?6 \+ a- _+ W Q - </body>
0 m. u6 M- L! Z* I5 g
复制代码javascript - var v = document.getElementById("myVideo");) M$ t. t% e( C, A- L
- var c = document.getElementById("myCanvas");1 i3 m7 W$ d+ {. r/ @
- // var c = document.createElement("canvas");1 Y5 W! p. J. C9 ?; q2 P3 N2 \: w
- var img = document.getElementById("videoImage");
# k' C6 i+ ^- w' w+ S - ctx = c.getContext('2d');' v% g3 g/ Y1 n" z: e3 ?6 o" y
- var dataUrl;
$ _5 m# d" _/ t0 v0 V( |" L - const socket = new WebSocket('ws://xxxx.com:9502');
& X3 u# d( Z$ D+ ~ - //Connection opened
( q' e# J/ S' A' w+ k& j' i - socket.addEventListener('open', function (event) {2 w0 p0 w6 S' X5 y# d o
- // socket.send('Hello Server! im websockt');9 Z k' O/ Q( _
- });
8 R& ]) `9 h& H1 U, }) U$ z- [ - // Listen for messages, Y+ t! _- B; d. G4 m
- socket.addEventListener('message', function (event) {5 W ^9 n: }$ ~, f6 `' ~7 F
- console.log('Message from server ', event.data);
) h1 B/ M7 n/ m$ j$ m* i - img.src = event.data;; f# _9 r0 E) Z
- });8 S! J, R6 S7 g5 `
- $ I, E) [( w/ M3 M
- function playVideo() {
) J; W% v* }8 D8 ~, |* y2 y7 X* z8 v - ctx.drawImage(v, 0, 0, 350, 700);" d4 K: ?- h( Q% H5 Y( t
- dataUrl = c.toDataURL("image/png");
% o. h5 h% Y' Q2 @! v& W9 z - // img.src = dataUrl;! H, c5 L, y5 d" a; U/ O/ z
- socket.send(dataUrl); q' ]# \% I% o e; f+ M' H
- }: U4 \6 X @* }7 u
- var tick;" ~ ?2 [7 l- p( x0 I
- function aphla() {
* J0 P; z" F+ A - tick = setInterval(function () {
: q* x9 l4 j9 u' e) {' g0 { - playVideo();
4 o& m$ i4 i/ u& {8 i/ b& K6 G# I - }, 1);
- H2 b) f5 k7 ^; j& Q2 _ M- l! F0 t - }- E! J# s2 O* c( ?$ ]9 o) t( R' N
- function vdStop() {
' O* r+ P H& x& c# X6 S$ c - clearInterval(tick);- T# G1 J: E7 q4 g; \" [& O
- }2 J1 l. {, k2 W# {! ^0 e6 k7 f
复制代码 用户页面
) _+ ]1 V' \/ Y0 V* @% nhtml - <img src="" id="liveImg">
复制代码javascript - var img = document.getElementById("liveImg");
# v; I0 ^& ?* x& d4 H, d0 d - const socket = new WebSocket("ws://lm.com:9502");; Q. O% e& d5 s7 [& @2 J: z
- //3 m# L* ~6 j; V8 a
- socket.addEventListener('open',function(){
. c0 q4 l" I1 l# W5 \ - socket.send('Hello Server! Im live.html');
: G! N# n: Q. K! D! v9 l7 [ - });
3 f1 K$ b5 E0 w2 q' t( F - // Listen for messages6 c { q% f1 {: W4 B2 |! r& `
- socket.addEventListener('message', function (event) {
* d9 M" l9 m o% b% i5 n - //图片地址9 P' r; g; Z4 h/ q3 d; }" A H* D
- img.src = event.data;
# v2 D+ _1 |) q1 h1 Y* ^/ B - });; e) p4 t3 p; ^# i4 Y8 @
复制代码真直播应是通过rtmp推流实现的,本次功能仅作为swoole框架的一个案例用法 7 x' ~ c3 s b) M, P5 x
- K {% T$ `# x! G- Z |
|