浏览器使用WebSocket实时通讯

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

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

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

复制代码

, H( P7 m# r+ l% Z( N( v
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ( g; R, r, Z/ C, Z8 x$ f1 [
L9 h, H# }8 _1 v; ^7 G/ H% n& Q
* h7 E' d% U8 x, d8 l0 |5 w
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
+ Y, B9 e1 z B1 P( I4 J' j5 T0 L( C
) n$ y3 t: m0 f2 Q" I# V, u1 y
//打开
. H9 N4 _+ v* {
! a# d9 y! d% S+ {: Q! J
}- K1 p- {3 s$ D8 f+ B1 }8 ^* m( a
7 V% k+ w0 @* T& g5 s- G
/ W$ \) e% g! L! A8 n8 B
socket.onmessage = function(){
1 ^% U% ~* r' ~9 t$ C( E! r2 P# `
3 I! i1 [* P1 q. a' m! t
//在event.data消息数据& v* P5 C8 V7 v0 }! [, l
! C5 }' R L, t
}
# z, P: s; \4 ^( W! ]% r9 R
" m3 r, t1 `! i' Y8 ~5 y
socket.onclose = function(){! l1 E/ a% I0 W- c
6 _" {' @, n; Y- M2 q" p' P6 w
//关闭WebSocket: q! ?' e. `$ |
% _7 W* S, s. y7 c* d
}/ s# G" R* f8 q/ {4 j4 ]6 o
1 L! S D& N, ^7 ^+ p9 P
socket.onerror = function(){
6 U H7 r. Q# u, b0 j% R3 {1 j
, H( P5 ?4 p7 c6 @& h
//错误触发
3 z9 I: d. t3 x" K) m7 x- y0 p
; @& G+ ^% ?* L- ?! X! I0 ?4 A
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>; _8 Y9 K% Z [: I& L: \% q
<html>! B8 z- @# G. ^: p- R* V' s
& M$ Q; g7 e1 r8 U' V& O
<head>
: P* ]. e- c' G. H
<meta charset="UTF-8"> Y5 h1 y7 @ m1 u
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
, v# r2 o0 T: Z# H9 _4 o
<title>WebSocket</title>
' M4 n( p! P$ W0 M" F
</head>' `0 }, Y* W8 r: m4 L) q: u, R
) ]" C S9 q6 R( L6 v Z7 W
<body>
0 x/ r4 z5 k/ d) [) z3 n4 l+ @" ]
</body>+ }8 N N9 ~# b9 \" J9 V7 H* K
<script># M: v. l8 p: l; Y
var socket;
% n/ _' t# p H i' m( I$ ]
if (window.WebSocket) {
3 n3 L/ E8 r0 w% D: U7 } C: ]5 U( X
socket = new WebSocket("ws://localhost:8080/myapp");
+ Q$ {! N* `+ [1 q
socket.onmessage = function(event) {8 w8 x8 H2 N/ Y0 B9 b
alert("Received data from websocket: " + event.data);- h& K( M2 b: n8 G1 h6 r9 U
}6 e0 v/ ]2 X6 N! C7 H
socket.onopen = function(event) { X/ B% h0 ^/ B$ p
alert("Web Socket opened!");* d6 T2 v$ q& U+ n$ N# A3 b1 g
};$ f% x+ V3 r; j8 Y% z9 e" l5 Y
socket.onclose = function(event) {
' R1 Q6 c; P( M6 X
alert("Web Socket closed.");3 E' H. ?8 c- g7 e- \: @( Z
};. n, q# l/ l- _* E# Y$ i
} else {
8 j( D" ?% v9 f6 g1 q, J
alert("Your browser does not support Websockets. (Use Chrome)");
, R1 d7 a' }6 [' f
}
" t8 n! c/ ]6 R1 S
+ O' z' [+ t* }- @2 Y1 ^
function send(message) {1 R% L" U1 Q4 U& l I
if (!window.WebSocket) {+ s2 {9 j( H' K
return;
+ {9 \7 Y4 ` v! ]7 {4 w
}+ g" t9 w' g9 c; [& C4 E
if (socket.readyState == WebSocket.OPEN) {, B$ _" S8 O# q% ~, |2 X- C2 X
socket.send(message);
, T6 x+ {3 p* V
} else {0 R. l, n$ y% ?' w j3 m
alert("The socket is not open.");
4 s |: P1 d8 z' B4 d
}
8 W* t, C9 e3 e) X. u5 ]% _
}
1 L. D& x& W% y& b8 Z1 T
</script>
2 r6 D& J, U: p4 D; @/ Q
# Y4 i( M$ L* g2 c8 Y+ x
</html>

复制代码

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

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