浏览器使用WebSocket实时通讯

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

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

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

复制代码

3 m9 j A6 _% B2 N与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ! X7 ?4 h+ h B3 G

7 P6 c' O/ X4 Q" B. _& O* k. U. ]7 J
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){+ a% N1 L% h' b1 |" [( H
0 k8 b+ ^& u: i! W5 M+ z
//打开
4 ^. q# o& E4 f. C7 V# v
. B+ J, f. H9 q7 G
}
* K' [! g" O' B8 c/ L
( ~1 ]% Y' f& A( T
% g# }& h7 B) @" _/ e
socket.onmessage = function(){! S1 i: S. ^$ r* c
0 _! N6 m# T8 A; ^
//在event.data消息数据
[, O) K* \0 f, S' V
# {9 S K' F; l7 [) Q+ g
}: e3 T( i7 G2 v6 w( f
) V/ n& ?( Q; E$ ^+ Q% B1 ^2 b
socket.onclose = function(){ C" ?1 V" Z! I+ J, i
( `( Q, L3 c- T, i0 @- o; B( T# s
//关闭WebSocket
5 @" M2 P$ m. Y
/ w: H: o. s3 d
}; c3 I. Q& H. g* Z! F) ]. Y2 X
8 b- k) p1 G* n8 Y+ C/ r
socket.onerror = function(){, m) o% z3 k% e) P/ C
& v. q( u; k+ M) W+ e. y+ R- X Q
//错误触发( R" o* A! x- E+ d
/ \& h0 g: ^5 o- M) Q# S8 \
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
$ M, u/ }. a: \, m! U
<html>: O# @$ D! x' `& t
5 n0 y1 n/ M/ c F; N
<head>( k6 w7 X m1 k. o" A4 A
<meta charset="UTF-8"># b k+ t) }5 v: A# `# l
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
/ ^4 F8 l1 H- h, M
<title>WebSocket</title>( x6 d1 N; g1 ~% p( H9 W# a
</head>
) ~5 [/ a) w2 z6 p6 {3 c) ?4 O
; x* m! b( I& o/ L* S* |' C% k
<body>( D$ c( x% @6 h/ ^: `# F, Q
</body>7 m' L. l7 ?: K: R% O
<script>7 e g7 y( K/ a% ^8 I. j$ A
var socket;
b, _7 c2 I' Z* n, g
if (window.WebSocket) {
' A* [. }# y! T# k- w$ W
socket = new WebSocket("ws://localhost:8080/myapp");
3 F. U) I" C/ V0 f
socket.onmessage = function(event) {
% [( C8 m3 l3 H2 O" I1 i; C
alert("Received data from websocket: " + event.data);' ]) [; w8 I! W" Q+ @' K
}6 L. N. p! |2 V
socket.onopen = function(event) {; i$ i$ D, S! }% d2 I6 ^. x( [0 T& R7 K
alert("Web Socket opened!");
0 s5 w" p6 _5 v& r3 i+ E3 f
};3 T0 R) ~: ^' s3 G
socket.onclose = function(event) {6 G9 n3 O* g5 ?! B7 v3 n
alert("Web Socket closed.");! P0 v5 T1 p/ U" f' b7 G
};
# `: _% q7 E5 O' C
} else {+ d- [ g4 S$ M, P( s! t) p
alert("Your browser does not support Websockets. (Use Chrome)");% i# Z. M: [' v
}
/ d3 k6 c) N0 \; v }( E) M
/ P7 _8 S) k% R R
function send(message) {
, \8 a3 `' t9 H
if (!window.WebSocket) {* {7 }9 f$ v3 W2 x) }7 o
return;
" t% E9 b3 I# q/ u E N7 A
}& i9 W; l, g# l5 G* K- f
if (socket.readyState == WebSocket.OPEN) {
( I% U7 e# K* }6 R1 |
socket.send(message);! ?4 x, x9 p4 u" c- m& u
} else {; |) k2 l4 K, G
alert("The socket is not open.");
1 @, q8 H c0 }) j6 H
}) C0 Z8 i8 _! r: Z6 h2 Y, i
}
' s1 Z5 i2 w% V
</script>0 |, A* A; R. _2 j* z) i/ H
+ \1 i, z3 i' u; m4 D( G
</html>

复制代码

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

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

浏览过的版块