浏览器使用WebSocket实时通讯

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

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

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

复制代码

+ F6 O0 X' U1 G
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
* |2 \9 W6 p+ M( R0 E
, [9 x; g, n1 P6 V5 W; f* u. y# t+ O: f! c6 u
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){: r* D2 {' F3 X1 _
: r3 z9 [8 P; v* J
//打开
: z, A8 ^3 C' t6 P ?
$ b1 ?/ \5 c, m- E; _/ F
}
O: X# x/ |. l2 P
" J# P+ I# r& A1 `2 a- V
0 |0 @& T% c. D7 l2 T5 I6 |: w
socket.onmessage = function(){8 S$ @' R' q# x
' m% [% _% Y8 h8 T6 B# ^2 W
//在event.data消息数据5 m+ {6 a4 W0 N0 \; x1 H$ c- }( c
2 P9 ]- B- E7 J! f8 H" D
}) S* b2 W% B$ }$ c; x
" [5 c1 O- {; x) B. S I& S. B
socket.onclose = function(){- s2 E; n4 v1 l: G3 b$ ^
3 ? H( F$ i- n
//关闭WebSocket' R3 ~( a8 y, P8 H
% x) g1 H% J* M7 J) p) g5 n
}
2 `8 [( P- h8 i
# m4 G6 c2 I4 g9 Y2 ?& J
socket.onerror = function(){
& o! u# E) o- q% i, M$ g+ H
$ i- q; t1 c' W Y, j0 `2 x! O$ k
//错误触发' b" T: Q8 H; U3 J; H
8 J6 n) ?; z& `( A5 q0 E/ Z3 S
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>5 D. Z% d+ z6 B+ c8 r: N. B. H
<html>
# {2 b k& k% y) P* n0 Z* }( w
# N: s) V0 f4 v' V) y
<head>
7 I& z! r# h) y0 ~4 b
<meta charset="UTF-8">
. p& D6 e* I# B4 {, Y4 Z" O8 S
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">$ `+ ~' }0 B0 [$ u. e' P) j% I: H4 o& b
<title>WebSocket</title>
, I& X2 b; S' A7 o! J6 b
</head>
! ^% O; ]$ r: ^1 `1 c' Y2 G' q
/ `7 W- O# a2 \9 j4 p1 f; v+ |
<body>" C: n9 B# b. i' d5 \/ a0 ^3 S$ }! K8 }
</body>! I' m. X* j# k
<script>! s' @2 B: ]8 _1 j, y4 @6 q
var socket;
. Y; x% K- z; |4 b) Q: Y. l
if (window.WebSocket) {5 B1 y) C' u0 w( M& ^# V* E
socket = new WebSocket("ws://localhost:8080/myapp");4 @! ~# Z7 Z9 k0 \/ v# H0 {
socket.onmessage = function(event) {
3 _* A4 H3 a. ~1 e
alert("Received data from websocket: " + event.data);/ R5 B# f( [" T, P
}% }1 U: C( q7 L8 A
socket.onopen = function(event) { `8 `0 ^' @0 {) {0 |+ m5 p8 ?
alert("Web Socket opened!");
5 X8 U) R" ]/ T8 V# C' n
};1 Y% y ]9 z4 Q
socket.onclose = function(event) {# |8 g, o1 j9 A" D' Q
alert("Web Socket closed.");4 m( \# Q1 ?4 `
};
; J* A2 S( W& K' O
} else {
* [: u& ]4 _: d) p7 c
alert("Your browser does not support Websockets. (Use Chrome)");
! B5 i, K6 x: L {/ l
}% r# ]0 d s# Y6 O
" I) a+ N7 T5 C; f
function send(message) {
9 Q/ P5 u _0 U9 |% {
if (!window.WebSocket) {
9 ~* k8 s& s! t2 t5 X
return;! G) v, P; M, Y Y
}
+ O% C: I: t) q. M9 @9 w3 [* l: {
if (socket.readyState == WebSocket.OPEN) {, Q# ?$ A" r8 N$ a- F/ r8 t
socket.send(message);
6 Q! }3 o- J7 R6 S
} else {
0 D# s+ j* x5 x$ m3 C" z
alert("The socket is not open.");
9 ?1 W. q5 g( \7 p
}
7 L$ l, m8 R C t! ~
}
& F) G* c. I, Q' \ @2 R
</script>
2 ^. A2 e9 j M/ }# i7 b0 B4 e
" a5 A# }) `: ?! o. J* }+ o
</html>

复制代码

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

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