浏览器使用WebSocket实时通讯

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

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

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

复制代码

2 |6 Z0 ?6 F1 H
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 $ j6 B+ f3 P: Q' g& `$ L; Z
$ h5 f( z9 J, E

% s! v: `# c. O3 U& F% v该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
4 N" L5 |# O6 d0 W* D% c1 m: b
, w' L% Q a) ?, I, l
//打开
6 b; A( {' r! u+ U; z
4 x% P* h9 G( R& P
}- I" I; o1 y2 ^& l9 p/ H
n6 w' b( J+ K5 b2 E. G4 h/ Q
3 T$ j3 H8 j2 P' I, u
socket.onmessage = function(){9 P! n9 b4 P3 S+ ~
0 _4 E' X/ h( n* K+ U0 b' V" ~
//在event.data消息数据7 v# M9 E1 I! }3 w' [
3 I- P4 _- P2 J4 I9 ~( l
}+ _* g' X: n. }$ T* j
$ D; a& Z7 m M- {5 C/ h+ A
socket.onclose = function(){
+ w' e( _( H1 V$ d; P
+ r6 \& e* ]. r! @
//关闭WebSocket
9 O9 x3 g# V% V, F* f- D
' G$ l7 @! c3 J
}* K3 U8 G, S w% x0 l
/ J; ~5 ?- w+ a" D- o
socket.onerror = function(){0 k, B, t; b7 w D
5 [) \9 ?/ Q% |2 j
//错误触发
) f5 c; ~# H/ x
) h7 `2 ] O4 o2 \+ r4 X( C
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>4 }$ t8 l0 E6 @3 {
<html>7 l1 V; n% [4 T) M; i" d d3 G" \
$ v( f4 L/ W& ^
<head>
9 `. }8 T! M" M& o" J3 Z
<meta charset="UTF-8">
6 C# A9 |5 l( H! I- _
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">: m6 ?3 ?5 |& |4 O: y6 U" O
<title>WebSocket</title>
. a/ v4 F/ X" C2 J8 O
</head>
$ J# }+ P8 t# R7 X* I. S
, l5 U3 N, ~% e5 S8 h; E
<body>% L) D$ E5 N) M+ d, A- J
</body>% l$ {6 n) S: N) `/ h
<script>
" m& ~* W. A5 D3 |/ J" T3 B- t
var socket;
: O1 w! e3 B5 m- L6 ]* m
if (window.WebSocket) {, [: A+ c4 R( a: B4 E/ h/ b8 k. f6 ^
socket = new WebSocket("ws://localhost:8080/myapp");" H/ `! E. _2 U& z' b/ E
socket.onmessage = function(event) {
$ r2 V" e8 I# z
alert("Received data from websocket: " + event.data);
- r9 I" Z5 D( R. D. W
}
9 {* n5 S+ a6 s6 q: R
socket.onopen = function(event) {2 @/ K# G q- s+ s& z2 }: p% |
alert("Web Socket opened!");& b' N# x/ T7 f
};
8 @* }+ H* @! V! @
socket.onclose = function(event) {
7 T c3 H4 K N5 j9 x2 v
alert("Web Socket closed.");
. f ?3 p7 P" U! i7 `
};: K! z0 J* x/ Z7 Q; u' T
} else {
" W* _, e4 K$ t6 B" r2 [4 D
alert("Your browser does not support Websockets. (Use Chrome)");
- _: J! P+ {% F3 o5 }/ e
}( _% ~4 K3 L6 ?8 M+ N! g6 t5 Q
1 ~ m" @1 A6 k) s) }3 r2 J
function send(message) {. {' r$ U, B& ]" t8 [( T/ \! B% G
if (!window.WebSocket) {, B4 @: j& F2 j: z. F% r
return;3 `% S9 u5 d9 ^8 C, o8 ~+ q
}+ X0 f( K) ~* F/ @
if (socket.readyState == WebSocket.OPEN) {
0 i. X& S- d: W) Y; r" @! S4 L
socket.send(message);
0 y, p" u8 |7 A# j
} else {
& K. Z' q& l( Q7 W2 B& `1 p
alert("The socket is not open.");0 _+ x( j8 Q+ f. w7 E. q4 P
}
) f5 K, I P9 p$ `8 Z
}; X7 C S! I% j" Z1 t0 e4 X
</script>
% D {5 S& B0 b+ F8 \5 g
3 ]7 G; A5 i7 q( g9 N
</html>

复制代码

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

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