浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-23 19:36:00

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

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

复制代码

与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ' m9 a8 m# x; M. Q6 v- ?6 D! e

8 a7 R. U0 A7 r
5 b$ l" U! w" Q该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
5 r# b- r% [' r* H, t2 x
}
; J4 ^9 z! w0 B+ k& o0 t) q) i
* m' s8 }: I8 x8 L
socket.onmessage = function(){
$ z0 N9 @- m4 J9 e# z6 r* f9 @9 E/ \
//在event.data消息数据 F- t& c/ o7 Z+ \3 V6 {$ Z8 @/ k* [/ ]
}3 U2 z; e+ o. o8 t# ^( }# v
, T/ r$ s! z3 f! C
socket.onclose = function(){2 W. ~- b0 {! k& N- a! Y
//关闭WebSocket% ?4 _. x, J3 I0 m8 t. f4 X
}
+ g2 [! e/ ^$ r: M; Q5 n# I
7 H. d# M% P2 L& [$ w) K2 s6 N
socket.onerror = function(){
1 {1 |/ w4 N2 G7 s$ V
//错误触发
N2 [) ~+ _) u- p# I: u3 s
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>6 p; x: d+ s5 K: Y! q/ D
<head>
3 N6 b! y# G: _1 ]; Y F0 F) |
<meta charset="UTF-8">
7 g `& y- V" u
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
$ a$ R% c; e( ~) i- L/ X
<title>WebSocket</title>0 |, O) P* {* j# M6 @5 ^
</head>
) a6 |: ^4 r/ }) P$ b
<body>1 B! j1 K2 z: ?6 {
</body>
4 y) M+ M3 |5 h# x: e& P+ U
<script>
% x$ [$ q. o! \4 g7 i7 {6 z
var socket;0 u% o- K/ t4 G& k
if (window.WebSocket) {! e- g7 u4 z2 V4 D6 g$ Q) M6 W
socket = new WebSocket("ws://localhost:8080/myapp");
$ n) o7 i9 Y0 G
socket.onmessage = function(event) {$ u; M0 d" ?# M4 C X5 N# C
alert("Received data from websocket: " + event.data);6 M. q) G# }1 l( {% D% |, o
}) p+ u3 }9 s, w9 [
socket.onopen = function(event) {3 `' ~' v0 ^+ \# q; V
alert("Web Socket opened!");
4 j* O. H1 K/ @
};
, w ?: w; y9 T: A, E
socket.onclose = function(event) {( }% K# o/ y7 l# O
alert("Web Socket closed.");1 N/ _8 P1 S) B$ r( w
};
; V5 N% t, l) j# b: A4 H* A ?4 o. Q
} else {
$ G: w2 T1 U) Y0 x! N
alert("Your browser does not support Websockets. (Use Chrome)");
( Z+ A6 |4 @3 f9 b3 f2 p
}2 d* D/ P& v4 z* C+ p7 f
8 a3 x! Y. y/ m/ J7 f! q
function send(message) {# U8 V' K+ e+ ~' w9 A& r
if (!window.WebSocket) {: [1 {7 q/ E7 _% b- d0 |
return;
; C; v. t9 K8 ?& Z. ?
}
8 R1 l5 ~$ f7 T' n o6 r
if (socket.readyState == WebSocket.OPEN) {) m- j W4 d3 O# X5 ]" `+ u
socket.send(message);
# b, ^- c4 R% E1 R$ X- q
} else {
; Y+ Z6 |" x; F8 ]) z
alert("The socket is not open.");
3 a4 K' ~" e0 ~8 P c
}: L: M8 ~/ }6 [* M: [, s! \
}& i3 P8 P: \! Y
</script>8 G3 U% w V' U) n
</html>

复制代码

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

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