浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-29 14:55:21

如果你要有一个支持 WebSocket的服务器（Java、Php等），可以在浏览器中使用一个新的WebSocket服务协议，来打开一个链接：

var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");

复制代码

: n& @; q5 B5 g' K. C与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 3 B% ?7 _! V0 H" A4 m0 v* \

$ x$ Y! _+ p2 H8 y6 J/ o0 f: L/ T; a) X$ z! j2 G H5 C9 l
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
) c( ?. P! }) o! J# e P) c
//打开* P* V, ]3 ^+ b" L8 [" \- r% y8 b# E
7 K9 [3 F1 ~* h& e
}
0 V3 `& j. \" Z' c7 @: g' Z
- I2 D0 w; k9 M0 @! b
/ M y" _. J, U8 W& b9 h
socket.onmessage = function(){. M0 a* G$ `; a% \! k
. }6 _0 q3 c5 a- O6 G# q( s' @
//在event.data消息数据
4 m9 E* G, G- I+ P
1 F; F& S. F/ R# p2 q) }' d) [. Y
} _4 W, c$ _& O& F) M1 O" s
& W1 a) {6 L. L4 M
socket.onclose = function(){
0 q# q/ K: n# Z6 I" E! v
( P3 V; @9 ~; m% \# W- q
//关闭WebSocket" T* r6 Y @7 a
6 a+ |8 n( Q- \5 L1 v
}
/ ]0 f0 X+ J- L6 w* Z
* G V+ c& c2 b% T4 t5 i
socket.onerror = function(){ t( D# P" W0 O0 B$ b
" U2 J2 ?8 r6 K
//错误触发
9 }4 v! a1 O) l4 k: o6 [
) j2 {8 c8 f# j0 l! W' j7 Y% e P
}

复制代码

通过套接口发送数据，调用socket.send:

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
4 \1 S! B6 x9 v7 `; f3 r
<html>8 _9 s) S' H z/ p8 P& `
) H- R) h6 ~: z& W, t
<head>: g6 c7 r* \# b6 d
<meta charset="UTF-8">+ ]) j g, K' b+ f! D% r/ q7 X
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">, s) h# l) s' i3 u, f( F; [! R' L5 e
<title>WebSocket</title>. ~9 e& e# V, p) \ K
</head>, f6 e q& i, Q- s! R) c
4 z4 k% q3 D* K, n8 s+ L. G
<body>' k7 f9 I" d& q7 O. Q% ~+ u. J; T
</body>- l6 G: }: O7 ]7 v) z
<script>
. ]; T9 p" O( n7 N) B/ \% O0 w% l
var socket;
1 E' v- \4 T; P
if (window.WebSocket) {% r# e$ x1 F& H0 w5 j/ n T
socket = new WebSocket("ws://localhost:8080/myapp");
. a, v- |& G+ d4 J0 x, f3 _$ k# _3 M
socket.onmessage = function(event) {
7 g ]3 V8 b I/ T
alert("Received data from websocket: " + event.data);4 o4 Q2 Q3 S& i
}
: e" K/ T- b Y0 [; L
socket.onopen = function(event) {
1 U2 o4 D; g& H$ d% s6 {3 D/ y* Q; @
alert("Web Socket opened!");
8 y- e3 Z7 E6 D, h! Q1 A! Z( W
};
8 D8 x7 t: c; j: _' e
socket.onclose = function(event) {
: \, D# ~3 p5 B0 W) k4 _8 g+ o* K
alert("Web Socket closed.");
# s# e% O g x) ~" }6 N
};, t6 @' U4 q' t2 h
} else {
: D# R4 S. o& u; K, G. u0 d3 \9 a" g, E
alert("Your browser does not support Websockets. (Use Chrome)");& w, C4 C c0 c) g+ g% H c- B
}3 q7 u1 a6 g5 h: o' T
& \( R. B* l. Y& P1 Y! @" m* ^+ T
function send(message) {
$ F5 ]" j) G- D4 |
if (!window.WebSocket) {7 v1 C( a5 `- _* G, N- Z0 r
return;
( }* [# a/ k5 ~$ L
}
2 E) ^' o/ L4 \( v3 b$ [* X
if (socket.readyState == WebSocket.OPEN) {
: Z2 F4 r$ h' |8 m3 t# q
socket.send(message);1 y" w' y9 a& ^ F$ \ n+ {
} else {% N# e. F$ S, A4 d7 a) J& a4 ?
alert("The socket is not open.");
( U2 X/ ?" |" ^0 Y$ j
}
a* l5 r6 i+ e
}
& E9 I, K) U; r |/ _# ~9 v
</script>0 \7 R m9 T- `
, e l _% [3 h* \2 d3 ~
</html>

复制代码

帐号		自动登录	找回密码
密码			立即注册

[php学习资料] 浏览器使用WebSocket实时通讯

浏览过的版块