浏览器使用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:// 前缀。
: A3 k4 {- l, b9 k* x3 y( n% s2 B3 H5 q* r* }# N7 Y* Z

$ N$ M% B# ]' k% d该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开) O, F) h+ O8 ~& b
}+ n! `* p5 U; D$ k7 n
" m$ A8 Q- k8 k$ i; d( k2 m( U- l" ]
socket.onmessage = function(){
1 M8 X# M/ z6 C+ J& }, {' |( Z6 G. w5 n
//在event.data消息数据
. S5 C g: J3 E# s* j& D
}
4 @$ m* ~8 w& h; m
# p" T4 w R0 c3 c
socket.onclose = function(){* y" r% F3 l7 f P8 B: ^
//关闭WebSocket; Z$ ^7 }( d' ]" M8 F$ n# ~' p4 N, L
}
7 s, G: T9 ?5 s1 y; ?
' |; u& V6 ^5 c4 U
socket.onerror = function(){
% t% B0 Y( N. p; e7 h/ Q
//错误触发
- O. j9 m0 U6 x% `" [
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>2 K5 m8 w& u% `
<head>
) z2 K( P% S K
<meta charset="UTF-8">' B* ]$ |& Y& z+ r, ]- Z- n
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">9 K: L9 {: K' m% @) d' Z
<title>WebSocket</title>, h$ g. R, u; h" O5 U8 B0 e D8 m! `
</head>3 |3 S2 F" A) I* T
<body>6 f, ?& n. H0 {: V
</body>
6 m/ r, H/ M" e. {$ |
<script>* H6 E/ A1 f0 T, \5 b
var socket;9 }2 G% N7 e% {2 R
if (window.WebSocket) {
8 j; F& H: J, C! J
socket = new WebSocket("ws://localhost:8080/myapp");, K1 r+ G# F' n$ X
socket.onmessage = function(event) {$ r8 \0 k1 K( m3 `# Z5 h( J3 _
alert("Received data from websocket: " + event.data);
. B1 B' ?+ t, U3 w9 R( a
}, J' c# J9 n) O4 }
socket.onopen = function(event) {
/ e g( O3 s2 ]) X# ], Q* I
alert("Web Socket opened!");& v' ], I6 f! {; t9 P
};3 q3 x2 c% d2 ?3 q. a" F2 K
socket.onclose = function(event) {
9 G w# l. Q8 Y: x1 v
alert("Web Socket closed.");
$ _1 `( F" D3 K2 p0 r) l
};
$ \0 |, Q! k o2 c! ^4 c, a7 m
} else {
$ o* w7 W" t7 W1 O) L
alert("Your browser does not support Websockets. (Use Chrome)");
6 Y( @/ t- O9 {3 J! b/ i
}
7 m ?- s; e# @: M+ [& p* r4 B
0 z2 d7 o' G: v; L) F
function send(message) {4 Y) a- S. ~5 l% {' l- d
if (!window.WebSocket) {+ C! m0 {% `3 o1 v6 n5 f) \
return;
4 u" h" f. g8 L' e) J8 d9 G
}4 Y2 e- `2 g. z) [; L! G/ s& E( j
if (socket.readyState == WebSocket.OPEN) {9 g9 F( y0 Y; v* _& X
socket.send(message);8 q" Y. C$ c4 u# K( Z7 j1 P
} else {/ |7 ^8 a! d, k6 M. v& s2 B1 {9 f
alert("The socket is not open.");
u9 k8 p1 @( f
}
+ i! H, i. |% u1 g4 X) J1 s
}& J. h6 {# y* @9 t6 D# U5 F
</script>% t* ^, r3 g; B% B& b+ E+ g+ G
</html>

复制代码

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

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