浏览器使用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:// 前缀。
$ t: S, F6 f o+ T: J0 ?
) m, t+ X$ g* L$ O4 L1 s$ r1 I. r) J2 X
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开1 u& f0 ^1 Z. @
}
/ H' r) w; d/ L. N1 G
) R+ g: C* b7 p; k6 r) i& y
socket.onmessage = function(){5 K& q# Z. i2 I. I7 y8 p! N
//在event.data消息数据
8 L9 p3 [' T* J: L k
}8 p* k! Z' |6 {1 U
- k0 E0 y+ F5 ?6 u
socket.onclose = function(){9 N1 I b+ A/ h( \
//关闭WebSocket
/ U3 p, S8 b* l, ~" U
}
" F( }" Z* ~# e* r2 _
8 p2 L3 |3 J4 g! w
socket.onerror = function(){! }+ P5 V) \! o% `$ L* A+ U
//错误触发
: }2 e* l8 Y) T" `: B, q8 d) \
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
. J! a: `; F- e- {1 ?
<head>2 _4 Q+ d% n' h7 w
<meta charset="UTF-8">
0 L* t. O, q6 ^8 k; u/ y6 ]
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
& b+ t' p5 [% g. t3 j
<title>WebSocket</title>
' v% t. g# L/ d2 I+ w
</head>" u" d% C% J( e" [
<body>
; Y `, O3 R @& b
</body>
+ U! r5 S" e" V R$ z" R
<script>
9 m( t: ?) I; ~8 x
var socket;# X T' f/ d0 [/ P- I
if (window.WebSocket) {2 N @& L/ k' b6 H5 ]6 m: ]3 G# H- V
socket = new WebSocket("ws://localhost:8080/myapp");$ v8 D4 C( c; \. P& ^; E
socket.onmessage = function(event) {
5 i1 p1 r+ _* J; d
alert("Received data from websocket: " + event.data);7 _; w5 k/ m1 {2 M3 y
}
6 a- U1 B# F0 {5 f4 c2 E6 C
socket.onopen = function(event) {
7 a3 L' `& J- x' l) y4 y1 } |
alert("Web Socket opened!");
' r) f; W' F6 }3 ^
};
* X5 r8 J* l4 j% S, C
socket.onclose = function(event) {; X5 _8 P- k: O
alert("Web Socket closed.");
F' ]9 d& G0 m0 y1 {8 D0 q
};; j% M3 ~( A! N$ j5 P
} else {7 R2 _2 M( M! M, y) l
alert("Your browser does not support Websockets. (Use Chrome)");
1 p/ ~- {! Q6 h
}
& k% O' K' ~! |. _
4 G# F0 r5 }4 Q% S M
function send(message) {: y& h4 R8 \( t# X$ X
if (!window.WebSocket) {- P; t0 I4 ~8 m9 Y* d! l! L
return;) J3 B5 s% l4 Z) c: d
}3 {/ [5 J- \5 B7 y, ]
if (socket.readyState == WebSocket.OPEN) {
) J- X6 r& T( ]1 u3 i/ K1 Z
socket.send(message);
: Q: K) n* V, X# n, |1 N8 k
} else {
% Q' z7 S* ~- L& O. j* v& n
alert("The socket is not open.");
' D5 ?0 L0 g3 Y% U( G+ i% N
}# X& _7 P& {9 w% X- `$ P2 U
}
- Y9 w; J, S+ g8 d- g, `- x
</script>
" ~* a, x8 _3 V/ f3 K
</html>

复制代码

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

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